UNDERSTANDING CSS SELECTORS: PSEUDO-CLASS SELECTORS

Hello, World! Welcome to the fourth article in my CSS series, Understanding CSS Selectors. In this article, we would be delving into the pseudo-class selectors; what they are, how to use them and differentiating them from their close cousins, pseudo-elements. Alright, let’s jump right in.

A CSS pseudo-class is a keyword added to a selector so as to style a specific characteristic or state of that selector. Some of the pseudo-class are :hover, :focus, :nth-child and :last-of-type. It can be used to style an element when the mouse hovers over it, to style an element on focus or style visited and unvisited links. As we can see from the examples are above, it appears that these keywords all seem to be preceded by a colon (:). In most case scenarios, the pseudo-class is used along with a selector, the selector comes first and then the pseudo-class along with the colon. Below is the general syntax for its use.

General Syntax for pseudo-class selectors

The pseudo-class selectors can be divided into 5 or 6 types, depending on if you don’t regard the pseudo-elements as a pseudo-class at all. These types are:

1. Link related pseudo-class selectors
   The most frequently used ones which are concerned with styling anchor tags at their different states, these pseudo-classes are :link, :visited, :hover and :active. To style the link appropriately, you should go with the LVHA order which is to put the :link pseudo-class first, followed by the :visited then :hover and :active.

2. Input and link related pseudo-class selectors
   This allows styling for the input html elements by selecting the input elements based on some state or attribute of the element. Some of them include :focus, :checked, :target, :required, :disabled, etc.

3. Position and Number-based pseudo-class selectors
   This allows for styling based off of their order or position on the document tree rather than just its type, id or attribute. They include :root which targets the root element of the document tree, the siblings pseudo-selectors which include the :first-child, :last-child, :nth-child(), :nth-last-child(), :only-child, the :first-of-type, :last-of-type, :nth-of-type and :only-of-type.

4. Relational pseudo-class selectors
   This category includes the :empty pseudo-class and the negation pseudo-class, :not() which takes an argument which is filtered out from the selection to be made. Unlike the general syntax for pseudo-class selectors, the :not() pseudo-class may be chained or not be chained but it may not have another negation pseudo-class as its argument.

5. Text related pseudo-class selectors/pseudo-element
   This category as the name implies is concerned with text. Here we have the ::first-letter, ::first-line, ::selection and then the :lang() which styles elements if it matches the language attribute.

6. Content related pseudo-elements
   This category of pseudo-class selectors are used to create new elements that are not specified in the markup of the document and can be manipulated much like a regular element. The ::before and ::after pseudo-elements belong to this class.

Pseudo-elements behave in a similar way with pseudo-classes, however they act as if you had added a whole new HTML element into the markup, rather than applying a class to existing elements. Pseudo-elements start with a double colon (::). This :: notation (double colon notation) was introduced by the W3C in order to establish a distinction between pseudo-classes and pseudo-elements. For backwards compatibility, the single-colon syntax is acceptable for pre-CSS3 selectors. So, :after is a pseudo-class and ::after is a pseudo-element. You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.

General Syntax for pseudo-elements selectors

There are lots of other psuedo-classes and psuedo-elements which are not listed here because of they can’t easily fit into the categories and I did not explain them individually since we are not going into much details but a good resource to read more about these selectors would be to check the MDN Web Docs and read up on CSS pseudo-classes, the website explains in details each selector and how it should be used.

To check for browser compatibility of the selectors, you can always use caniuse.com.

Thank you for reading, if you found this article helpful, please do well to share, it would probably be beneficial to someone else too.

Thank you once more for reading to the end, see in you in the next article where we would be talking about the Attribute Selectors.

Ciao! ❤️