Deep Dive into CSS Selectors: Types, Usage, and Priority

This article provides a comprehensive analysis of CSS selectors, covering their classification, detailed usage of various selector types, and the calculation of selector priority with practical examples.

Overview of CSS Selectors

CSS selectors enable one-to-one, one-to-many, or many-to-one control over HTML elements to apply styles. When multiple styles target the same element, selector priority determines which styles take effect.

Classification of CSS Selectors

CSS selectors are categorized into basic selectors (universal, type, class, ID, attribute) and advanced selectors including attribute selectors, pseudo-classes, pseudo-elements, and combinators.

Attribute Selectors

Attribute selectors match elements based on attribute names or values using patterns like [attr], [attr=value], [attr~=value], [attr^=value], [attr$=value], [attr*=value], and [attr|=value]. Case-insensitive matching is possible with the 'i' flag.

Pseudo-Class Selectors

Pseudo-classes target elements based on their state or position. Dynamic pseudo-classes (:link, :visited, :hover, :active) are commonly used for links. Other pseudo-classes include :target, :not(), :lang(), structural pseudo-classes (:first-child, :nth-child, :only-child, etc.), and UI element pseudo-classes (:enabled, :disabled, :checked, :default, :read-only, :read-write).

Pseudo-Element Selectors

Pseudo-elements style specific parts of elements: ::after, ::before add content, ::first-letter and ::first-line target text portions, ::marker styles list markers, and ::selection styles highlighted text. Note that only one pseudo-element can be used per selector, and CSS3 requires double colons (::) to distinguish pseudo-elements from pseudo-classes.

Combinator Selectors

Combinators combine selectors: descendant (space), child (>), adjacent sibling (+), general sibling (~), and group (,). Each serves different hierarchical matching purposes.

CSS Selector Priority Calculation

Selector priority follows the order: !important > inline > ID > class/attribute/pseudo-class > type/pseudo-element > universal > inherited. Priority is calculated using a four-value system: inline (1000), ID (100), class/attribute/pseudo-class (10), type/pseudo-element (1), universal (0), and inherited (-1).

Priority Examples

The article demonstrates priority calculations through various examples, showing how conflicting styles are resolved. When weights are equal, the last-declared style wins. The !important declaration overrides all other considerations. However, certain CSS properties like max-width and width are mutually exclusive regardless of selector weight.

Conclusion

CSS selectors contain nuanced behaviors that developers should understand. Currently, there's no selector to target parent elements or their relatives, which remains a limitation in CSS.

References

The article cites resources including MDN documentation, compatibility notes for iOS active pseudo-class issues, and priority calculation guides.