A Complete Guide on CSS Pseudo-Classes and How They Are Used

The :hover pseudo-class is arguably the most well-known as it enables us to style an element when it is in the hover state, which is what happens when a mouse pointer comes over it.

A thorough analysis of pseudo-classes is given in this post, which builds on ideas from our earlier talks on margin:auto and CSS Floats. The purpose, classification, and distinctions between pseudo-classes and pseudo-elements will all be covered.

Comprehension of Pseudo-Classes

A keyword added to CSS selectors to specify a particular state of an HTML element is called a pseudo-class. A CSS selector can have a pseudo-class added to it using the colon syntax :, as in a:hover {... }.

To apply the same style guidelines to HTML elements, such as sidebar widget titles or top menu items, an attribute called a CSS class is applied. In essence, HTML elements with similar characteristics are grouped or classified using CSS classes.

Because pseudo-classes apply style rules to items that share certain properties, they are comparable to CSS classes. However, pseudo-classes are applied by user agents (like web browsers) depending on the current state of the HTML element, whereas standard classes are user-defined and visible in the source code (e.g., <div class="myClass">).

What Pseudo-Classes Do?

Regular CSS classes are used to categorize or group items. Developers create classes like “menu-items,” “buttons,” or “thumbnails” to organize elements according to the intended styling and provide a consistent look for comparable elements. These categories are based on traits that the developers have specified.

For instance, a developer may utilize a <div> as a thumbnail and assign the “thumbnail” class to it.

<div class="thumbnail">[...]</div>

The status, position, nature, and interaction of HTML components with the page and user determine their fundamental properties. Although HTML code usually does not mark certain characteristics, CSS pseudo-classes can be used to target them. Some examples are as follows:

• An element that comes last among its parent elements
• A link that has been clicked on
• Something that has taken up the entire screen

Generally speaking, pseudo-classes address these kinds of traits. The class .last can be used to detect the last components in different parent containers, which will help us better comprehend the distinction between classes and pseudo-classes.

<ul>
 <li>item 1</li>
 <li>item 2</li>
 <li>item 3</li>
 <li class="last">item 4</li>
</ul>
 
<select>
 <option>option 1</option>
 <option>option 2</option>
 <option>option 3</option>
 <option class="last">option 4</option>
</select>

The following CSS can be used to style these last-child elements:

li.last {
   text-transform: uppercase;
} 
option.last {
   font-style: italic;
}

But what happens if the final component is altered? It will be necessary for you to manually change the former last element’s .last class to the new one.

For several common traits, this inconvenience of changing classes can be avoided. Utilizing a preset :last-child pseudo-class, for instance, is very advantageous. This eliminates the requirement to mark the last HTML element and allows you to design it using the CSS that follows:

li:last-child {
   text-transform: uppercase;
}
 
option:last-child {
   font-style: italic;
}

Principal Pseudo-Class Types

Developers can target items based on particular attributes that might otherwise be challenging to reach by using the range of pseudo-classes that CSS exposes. A detailed list of common pseudo-classes is available on MDN.

1. Dynamic Pseudo-Classes

HTML components can have dynamic pseudo-classes assigned to them according to the state that user interactions cause them to change into. Examples include the frequently used <a> anchor tag and the following attributes: :hover, :focus, :link, and :visited.

a:visited {
   color: #8D20AE;
}
 
.button:hover,
.button:focus {
   font-weight: bold;
}

2. State-Based Pseudo-Classes

When an element is in a particular static state, state-based pseudo-classes are assigned to it. Examples that are frequently given are:

• :checked for checkboxes (<input type="checkbox">)
• :fullscreen to target any element that is presently in full-screen mode.
• For components like <input>, <select>, and <button> that can be disabled, use :disabled.

Because it shows if a checkbox is chosen, the :checked pseudo-class is especially well-liked.

.checkbox:checked + label {
   font-style: italic;
}
 
input:disabled {
   background-color: #EEEEEE;
}

3. Structural Pseudo-Classes

According on where they are in the document structure, structural pseudo-classes target particular elements. Examples like :first-child, :last-child, and :nth-child(n) are among the most often used. Using them, you may style particular child elements according to where they are in a container. Targeting the DOM’s highest-level parent element, :root, is another example.

4. Miscellaneous Pseudo-Classes

Pseudo-classes that don’t readily fit into other categories include:

• Elements that don’t match the given selector x are chosen using :not(x).
• To target items according to the language of their content, use :lang(language-code).
• The function :dir(directionality) chooses components whose content is in a particular directionality (e.g., right-to-left or left-to-right).

p:lang(ko) {
   background-color: #FFFF00;
}
 
:root {
   background-color: #FAEBD7;
}

nth-child vs nth-of-type Pseudo-Classes

Knowing the distinction between the :nth-child and :nth-of-type pseudo-classes is one of the trickiest parts of pseudo-classes.

Although they target different elements within a parent element (container), these two structural pseudo-classes operate differently.

Let’s say n is 2. Regardless of the kind of element, the :nth-child(n) selector focuses on an element that is the second child of its parent element. Conversely, :nth-of-type(n) focuses on the second instance of a particular element type (such as a paragraph) inside the parent element.

Let’s look at an example to show you this distinction:

p:nth-child(2) {
   color: #1E90FF; /* Light blue */
 }
 
 p:nth-of-type(2) {
   font-weight: bold;
 }

Pseudo-Classes vs Pseudo-Elements

The main distinction is that whereas pseudo-elements enable us to style elements that don’t normally exist in the DOM on their own, pseudo-classes are used to choose HTML elements that already exist in the document tree, even if they might not be explicitly indicated. Parts of pre-existing components like ::first-letter and ::placeholder, or ::before and ::after, are examples.

Additionally, the syntax differs: pseudo-classes use a single colon :, whereas pseudo-elements typically use two colons ::.

There are also distinctions between the ways that CSS can be used to target pseudo-classes and pseudo-elements.

1. Their Position in the Selector Sequence for CSS

While pseudo-classes can be placed anywhere in the CSS selector sequence, pseudo-elements must come after the selector sequence.

While pseudo-classes can be placed anywhere in the CSS selector sequence, pseudo-elements must come after the selector sequence.

For example, there are two ways to target the final list item in a <ul> element:

<ul>
  <li class="red"></li>
  <li></li>
  <li class="red"></li>
  <li class="red"></li>
</ul> 
ul > :last-child.red {
  color: #B0171F;
}

OR

ul > .red:last-child {
  color: #B0171F;
}

While the second selector targets the final child among the elements that have the.red class inside <ul>, the first selector targets the final child inside the <ul> element that has the class.red. As you can see, the pseudo-class’s position might change.

2. A selector sequence’s number of occurrences

While pseudo-classes can be concatenated as long as it makes sense, each selector can only utilize one pseudo-element. For instance, you may combine the pseudo-classes :first-child and :read-only in the following way to target first-child components that are also read-only:

:first-child:read-only {
  color: #EEEEEE;
}

Extensions for the jQuery Selector

Selector syntax with a : is not always a valid CSS pseudo-class. You may recognize selectors like $(':checkbox'), $(':input'), and $(':selected') if you have used jQuery.

It’s crucial to remember that jQuery is not targeting these CSS pseudo-classes. They are referred to as jQuery selector extensions instead.

You can use simpler keywords to target HTML components with jQuery selector extensions. Many of these extensions are just keyword-based shorthands for combinations of common CSS selectors.

$( ":input" ).css("font-family","courier new");

Conclusion

CSS pseudo-classes are essential tools that enhance the flexibility and interactivity of web design without adding extra HTML or JavaScript. By targeting elements based on their state or position, developers can create dynamic, responsive designs with ease. Mastering pseudo-classes improves user experience and streamlines development workflows. As you continue to explore and apply these techniques, your web projects will become more efficient, visually appealing, and adaptable to various user interactions.

InCreativeWeb can help you leverage the full potential of CSS pseudo-classes to enhance your website’s interactivity and design. Our experts apply these techniques to create dynamic, responsive, and user-friendly web elements. Get in touch with our team today to transform your design!