CSS Selector Reference

CSS selectors are used to "find" (or select) the HTML elements you want to style.

CSS Selector Tester to demonstrate the different selectors.

The simple selectors select elements based on element-name, id, and class. In addition, there is the universal selector (*).

# id #firstname Selects the element with id="firstname" * * Selects all elements. class.intro p.intro Selects all elements with class="intro"

The attribute selector selects HTML elements with a given attribute set.

[ attribute ] [lang]

[ attribute = value ] [lang="it"] Selects all elements with lang="it" [ attribute ~= value ] [title~="flower"] Selects all elements with a title attribute containing the word "flower" [ attribute |= value ] [lang|="en"] Selects all elements with a lang attribute value equal to "en" or starting with "en-" [ attribute ^= value ] [href^="https"] Selects all elements with a href attribute value that begins with "https" [ attribute $= value ] [href$=".pdf"] Selects all elements with a href attribute value ends with ".pdf" [ attribute *= value ] [href*="w3schools"] Selects all elements with a href attribute value containing the substring "w3schools"

& & Applies styles for an element within the context of another element