DEV Community

Eris Sulistina
Eris Sulistina

Posted on

Logical Pseudo-Classes in CSS

#webdev #css

Logical pseudo-classes are a type of CSS pseudo-class that allow you to select elements based on logical conditions, filtering elements based on structure or relationships within the DOM.

List of Logical Pseudo-Classes

Pseudo-Class Description Example Usage
:not(selector) Selects elements that do not match a given selector button:not(.primary)
:is(selector, …) Simplifies multiple selectors that share the same rule :is(h1, h2, h3)
:where(selector, …) Same as :is(), but always has zero specificity :where(article, section)
:has(selector) Selects elements that contain a child/descendant matching the selector div:has(img)
:nth-child(n) Selects elements based on their order among siblings li:nth-child(2)
:nth-of-type(n) Like :nth-child but only counts elements of the same type p:nth-of-type(2)
:nth-last-child(n) Like :nth-child but counts from the end tr:nth-last-child(1)
:nth-last-of-type(n) Combines :nth-last-child and :nth-of-type div:nth-last-of-type(1)
:first-child Selects the first child of a parent p:first-child
:last-child Selects the last child of a parent li:last-child
:only-child Selects elements that are the only child span:only-child
:only-of-type Selects elements that are the only one of their type within a parent h2:only-of-type
:empty Selects elements that are completely empty (no text or whitespace) div:empty

Big 4

Among all logical pseudo-classes, I highly recommend mastering these four, as they are modern CSS selectors for writing more flexible and efficient rules:

  1. :not
  2. :is
  3. :where
  4. :has

❗ :not() — Exclude Elements

:not is used to target all elements that do not match a given selector.

/* Targets all <a> elements without the .btn class */ a:not(.btn) { .... } /* Targets all <textarea> elements without a rows attribute */ textarea:not([rows]) { resize: none; field-sizing: content; }
Enter fullscreen mode Exit fullscreen mode

🧩 :is() — Combine Multiple Selectors

:is is used to target elements that match any of the selectors inside it.

/* Targets h1, h2, and h3 elements */ :is(h1, h2, h3) { .... } /* Targets both: 1. article > p 2. article > span */ article > :is(p, span) { .... }
Enter fullscreen mode Exit fullscreen mode

💡 :where() — Like :is(), But Zero Specificity 

/* Targets h1, h2, and h3 without specificity */ :where(h1, h2, h3) { .... } /* Targets both without specificity for p and span: 1. article > p 2. article > span */ article > :where(p, span) { .... }
Enter fullscreen mode Exit fullscreen mode

🔎 :has() — Target Elements That CONTAIN Other Elements

:has is used to select elements based on whether they have specific children or descendants.

/* Targets buttons that contain an svg */ button:has(svg) { .... } /* Targets article elements with a direct child <img> */ article:has(> img) { .... } /* Targets <label> with a required input as next sibling */ label:has(+ [required])::after { content: "*" }
Enter fullscreen mode Exit fullscreen mode

✨ Closing

I hope this post helps level up your CSS skills as a frontend developer.

If you enjoyed this article, don’t forget to 💖 save, 🗨️ comment, and 🔁 share it with fellow developers!

See you in the next post 👋

Top comments (0)