Pseudo-Selectors | CSS-Tricks

This is a work in progress — and we could use your help! Learn about writing for CSS-Tricks and how to contribute to the CSS Almanac.

`:active`

The :active pseudo selector changes the appearance of a link while it is being activated (being clicked on or otherwise […]

a:active { color: #f8a100; }

`:any-link`

The :any-link pseudo-class in CSS provides a method for selecting elements that are the source anchor of a hyperlink. If […]

.element:any-link { color: red; }

`:autofill`

The :auto-fill pseudo-class in CSS allows us to style <input> elements that contain content auto-filled by the browser. Take a […]

input:auto-fill { outline: 5px solid rgb(0 0 0 / .5); }

`::backdrop`

The ::backdrop CSS pseudo-element creates a backdrop that covers the entire viewport and is rendered immediately below a <dialog>, an […]

.element::fullscreen { background: #f8a100; }

`::before / ::after`

The ::before and ::after pseudo-elements in CSS allows you to insert content onto a page without it needing to be […]

.element::before { content: "Yo!"; }

`:blank`

The :blank pseudo-class builds upon the :empty pseudo-class. Like :empty, :blank will select elements that contain nothing at all, or […]

p:blank { display: none; }

`::checkmark`

The ::checkmark pseudo-element gives us an indication on whether an element is selected or not, which we can style later on.

option::checkmark { /* ... */ }

`:checked`

The :checked pseudo-class in CSS selects elements when they are in the selected state. It is only associated with input […]

input[type=checkbox]:checked { }

`:current`

:current is a CSS pseudo-selector that matches an element or an ancestor of an element that’s currently in display. So, […]

:current { color: #fd5a1e; }

`::details-content`

The CSS ::details-content pseudo-element provides a way to select and apply styles to the inner parts of a <details> element […]

details::details-content { font-size: 1.5rem; }

`:default`

The :default pseudo selector will match the default in a group of associated elements, such as the radio button in […]

input[type="radio"]:default { }

`:defined`

The :defined pseudo-class selector is part of CSS Selectors Level 4 specification allowing you to target custom elements created with […]

element:defined { visibility: visible; }

`:dir()`

The :dir() pseudo-class in CSS allows elements to be selected based on the direction of the language, as determined in […]

.element:dir(rtl) { }

`:disabled`

The :disabled pseudo-class selector provides conditional styling to HTML elements that can receive user input, when the elements have the […]

input:disabled { }

`:empty`

The CSS :empty pseudo-class selects any element that does not contain children for a given selector. If we were to […]

.element:empty { background: red; }

`:enabled`

The :enabled pseudo-class in CSS selects focusable elements that are not disabled, and therefore enabled. It is only associated with […]

input:enabled + label { color: #333; }

`::file-selector-button`

The ::file-selector-button in CSS is a pseudo-element that selects <input type="file"> in HTML. You’ve undoubtedly come across file upload inputs […]

::file-selector-button { background-color: #f8a100; }

`::first-letter`

::first-letter is a pseudo element which allows you to style the first letter in an element, without needing to stick […]

p::first-letter { }

`::first-line`

The ::first-line pseudo-element is for applying styles to the first line of an element. Imagine a paragraph that is several […]

.element::first-line { font-size: 1.3rem; }

`:first`

The :first CSS pseudo-class is used with the @page at-rule to select the first page in a printed document. It’s […]

@page :first { margin: 50%; }

`:first-child`

The :first-child selector allows you to target the first element immediately inside another element. It is defined in the CSS […]

.element:first-child { }

`:first-of-type`

The :first-of-type selector in CSS allows you to target the first occurence of an element within its container. It is […]

p:first-of-type { text-indent: 1rem; }

`:focus`

The :focus pseudo class in CSS is used for styling an element that is currently targeted by the keyboard, or […]

textarea:focus { background: pink; }

`:focus-visible`

The :focus-visible pseudo-class (also known as the “Focus-Indicated” pseudo-class) is a native CSS way to style elements that: Are in […]

.element:focus-visible { }

`:focus-within`

The :focus-within pseudo-selector in CSS is a bit unusual, although well-named and rather intuitive. It selects an element if that […]

form:focus-within { background: lightyellow; }

`:fullscreen`

The :fullscreen CSS pseudo-class allows you to select and style any element that is currently in fullscreen mode. You know […]

.element::fullscreen { text-size: 3rem; }

`:future`

:future is a CSS pseudo-selector we can use to style upcoming elements during media playback. Think subtitles in videos. We […]

:future(p) { opacity: .5; }

`:has()`

The CSS :has() pseudo-class selects elements that contain other elements that match the selector passed into its arguments. It’s often […]

.element:has(img) { }

`:hover`

The :hover pseudo class in CSS selects elements when the mouse cursor is current over them. It’s commonly associated with link (<a>) […]

a:hover { color: #f8a100; }

`:in-range`

The :in-range pseudo selector in CSS matches input elements when their value is within the range specified as being acceptable. […]

input:in-range { border: 5px solid green; }

`:indeterminate`

:indeterminate is a pseudo-class selector in CSS named for a state that is neither checked nor unchecked. It’s that in-between […]

input[type="radio"]:indeterminate { }

`:invalid`

:invalid is a pseudo-class selector that enables styling on invalid form elements. :invalid can be added to any form elements, […]

form:invalid { outline: 3px dashed red; }

`:is`

The pseudo-select :is() in CSS allows you to write compound selectors more tersely. For example, rather than writing: We could […]

:is(ul, ol) li { color: #f8a100; }

`:lang()`

The :lang() pseudo class selector in CSS matches elements based on the context of their given language attribute. Language in […]

:lang(en) { }

`:last-child`

The :last-child selector allows you to target the last element directly inside its containing element. It is defined in the […]

.element:last-child { }

`:last-of-type`

The :last-of-type selector allows you to target the last occurence of an element within its container. It is defined in […]

p:last-of-type { font-size: 0.75em; }

`:left`

The :left pseudo-class in CSS is used with the @page at-rule to select all left-hand pages in a print document […]

@page :left { margin: 1in 2in; }

`:link`

The :link selector is a pseudo-class that targets all anchor (<a>) elements on a page that have an href attribute: […]

a:link { color: #f8a100; }

`::marker`

The ::marker pseudo-element is for styling the stylistic marker of a list element. For example, the bullet point of a default <ul> […]

li::marker { color: red; }

`:not`

The :not() property in CSS is a negation pseudo class and accepts a simple selector or a selector list as […]

:not(.element) { color: #f8a100; }

`:nth-child`

The :nth-child selector allows you to select one or more elements based on their source order, according to a formula. […]

.element:nth-child(3n - 1) { }

`:nth-last-child`

The :nth-last-child selector allows you select one or more elements based on their source order, according to a formula. It […]

li:nth-last-child(2) { }

`:nth-last-of-type`

The :nth-last-of-type selector allows you select one or more elements based on their source order, according to a formula. It […]

.element:nth-last-of-type(2n + 1){ }

`:nth-of-type`

The :nth-of-type selector allows you select one or more elements based on their source order, according to a formula. It […]

.element:nth-of-type(2n + 1) { }

`:only-child`

The :only-child pseudo-class selector property in CSS represents an element that has a parent element and whose parent element has […]

.element:only-child { }

`:only-of-type`

The :only-of-type pseudo-class selector in CSS represents any element that has no siblings of the given type. p:only-of-type { color: […]

p:only-of-type { font-size: 120% }

`:open`

The :open pseudo-selector targets elements that support "open" and "closed" states and selects them only in their "open" state.

details:open { border: 6px solid #48a100; }

`:optional`

The :optional pseudo class targets inputs (including <select>s) that are not specifically set as required (do not have the required attribute). This can be useful when you […]

.element:optional { background: #f8a100; }

`:out-of-range`

The :out-of-range pseudo selector in CSS matches input elements when their value is outside the range specified as being acceptable. […]

input:out-of-range { border: 5px solid red; }

`::picker()`

The ::picker() pseudo-element targets and styles a form element's open menu of options.

::picker(select) { border: 3px solid oklch(65% 0.2 300); }

`::picker-icon`

The ::picker-icon pseudo-element allows us to style the dropdown icon of a <select> element.

::picker-icon { content: "✓"; }

`::placeholder`

The ::placeholder pseudo element (or a pseudo class, in some cases, depending on the browser implementation) allows you to style […]

input::placeholder { color: red; }

`:past`

:past is a CSS pseudo-selector that matches elements that have passed along a timeline. Where you’ll see this come into […]

:past(p) { opacity: .5; }

`:placeholder-shown`

The :placeholder-shown pseudo-class selects the input element itself when placeholder text exists in a form input. Think of it as a nice way to […]

input:placeholder-shown { border: 5px solid red; }

`:popover-open`

The CSS :popover-open pseudo-class is part of the Popover API that selects a popover element and styles the popover when […]

:popover-open { border: 0; }

`:read-write / :read-only`

The :read-write and :read-only selectors are two mutability pseudo-classes aiming at making form styling easier based on disabled, readonly and […]

.element:read-only { cursor: not-allowed; }

`:required`

The :required pseudo class selector in CSS allows authors to select and style any matched element with the required attribute. […]

input:required { }

`:right`

The :right pseudo-class in CSS is used with the @page at-rule to select all right-hand pages in a print document […]

@page :left { margin: 1in 2in; }

`:root`

The :root selector allows you to target the highest-level “parent” element in the DOM, or document tree. It is defined […]

:root { }

`::scroll-button()`

The ::scroll-button() pseudo-element adds accessible scroll buttons to scroll containers, giving users an additional way to navigate overflow content. To […]

.carousel::scroll-button(right) { content: "⮕"; }

`::scroll-marker`

The ::scroll-marker pseudo-element adds accessible scroll markers to scroll containers.

.element::scroll-marker { content: ""; }

`::scroll-marker-group`

The ::scroll-marker-group pseudo-element holds the scroll markers generated by the ::scroll-marker pseudo-element. When clicked on, these scroll markers scroll users to a corresponding scroll target within a scroll container in a scroll-snapping fashion. All in all, scroll markers give users an additional way to navigate overflow content.

.scroll-container::scroll-marker-group { /* ... */ }

`::selection`

Use your cursor select this sentence. Notice how as you select the text a background color fills the space? You […]

::selection { background: yellow; }

`::target-text`

The ::target-text pseudo-element selects a text fragment, usually the ones created by search engines.

p::target-text { /* ... */ }

`:target`

The :target pseudo selector in CSS matches when the hash in the URL and the id of an element are […]

.element:target { background: yellow; }

`:target-after`

:target-after is a CSS pseudo-class that selects all scroll markers that come after an active scroll marker (:target-current) within a scroll container.

::scroll-marker:target-after { background: red; }

`:target-before`

The :target-before CSS pseudo-class selects all scroll markers prior to an active scroll marker (:target-current) within a scroll container.

::scroll-marker:target-before { background: hsl(from black h s l / 50%); }

`:target-current`

The :target-current CSS pseudo-class selects active scroll markers, meaning it’s only valid when used with the ::scroll-marker pseudo-element

::scroll-marker:target-current { background: black; }

`:user-invalid`

The :user-invalid is a CSS pseudo-class that is under proposal in the CSS Selectors Level 4 working draft that selects […]

input:user-invalid { color: red; }

`::view-transition`

The CSS ::view-transition pseudo-element is the top-level — or “root” — containing all animated transitions defined as CSS view transitions […]

::view-transition { position: fixed;  }

`::view-transition-group`

The ::view-transition-group pseudo-element selects one or more containers that group the pieces of an individual view transition. See that transition-name […]

::view-transition-group(transition-name) { animation-duration: 1.25s; }

`::view-transition-image-new`

The CSS ::view-transition-image-new pseudo-element is part of the View Transition API that lets us select the “new” snapshot that is […]

::view-transition-image-new(*) { animation-duration: 700ms; }

`::view-transition-image-old`

The CSS ::view-transition-image-old pseudo-element is part of the View Transition API that lets us select the “before” snapshot in a […]

::view-transition-image-old(*) { animation-duration: 700ms; }

`::view-transition-image-pair`

The CSS ::view-transition-image-pair pseudo-element is part of the View Transition API that lets us select the “before-and-after” snapshots in a […]

::view-transition-image-pair(root) { animation-duration: 1s; }

`:valid`

:valid is a pseudo-class selector that enables styling on valid form elements. :valid can be added to any form element, […]

form:valid { outline: 3px dashed green; }

`:visited`

The:visited pseudo-class selector can change some of the styling on an anchor link (<a>) element if the user’s browser has […]

a:visited { color: #777; }

`:where`

The :where() pseudo selector in CSS is functionally identical to the :is() psuedo selector in that it takes a comma-separated […]

main :where(h1, h2, h3) { color: #f8a100; }