Mastering Advanced CSS Selectors: From Combinators to Pseudo‑Classes

After years of using CSS, the author revisits selectors to uncover lesser‑known and upcoming features, providing a deep dive into each selector type with clear examples and live CodePen demos.

Combinator selectors

Traditional combinators such as descendant ( A B), child ( A > B), adjacent sibling ( A + B), and general sibling ( A ~ B) are explained, highlighting the difference between + (only the immediate sibling) and ~ (any following sibling). An example demonstrates how A + B highlights the city "New York" while A ~ B highlights all subsequent cities.

Attribute selectors

Attribute selectors match elements based on attribute presence or value. Examples include selecting all checkboxes ( [type="checkbox"]) and styling the associated label, or targeting a specific checkbox by name ( [name="chk2"]). The guide also shows how to test for attribute existence ( button[icon]) and how to match values with prefixes ( A[attr^=val]), exact matches or hyphen‑separated values ( A[attr|=val]), suffixes ( A[attr$=val]), substrings ( A[attr*=val]), and space‑separated word lists ( A[attr~=val]). A practical snippet highlights images missing alt attributes for accessibility and SEO:

img:not([alt]) {
  border: 2px red dashed;
}

User‑interface pseudo‑classes

Common UI pseudo‑classes such as :enabled, :disabled, and :checked are demonstrated with a to‑do list example. Additional selectors like :default, :valid, :invalid, :required, :optional, :in‑range, :out‑of‑range, :read‑only, :read‑write, and :placeholder‑shown are described, including browser support notes (most modern browsers except IE/Edge for case‑insensitive matching).

Structural selectors

Structural selectors target elements based on their position in the DOM. The :nth‑child() family can accept numbers, formulas (e.g., 4n, 2n+1), and keywords ( odd, even). Examples show selecting the third list item, every second item, and patterns like 4n. The guide also covers :nth‑last‑child(), :nth‑of‑type(), and :nth‑last‑of‑type() for type‑specific matching, as well as :first‑child, :last‑child, :only‑child, and their ‑of‑type variants.

Content selectors

Content selectors such as ::first‑line, ::first‑letter, and ::selection are introduced, with a warning that they only work on block‑level elements. Emerging selectors ( ::inactive‑selection, ::spelling‑error, ::grammar‑error, ::marker, ::placeholder) are listed for future use.

Miscellaneous and experimental selectors

Selectors that do not fit other categories are covered, including :target (matches an element whose id matches the URL fragment), :matches() (simplifies long selector lists), and the upcoming :any‑link (matches both :link and :visited). The guide also shows how to combine selectors for complex matching and provides a caution about unexpected specificity.

Language and direction selectors

Selectors that depend on element attributes are explained: :dir() matches text direction (currently Firefox‑only) and :lang() matches language codes. Examples illustrate styling <div lang="en">, <div lang="el">, and <div lang="is"> with different colors.

Resources

MDN Web Docs – comprehensive reference for CSS selectors.

W3C CSS Specifications – official standards.

Can I Use – browser compatibility tables.

Conclusion

The article encourages developers to experiment with advanced selectors, noting that many powerful effects and animations can now be achieved with pure CSS, without JavaScript.