DEV Community

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

Posted on

2

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.

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay