CSS Selectors Guide

Universal Selector (*)

Selects all elements on the page. Used for global styles.

Specificity: 0-0-0

The universal selector is often used for CSS resets and applying base styles. It has the lowest specificity and will be overridden by any other selector. Use with caution as it can impact performance when overused.

* { margin: 0; padding: 0; }

Type Selector

Selects all elements of specified type.

Specificity: 0-0-1

Element selectors target HTML elements directly by their tag name. They have low specificity but are useful for setting default styles for particular elements across your website.

p { color: blue; }

Class Selector (.)

Selects elements with specific class.

Specificity: 0-1-0

Class selectors are reusable and can be applied to multiple elements. They're the most flexible way to style elements and are fundamental to maintaining clean, modular CSS. Multiple classes can be applied to a single element.

.special { color: green; }

ID Selector (#)

Selects element with specific ID. Should be unique.

Specificity: 1-0-0

ID selectors have the highest specificity among simple selectors. They should be used sparingly as they can make styles difficult to override and maintain. Best reserved for unique elements that appear once on a page.

#header { background: black; }

Pseudo-Class Selector (:)

Hover over me!

Specificity: 0-1-0

Pseudo-classes target special states of elements like :hover, :focus, :first-child, etc. They're crucial for creating interactive and dynamic interfaces without JavaScript.

a:hover { color: red; }

Pseudo-Element Selector (::)

Notice the first letter styling.

Specificity: 0-0-1

Pseudo-elements create artificial elements in the document tree, allowing you to style specific parts of an element like ::first-letter, ::before, ::after. They're powerful for adding decorative content.

p::first-letter { font-size: 2em; }

Combinators

CSS combinators define relationships between selectors:

Descendant (space): Matches nested elements at any depth

Parent
Child Descendant

div span { color: blue; }
Child (>): Matches direct children only

Parent
Direct Child

Child
Not Selected

div > div { border-color: red; }
Adjacent Sibling (+): Matches the next sibling

First

Adjacent to First

Not Selected
div + div { background-color: #ffeb3b; }
General Sibling (~): Matches all following siblings

First

Selected Sibling

Also Selected
div ~ div { background-color: #ffeb3b; }

Specificity: Varies based on selectors used

Combinators are powerful tools for creating specific styling rules based on element relationships:

Descendant combinators (space) are the most flexible but can affect performance if too broad
Child combinators (>) provide better performance and more precise targeting
Sibling combinators (+, ~) are useful for styling sequential elements without adding classes

Best Practices:

Use child combinators over descendant when possible for better performance
Avoid deeply nested descendant selectors
Consider using classes for complex selections instead of multiple combinators

Attribute Selector

Specificity: 0-1-0

Attribute selectors target elements based on their attributes or attribute values. They support pattern matching using:

[attr] — Elements with the attribute
[attr="value"] — Attribute equals specific value
[attr^="value"] — Attribute starts with value
[attr$="value"] — Attribute ends with value
[attr*="value"] — Attribute contains value

input[type="text"] { padding: 5px; }

Compound Selector

Combined multiple classes

Specificity: Cumulative

Compound selectors combine multiple simple selectors without a combinator. They're useful for targeting specific elements that meet multiple criteria. The specificity is the sum of all included selectors.

p.special.highlighted { background: yellow; }

CSS Nesting

Nested element styling

Modern CSS supports nesting, similar to preprocessors like Sass. This helps maintain cleaner, more organized stylesheets by grouping related styles together.

.nested-parent { .nested-child { color: purple; } }