Simple selectors
| Selector | Syntax | Example |
| Element | element | div { |
| Class | .class | .alpha { } |
| ID | #id | #alpha { } |
| Universal | * | * { } |
Variations of simple selectors
| Elements | Syntax | Example | Description |
| Two classes | .first-class.second-class | .alpha.beta { } | All elements with classes alpha and beta |
| Element and class | element. class | p.alpha { } | All alpha class elements inside <p> |
| Two elements | element, element | p, div { } | All <p> and <div> elements |
| Two elements | element element | p div { } | All <div> elements inside <p> |
Descendant selectors/combinators
| Selector | Syntax | Example | Description |
| Descendant | element element | div p { } | All <p> descendants of <div> |
| Child | element>element | div > p { } | All <p> direct descendants of <div> |
| Adjacent Sibling | element+element | div + p { } | <p> element directly after <div> |
| General Sibling | element~element | div ~ p { } | All <p> element iterations after <div> |
Attribute selectors
| Selector | Syntax | Example |
| [attribute] | [href] { | Selects all elements with a href attribute |
| [attribute=value] | [lang="fr"] { | Selects all elements with lang attribute that have a value of "fr" |
| [attribute~=value] | [input~=hello] { | Elements with input attribute containing the whitespace-separated substring "hello" |
| [attribute | \=value] | **[lang |
| [attribute^=value] | a[href^="https"] { | Every <a> element with href attribute value begins with "https" |
| [attribute$=value] | a[href$=".docx"] { | Every <a> element with href attribute value ends with ".docx" |
| [attribute*=value] | a[href*="meta"] { | Every <a> element with href attribute value has substring "meta" |
| Pseudo-class | Example | Description of selection |
| : active | a: active { } | All active links |
| :checked | input: checked { } | All the checked <input> elements |
| : default | input: default { } | All default <input> elements |
| :disabled | input: disabled { } | All disabled <input> elements |
| : empty | div: empty { } | All the <div> elements with no children |
| : enabled | input: enabled { } | All the enabled <input> elements |
| :first-child | p:first-child { } | All the <p> elements who are the first child of a parent element |
| :first-of-type | p:first-of-type { } | All the <p> elements who are the first <p> element of a parent element |
| : focus | input: focus { } | Input element under focus |
| : fullscreen | : fullscreen { } | The element in full-screen mode |
| : hover | p: hover { } | Action effect on mouse hover |
| :invalid | input: invalid { } | Input elements with an invalid value |
| :last-child | p:last-child { } | All the <p> elements who are the last child of a parent element |
| :last-of-type | p:last-of-type { } | All the <p> elements who are the last <p> element of a parent element |
| : link | a: link { } | All unvisited links |
| :not(selector) | :not(div) { } | All the elements that are not a <div> element |
| :nth-child(n) | div:nth-child(3) { } | All the <p> elements that are the third child of a parent element |
| :nth-last-child(n) | div:nth-last-child(3) { } | All the <div> elements which are the third child of a parent element, counting from the last child element |
| :nth-last-of-type(n) | p:nth-last-of-type(2) { } | The second sibling from the last child of a parent element. |
| :nth-of-type(n) | p:nth-of-type(2) { } | The second sibling of a parent element. |
| :only-of-type | p:only-of-type { } | All the <p> elements which are only <p> elements inside its parent |
| :only-child | p:only-child { } | All the <p> elements which are the only child of a parent element |
| : optional | input: optional { } | The input elements with no "required" attribute |
| : required | input: required { } | Selects input elements with the "required" attribute specified |
| : root | : root { } | The Root element of the document |
| ::selection | ::selection { } | The portion of an element that is selected by a user |
| : valid | input: valid { } | All the input elements with a valid value |
| : visited | a: visited { } | Select all visited links |
Pseudo-element selectors
| Syntax | Example | Description |
| ::after | p::after { } | Inserts content after content of <p> element |
| ::before | p::before { } | Inserts content before content of <p> element |
| ::first-letter | p::first-letter { } | Select the first letter of every <p> element |
| ::first-line | p::first-line { } | Select the first line of every <p> element |
| ::placeholder | input::placeholder { } | Select input elements with the "placeholder" attribute specified |
| ::marker | ::marker { } | Selects markers in a list |