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 or simple selectors like id or class. They are used to select elements based on their attributes, states, and relative position. combinators Pseudo-class Syntax A pseudo-class has a simple syntax. They are identified by a colon ( ) placed just after a CSS selector. : { :value;
} selector :pseudo-class property 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 Top 5 Languages 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 Javascript Python Java PHP C# < = > div class "container" < > h1 </ > h1 < > p </ > p < = > div class "list" < > ul < = > li class "list-item" < = > a href "#" </ > a </ > li < = > li class "list-item" < = > a href "#" </ > a </ > li < = > li class "list-item" < = > a href "#" </ > a </ > li < = > li class "list-item" < = > a href "#" </ > a </ > li < = > li class "list-item" < = > a href "#" </ > a </ > li </ > ul </ </ > div div Dynamic pseudo-classes These are the link-related pseudo-class states which were included in . Each of these states can be applied to an element, usually . They include; CSS1 <a> - This only selects tags with attributes. It will not work if it is missing. :link <a> href - Selects the link while it is being activated (being clicked on or otherwise activated). For example, for the “pressed” state of a button-style link. :active - Selects links that have already been visited by the current browser. :visited - This is the most commonly used state. When the mouse cursor rolls over a link, that link is in its hover state and this will select it. :hover Referring to our , we would like to change the background of when hovered, give specific colors to all links, active and visited links. index.html <li> style.css { : aliceblue;
} { : black;
} { : green;
 } { : red;
 } .list-item :hover background-color .list a :link color .list a :active color .list a :visited color Structural pseudo-classes These exciting positioning states/selectors were introduced in . They target elements according to their position in the document tree and relation to other elements. They include; CSS2 This selects the element that is at the root of the document specifically the element unless you are specifically working in some other environment that somehow also allows CSS. :root - <html> Selects the first element within a parent. :first-child - Selects the last element within a parent. :last-child - Selects elements based on a provided algebraic expression (e.g. “2n” or “4n-1”). For example, you could use ‘2n’ for selecting even positions and ‘2n-1’ for odd positions. Has the ability to do other things like select “every fourth element”, “the first six elements”, and things like that. Covered in . :nth-child() - more detail here Selects the first element of this type within any parent. If for example, you have two s, each with a paragraph, link, paragraph, link. Then div a:first-of-type would select the first link inside the first div and the first link inside the second div. :first-of-type - div - This works the same as above but it then selects the last element instead of the first element. :last-of-type - Works like , but it is used in places where the elements at the same level are of different types. For example, if inside a you had a number of paragraphs and links. You wanted to select all the odd paragraphs. wouldn’t work in this scenario, therefore, you use . :nth-of-type() :nth-child div :nth-child div p:nth-of-type(odd) - Selects the element if and only if it is one of its kind within the current parent. :only-of-type - This works like , but it counts up from the bottom instead of the top. :nth-last-of-type() :nth-of-type - This works like :nth-child, but it counts up from the bottom instead of the top. :nth-last-child() So hope you’ve understood the structural pseudo-classes. Let’s try to apply them in our that we created earlier. We are going to give a background of to every odd element. We shall demonstrate it in two ways giving the same output. style.css slategrey <li> Using the Method one: :nth-child() { : slategrey;
} .list-item :nth-child(2n-1) background-color Using the Method two: :nth-of-type() { : slategrey;
} .list-item :nth-of-type(odd) background-color Other pseudo-class selectors that will not be covered in detail in this article include; :enabled :disabled :checked :target :focus :required :optional :not() :empty Pseudo-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 A pseudo-element, however, allows us to create items that do not normally exist in the document tree, for example . So you could simply identify a pseudo-class by a single colon ( ) and a pseudo-element by two colons ( ). :hover. ::after : :: Pseudo-elements include; - This enables us to add content before a certain element. For example, adding an opening quote before a blockquote. ::before - This enables us to add content after a certain element. For example, a closing quote to a blockquote. Also used commonly for the , where an empty space is added after the element which clears the float without any need for extra HTML markup. ::after clearfix - This is used to add a style to the first letter of the specified selector. For example, to create a drop cap. ::first-letter So let’s use the selector to create a caret in front of every link in the list from our . We shall add a code snippet to our file. ::after index.html style.css { : ( ); : ; : no-repeat; : ; : inline-block; : ; : ; : ;
} .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 content '' display 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.

CodePen

Target

“We build our apps the way we build our cities: over time”

Winner of Noonies 2020 for the award Hacker Noon Contributor of the Year - CSS.

Understanding Pseudo-Class Selectors

Too Long; Didn't Read

Companies Mentioned

@mcdenny

RELATED STORIES