Everything about CSS Pseudo classes & elements, and their use cases

In CSS Pseduo classes & elements is a keyword added to a selector that allows you to style and element based on it’s state or specific part of element.

For Example: You hover-over on anchor element, or add different styles to see if link is visited or not, or you can use to target the first-letter of word in an article. And lot more can be achieved using these keywords.

They are widely supported across major browsers and has been part of the CSS since its early versions.

What is a Pseudo Class?

A pseudo-class is like creating a rule that applies to an element based on certain condition or state.

Pseudo Classes are used when an element’s state changes because of how the user interacts with it. For Example:

• When someone hovers over a button (:hover)
• When a form field is selected for typing (:focus)
• When an element is the first or last child in a list

let’s understand with an example:

a:hover {
  color: blue; 
}

a:visited {
  color: navyblue;
}

This example shows two different states of anchor element. When a user hover-over an anchor element, the text color changes to blue, but shows different default color if user has already visited by clicking on that anchor element.

Pseduo-Classes can be represented by a single colon : at the beginning of keyword name. Here is a list of some common Pseudo-Classes:

• hover – When user hover-over (place mouse over an element)
• :focus – When a user select a field (like a text box in a form)
• :nth-child(n) – When you want to style a specific item in a list or grid.
• :disabled – When an element (like a button) is disabled and can’t be clicked.

What is Pseudo-Elements?

Pseudo-Elements are different from pseudo-classes because they target specific parts of an elements not the whole thing. It let you style or insert things into specific parts of an element that you wouldn’t normally have direct access to.

Example of Pseudo-Elements:

p::first-letter {      /* Accessing the first-letter of paragraph and adding style. */
  font-size: 2em; 
  font-weight: bold; 
  color: red;
}

This example show how to access a first-letter of paragraph and apply our styles using CSS.

You may have noticed one thing, which is the use of double :: colon sign used for pseudo-elements, whereas, : colon sign is used for pseudo-classes. This is the actual representation of syntax for both.

Why Pseudo-Classes & Pseudo-Elements?

These tools let us do some pretty cool things in CSS without needing to write a bunch of extra HTML or JavaScript. They give more control over your design and make your website more interactive and dynamic with just a few lines of CSS.

Here is how you can differentiate between both of them, and help you choose right tool:

• Pseudo-Classes help create interactions like hover effects, focused input fields, or styling based on a list position.
• Pseudo-Elements allows to style specific parts of an element or add decorative content like, icons, symbols before or after an element.

Browser Support

Pseudo-Elements & Pseudo-Classes are are supported in all major browsers, but as the web grows new keywords added which does not provide default support for them. Thus, we need to use browser-prefixes to fix these issues.

For Example, newer pseudo classes like :not() are not supported in older browser, so it behaves differently. You should always check which which property is supported at what version of browser using an online tool Caniuse.com

Conclusion

In CSS pseudo-classes & pseudo-elements acts as your secret weapons for designing websites that feels alive and beautiful without adding ton of extra code. They help you style elements based on interaction or state(pseudo-classess) or target specific parts of an element (pseudo-elements).

This blog is originally posted at Programmingly.dev website. Read full article by following this link