DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for CSS pseudo-classes with examples
Raksha for Canopas Software

Posted on

CSS pseudo-classes with examples

Do you know how to apply CSS based on some conditions?

Did you know HTML elements can adopt CSS based on conditions?

The answer is YES. Using CSS pseudo-classes.

CSS pseudo-class functions free us from the nested CSS rules. As a result, styles are precise and easy to understand.

It takes a selector list as an argument and selects any element that can be selected by one of the selectors in that list.

Imagine you want to apply styles based on a few conditions. But you don’t want to integrate javascript or jquery into your webpage. That's where you can use CSS pseudo-classes.

In this post, you will learn 6 CSS classes.

  1. :where()
  2. :has()
  3. :is()
  4. :not()
  5. :dir()
  6. :lang()

It’s always possible to design pages without advanced selectors. But if you want to make styles pretty and precise, it might be proved a savior!

For a detailed implementation guide, check out canopas blog.

Top comments (0)

πŸ‘‹ Hey, my name is Noah and I’m the one who set up this ad. My job is to get you to join DEV, so if you fancy doing me a favor, I’d love for you to create an account.

If you found DEV from searching around, here are a couple of our most popular articles on DEV: