Quick reference to the selectors in CSS, versions 1-3
| Selector | Example | Selects what |
|---|---|---|
| element | p | All <p> elements |
| element,element | div, p | All <div> elements and all <p> elements |
| element element | div p | All <p> elements inside <div> elements |
| #id | #foo | Element with id="foo" |
| .class | .bar | All elements with class="bar" |
| :active | a:active | Active link |
| :hover | a:hover | Mouse over |
| :link | a:link | Not visited links |
| :visited | a:visited | Visited links |
| ::first-letter | p::first-letter | First letter of every <p> element |
| ::first-line | p::first-line | First line of every <p> element |
| Selector | Example | Selects what |
|---|---|---|
| * | * | All elements |
| [attribute] | [target] | All elements with a target attribute |
| [attribute=value] | [target=_blank]
input[type="text"] |
All elements with target="_blank"
All <input> elements of type "text" |
| [attribute~=value] | [title~=foo] | All elements with a title attribute containing "foo" |
| [attribute|=value] | [lang|=en] | All elements with a lang attribute value starting with "en" |
| element>element | div > p | All <p> elements where the parent is a <div> element |
| element+element | div + p | All <p> elements that are placed immediately after <div> elements |
| :first-child | p:first-child | All <p> elements that are the first child of its parent |
| :focus | input:focus | The input element with focus |
| :lang(language) | p:lang(en) | All <p> elements with the lang attribute "en" |
| ::after | p::after | After the content of each <p> element |
| ::before | p::before | Before the content of each <p> element |
| Selector | Example | Selects what |
|---|---|---|
| [attribute^=value] | a[href^="https"] | <a> element whose href value begins with "https" |
| [attribute$=value] | a[href$=".pdf"] | <a> element whose href value ends with ".pdf" |
| [attribute*=value] | a[href*="foo"] | <a> element whose href value contains "foo" |
| element1~element2 | p ~ ul | <ul> element preceded by a <p> element |
| :checked | input:checked | Checked <input> element |
| :disabled | input:disabled | Disabled <input> element |
| :empty | p:empty | <p> element that has no children |
| :enabled | input:enabled | Enabled <input> element |
| :first-of-type | p:first-of-type | The first <p> element of its parent |
| :in-range | input:in-range | Input elements with a value within a range |
| :invalid | input:invalid | Input elements with an invalid value |
| :last-child | p:last-child | The last child of its parent |
| :last-of-type | p:last-of-type | The last <p> element of its parent |
| :not(selector) | :not(p) | Element that is not a <p> element |
| :nth-child(n) | p:nth-child(2) | The second child of its parent |
| :nth-last-child(n) | p:nth-last-child(2) | The second child of its parent, counting backwards |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | The second <p> element of its parent, counting backwards |
| :nth-of-type(n) | p:nth-of-type(2) | The second <p> element of its parent |
| :only-of-type | p:only-of-type | The only <p> element of its parent |
| :only-child | p:only-child | The only child of its parent |
| :optional | input:optional | Input elements with no "required" attribute |
| :out-of-range | input:out-of-range | Input elements with a value outside a range |
| :read-only | input:read-only | Input elements with "readonly" attribute |
| :read-write | input:read-write | Input elements with no "readonly" attribute |
| :required | input:required | Input elements with "required" attribute |
| :root | :root | The document's root element |
| :target | #foo:target | The active #foo element (relative to a clicked link) |
| :valid | input:valid | Input elements with a valid value |
| Selector | Example | Selects what |
|---|---|---|
| ::selection | ::selection | User selection. |