CSS Selector Reference
CSS selectors are used to "find" (or select) the HTML elements you want to style.
CSS Simple Selectors
The simple selectors select elements based on element-name, id, and class. In addition, there is the universal selector (*).
| Selector | Example | Example description |
|---|---|---|
| element | p | Selects all <p> elements |
| #id | #firstname | Selects the element with id="firstname" |
| * | * | Selects all elements |
| .class | .intro p.intro |
Selects all elements with class="intro" Selects all <p> elements with class="intro" |
CSS Attribute Selectors
The attribute selector selects HTML elements with a given attribute set.
| Selector | Example | Example description |
|---|---|---|
| [attribute] | [lang] | Selects all elements with a lang attribute |
| [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" |
CSS Nesting Selector
| Selector | Example | Example description |
|---|---|---|
| & | & | Applies styles for an element within the context of another element |
CSS Combinators Reference
A combinator is a sign that explains the relationship between selectors.
| Name | Sign | Example | Example Result |
|---|---|---|---|
| Child combinator | > | div > p | Selects every <p> element that are direct children of a <div> element |
| Descendant combinator | (single space) | div p | Selects all <p> elements inside <div> elements |
| Namespace separator | | | ns | h2 | Selects all <h2> elements in namespace ns |
| Next-sibling combinator | + | div + p | Selects the first <p> element that is placed immediately after <div> elements |
| Selector list | , | div, p | Selects all <div> elements and all <p> elements |
| Subsequent-sibling combinator | ~ | p ~ ul | Selects all <ul> elements that are preceded by a <p> element |
CSS Pseudo-classes Reference
A CSS pseudo-class is a keyword that can be added to a selector, to define a style for a special state of an element.
Some common use for pseudo-classes:
- Style an element when a user moves the mouse over it
- Style visited and unvisited links differently
- Style an element when it gets focus
- Style valid/invalid/required/optional form elements
- Style an element that is the first child of its parent
Syntax
Pseudo-classes are always denoted by a single colon (:) followed by the pseudo-class name:
selector:pseudo-class-name
{
CSS properties
}
CSS properties
}
The table below lists all the pseudo-class keywords in CSS:
| Pseudo-class | Examples | Example description |
|---|---|---|
| :active | a:active | Selects the active link |
| :any-link | a:anylink area:anylink |
Selects any <a> or <area> element with an href attribute |
| :auto-fill | input:autofill | Selects any <input> element with its value autofilled by the browser |
| :checked | input:checked option:checked |
Matches any <input> or <option> element that is checked |
| :default | input:default button:default option:default |
Selects form elements that are default in a group of related elements |
| :defined | :defined | Selects any element that has been defined (standard or custom elements) |
| :dir() | :dir(ltr) :dir(rtl) |
Selects any element with the specified text direction |
| :disabled | :disabled input:disabled option:disabled |
Selects any element that is disabled. Most used for form elements |
| :empty | div:empty | Selects any element that has no children (including text nodes) |
| :enabled | :enabled input:enabled |
Selects any element that is enabled. Most used for form elements |
| :first | @page :first | Represents the first page of a printed document (used with the @page rule) |
| :first-child | p:first-child li:first-child |
Selects the element that is the first child of its parent (among a group of sibling elements) |
| :first-of-type | p:first-of-type li:first-of-type |
Selects the first element of its type among a group of sibling elements |
| :focus | input:focus select:focus |
Selects the element that gets focus. Most used for form elements |
| :focus-visible | button:focus-visible | Selects the element that gets focus (used to apply focus styles only when the keyboard is used to focus something, not the mouse) |
| :focus-within | form:focus-within label:focus-within |
Matches an element if the element or any of its descendants gets focus |
| :fullscreen | :fullscreen | Selects any element that is currently in full-screen mode |
| :has() | h2:has(+p) | Selects h2 elements that are immediately followed by a p element, and applies the style to h2 |
| :hover | a:hover p:hover |
Selects element on mouse over |
| :in-range | input:in-range | Select any <input> element with a value within the specified range limit |
| :indeterminate | input:indeterminate | Selects any form element that is in an indeterminate state |
| :invalid | input:invalid fieldset:invalid |
Selects invalid form elements |
| :is() | :is(ul, ol) | Selects all <ul> and <ol>elements |
| :lang() | p:lang(it) | Selects any <p> element with a lang attribute equal to "it" (Italian) |
| :last-child | li:last-child | Selects any <li> element that is the last child of its parent |
| :last-of-type | p:last-of-type | Selects any <p> element that is the last <p> element of its parent |
| :left | @page :left | Represents all left-hand pages of a printed document (used with the @page rule) |
| :link | a:link | Selects any unvisited link |
| :modal | :modal | Selects the element that is in a modal state |
| :not() | :not(p) | Selects any element that is not a <p> element |
| :nth-child() | p:nth-child(2) | Selects any <p> element that is the second child of its parent |
| :nth-last-child() | p:nth-last-child(2) | Selects any <p> element that is the second child of its parent, counting from the end |
| :nth-last-of-type() | p:nth-last-of-type(2) | Selects any <p> element that is the second <p> element of its parent, counting from the end |
| :nth-of-type() | p:nth-of-type(2) | Selects any <p> element that is the second <p> element of its parent |
| :only-child | p:only-child | Selects any <p> element that is the only child of its parent |
| :only-of-type | p:only-of-type | Selects any <p> element that is the only <p> element of its parent |
| :optional | input:optional select:optional textarea:optional |
Selects any <input>, <select>, or <textarea> elements without a "required" attribute |
| :out-of-range | input:out-of-range | Selects any <input> element with a value outside the specified range limit |
| :placeholder-shown | input:placeholder-shown textarea:placeholder-shown |
Selects any <input> or <textarea> element that is currently displaying placeholder text |
| :popover-open | :popover-open | Selects any element that is in a showing popover state |
| :read-only | input:read-only | Selects input elements with the "readonly" attribute specified |
| :read-write | input:read-write | Selects editable input elements |
| :required | input:required | Selects input elements with the "required" attribute specified |
| :right | @page :right | Represents all right-hand pages of a printed document (used with the @page rule) |
| :root | :root | Selects the document's root element |
| :scope | :scope | Selects elements that are a reference point, or scope, for selectors to match against |
| :state() | :state() | Selects custom elements that have the specified custom state |
| :target | :target | Selects the current active target element |
| :user-invalid | :user-invalid | Selects any form element with an invalid value (after the user have interacted with it) |
| :user-valid | :user-valid | Selects any form element with a valid value (after the user have interacted with it) |
| :valid | input:valid | Selects all input elements with a valid value |
| :visited | a:visited area:visited |
Selects all visited links |
| :where() | :where(ol, ul) | Selects all <ul> and <ol>elements |
CSS Pseudo-elements Reference
A CSS pseudo-element is used to style specific parts of an element.
For example, it can be used to:
- Style the first letter or line, of an element
- Insert content before or after an element
- Style the markers of list items
- Style the viewbox behind a dialog box
The table below shows the different pseudo-elements in CSS:
| Pseudo-element | Example | Example description |
|---|---|---|
| ::after | p::after div::after |
Inserts something after the content of the specified element |
| ::backdrop | dialog::backdrop | Styles the viewbox behind a dialog box or popover element |
| ::before | p::before div::before |
Inserts something before the content of the specified element |
| ::file-selector-button | ::file-selector-button | Selects any button of type <input type="file"> |
| ::first-letter | p::first-letter | Selects the first letter of every <p> element |
| ::first-line | p::first-line | Selects the first line of every <p> element |
| ::grammar-error | ::grammar-error | Styles a text that the browser has flagged as grammatically incorrect |
| ::highlight() | ::highlight(custom-name) | Selects a custom highlight |
| ::marker | ::marker | Selects the markers of list items |
| ::placeholder | input::placeholder textarea::placeholder |
Styles the placeholder text of <input> or <textarea> elements |
| ::selection | ::selection | Styles the user-selected text |
| ::spelling-error | ::spelling-error | Styles a text that the browser has flagged as incorrectly spelled |
| ::view-transition | ::view-transition | Represents the root of the view transitions overlay, which contains all view transition on the page |
| ::view-transition-group | ::view-transition-group | Represents a single view transition snapshot group |
| ::view-transition-image-pair | ::view-transition-image-pair | Represents a container for a view transition's "old" and "new" view states - before and after the transition |
| ::view-transition-new | ::view-transition-new | Represents the "new" view state of a view transition |
| ::view-transition-old | ::view-transition-old | Represents the "old" view state of a view transition |
End Notes
All of this information is copied directly from and links back to W3Schools. They used to have all of this information on one page, but a couple years ago they divided it into subsections. I wanted it all in one place... so here it is!