Front-end Developers don’t just need to understand how to write CSS, they also need to know how to write it effectively and efficiently. Sometimes we work on huge projects which need optimized CSS for speed meaning, you need efficient selectors to effectively style elements without their ids or classes. This, therefore, calls for a clear understanding of selectors available. Enough of talking let’s jump right to it 😉
Pseudo-classes are CSS classes used to define the state of an element. They target elements that can’t be targeted with combinators or simple selectors like id or class. They are used to select elements based on their attributes, states, and relative position.
Pseudo-class Syntax
A pseudo-class has a simple syntax. They are identified by a colon (
:selector:pseudo-class {
property:value;
}For now, we shall talk about many examples of pseudo-classes then later explain how they are different from pseudo-elements.
Pseudo-classes select regular elements but under certain conditions, for example when their position is relative to the siblings or when they’re under a particular state.
Refer to the sample code snippet below to follow the examples 👇
index.html<div class="container">
<h1>Top 5 Languages </h1>
<p>In the last year, developers collaborated in more than 370 primary languages on GitHub. The following are the the top five languages with more contributions on GitHub</p>
<div class="list">
<ul>
<li class="list-item"> <a href="#"> Javascript </a> </li>
<li class="list-item"> <a href="#"> Python </a> </li>
<li class="list-item"> <a href="#"> Java </a> </li>
<li class="list-item"> <a href="#"> PHP </a> </li>
<li class="list-item"> <a href="#"> C# </a> </li>
</ul>
</div
</div>Dynamic pseudo-classes
These are the link-related pseudo-class states which were included in CSS1. Each of these states can be applied to an element, usually
<a>:link<a>href:active:visited:hoverReferring to our
index.html<li>style.css
.list-item:hover {
background-color: aliceblue;
}
.list a:link{
color: black;
}
.list a:active{
color: green;
}
.list a:visited{
color: red;
}Structural pseudo-classes
These exciting positioning states/selectors were introduced in CSS2. They target elements according to their position in the document tree and relation to other elements. They include;
:root<html>:first-child:last-child:nth-child():first-of-type div:last-of-type:nth-of-type():nth-childdiv:nth-child div p:nth-of-type(odd):only-of-type:nth-last-of-type():nth-of-type:nth-last-child()So hope you’ve understood the structural pseudo-classes. Let’s try to apply them in our
style.css slategrey<li> Method one: Using the
:nth-child().list-item:nth-child(2n-1){
background-color: slategrey;
}Method two: Using the
:nth-of-type().list-item:nth-of-type(odd){
background-color: slategrey;
}Other pseudo-class selectors that will not be covered in detail in this article include;
:enabled:disabled:checked:target:focus:required:optional:not():emptyPseudo-Elements
Content-related pseudo-elements effectively create new elements that are not specified in the markup of the document and can be manipulated much like a regular element. This introduces huge benefits for creating cool effects with minimal markup, also aiding significantly in keeping the presentation of the document out of the HTML and in CSS where it belongs.
Difference between Pseudo-classes and Pseudo-elements
A pseudo-class is a selector that assists in the selection of something that cannot be expressed by a simple selector, for example
:hover.::after:::Pseudo-elements include;
::before::after::first-letterSo let’s use the
::afterindex.htmlstyle.css
.list-item::after {
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="black" stroke-width="4" stroke-miterlimit="10" d="M4.75 1.5l6.5 6.5-6.5 6.5"/></svg>');
background-size: 8px 8px;
background-repeat: no-repeat;
content: '';
display: inline-block;
height: 8px;
margin-left: 4px;
width: 16px;
}You can run the live project here 👇
https://codepen.io/olukadenis/pen/wvvZRdN
Final thoughts
Deciding on which pseudo-class selectors to use depends on your project. Knowing both your project and the CSS selectors available will help you decide. The CSS pseudo-classes I covered in this article may not be the the perfect selectors for your stylesheets, but they can be invaluable tools, particularly for cases when you can’t rely on id and class selectors. Remember, writing good CSS is about finding the most efficient way to achieve a project’s goals.
