CSS Selector Reference

Selectors are patterns used to select the element(s) you want to style.

Selector Example Example description
.class .intro Selects all elements with class="intro"
.class1.class2 .name1.name2 Selects all elements with both name1 and name2 set within its class attribute
.class1 .class2 .name1 .name2 Selects all elements with name2 that is a descendant of an element with name1
#id #firstname Selects the element with id="firstname"
* * Selects all elements
element p Selects all <p> elements
element.class p.intro Selects all <p> elements with class="intro"
element,element div, p Selects all <div> elements and all <p> elements
element element div p Selects all <p> elements inside <div> elements
element>element div > p Selects all <p> elements where the parent is a <div> element
element+element div + p Selects the first <p> element that is placed immediately after <div> elements
element1~element2 p ~ ul Selects every <ul> element that is preceded by a <p> element
[attribute] [target] Selects all elements with a target attribute
[attribute=value] [target="_blank"] Selects all elements with target="_blank"
[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] a[href^="https"] Selects every <a> element whose href attribute value begins with "https"
[attribute$=value] a[href$=".pdf"] Selects every <a> element whose href attribute value ends with ".pdf"
[attribute*=value] a[href*="bluecode"] Selects every <a> element whose href attribute value contains the substring "bluecode"

Pseudo-Classes

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).

Selector Example Example description
:active a:active { color: red; } Applies styles to an element when it is being activated by a user.
:any-link a:any-link { color: blue; } Styles any link, visited or unvisited.
:autofill input:autofill { background: lightgreen; } Styles input fields that are filled automatically by the browser.
:blank input:blank { border: 2px dashed red; } Targets input elements with no user input.
:checked input:checked { background-color: yellow; } Styles checkbox or radio inputs when they are checked.
:current .step:current { font-weight: bold; } Targets the current element in a sequence of elements, often used in presentations or slideshows.
:default button:default { background-color: lightblue; } Styles the default button in a group of buttons, typically the one activated by pressing "Enter" in a form.
:defined custom-element:defined { display: block; } Styles custom elements that are defined (registered).
:dir() :dir(rtl) { padding-right: 10px; } Styles elements based on the directionality of text within them, either ltr (left-to-right) or rtl (right-to-left).
:disabled input:disabled { opacity: 0.5; } Styles form elements that are disabled.
:empty div:empty { display: none; } Targets elements that have no children (including text nodes).
:enabled input:enabled { border: 2px solid green; } Styles form elements that are enabled.
:first div:first { color: red; } Obsolete. Would style the first element of the type, now replaced by :first-child or :first-of-type.
:first-child p:first-child { font-size: 20px; } Styles the first child element within its parent.
:first-of-type p:first-of-type { margin-left: 20px; } Styles the first element of its type within its parent.
:focus input:focus { border-color: blue; } Applies styles to an element when it has focus.
:focus-visible button:focus-visible { box-shadow: 0 0 3px #0078d7; } Applies styles when an element has focus and should show a focus indicator, typically when using keyboard navigation.
:focus-within div:focus-within { border: 2px solid green; } Styles an element if it contains a child element with focus.
:fullscreen video:fullscreen { width: 100%; height: 100%; } Styles elements that are currently displayed in fullscreen mode.
:future /* Not a standard pseudo-class */ This pseudo-class is not standard and is not implemented in browsers.
:has() div:has(> img) { border: 2px solid blue; } Selects elements that have at least one element inside matching the selector argument.
:host :host(.dark-mode) { background: black; } Targets the shadow DOM host element with a specific class.
:host() :host(.active) { border: 1px solid black; } Targets the shadow DOM host element that matches the given selector.
:host-context() :host-context(.dark) { color: white; } Targets the shadow DOM host element if it or any of its ancestors matches the given selector.
:hover a:hover { color: red; } Applies styles when the mouse pointer hovers over an element.
:indeterminate input[type="checkbox"]:indeterminate { background-color: grey; } Styles input elements like checkboxes and radio buttons that are in an indeterminate state.
:in-range input:in-range { border: 2px solid green; } Styles input elements with a value within a specified range.
:invalid input:invalid { border: 2px solid red; } Styles input elements where the content fails to validate according to the input's type setting.
:is() :is(.class1, .class2) { color: blue; } Selects elements that match any of the selectors inside the :is() function.
:lang() p:lang(en) { color: green; } Styles elements that are designated with a specific language, using the lang attribute.
:last-child p:last-child { color: blue; } Targets the last child element within its parent.
:last-of-type p:last-of-type { margin-bottom: 0; } Targets the last element of its type within its parent.
:left /* Not used in modern CSS */ Previously used in CSS for left-to-right specific styles. Not used in modern CSS as :left and :right are intended for page media.
:link a:link { color: blue; } Styles unvisited links.
:local-link a:local-link { color: green; } Styles links that point to the same domain.
:modal /* Not a standard pseudo-class */ This pseudo-class is not standard and is not implemented in browsers.
:not() div:not(.class) { color: red; } Selects every <div> element that does not have the class "class".
:nth-child() p:nth-child(2) { color: red; } Selects the second p element among its siblings.
:nth-last-child() p:nth-last-child(2) { color: green; } Selects the second-to-last p element among its siblings.
:nth-last-of-type() p:nth-last-of-type(1) { color: blue; } Selects the last p element of its type among its siblings.
:nth-of-type() p:nth-of-type(2) { color: orange; } Selects the second p element of its type among its siblings.
:only-child p:only-child { color: black; } Selects the p element if it is the only child of its parent.
:only-of-type p:only-of-type { margin-left: 20px; } Selects the p element if it is the only p element of its parent.
:optional input:optional { border: 1px solid silver; } Selects form elements that are not required.
:out-of-range input:out-of-range { background-color: red; } Selects input elements with a value outside the specified range.
:paused video:paused { border: 3px solid red; } Selects video elements that are currently paused.
:placeholder-shown input:placeholder-shown { background: #eee; } Selects input elements that are displaying placeholder text.
:playing video:playing { border: 3px solid green; } Selects video elements that are currently playing.
:read-only input:read-only { background-color: grey; } Selects input elements that are read-only.
:read-write input:read-write { border: 2px dashed blue; } Selects input elements that are editable.
:required input:required { border: 2px solid red; } Selects input elements with a "required" attribute.
:root :root { font-size: 16px; } Selects the document's root element, typically the <html> element.
:target :target { border: 2px solid black; } Selects the current active target element (clicked on a URL containing that anchor name).
:valid input:valid { border: 2px solid green; } Selects all input elements that contain valid content.
:visited a:visited { color: purple; } Selects all visited links.
:where() :where(.class1, .class2) { color: blue; } The :where() pseudo-class functions similarly to the :is() pseudo-class but with zero specificity. This means it can select elements that match any of the selectors inside the parentheses without increasing the specificity of other selectors. It's useful for writing more maintainable stylesheets by avoiding specificity conflicts.

Pseudo-Elements

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).

Pseudo-element Example Description
::after div::after { content: "Hello"; } Inserts content after the content of the element. Commonly used to add cosmetic content via CSS.
::backdrop dialog::backdrop { background-color: rgba(0,0,0,0.5); } Styles the backdrop of full-screen elements like <dialog> when displayed modally.
::before div::before { content: "Prefix"; } Inserts content before the content of the element. Often used for decorative purposes.
::cue ::cue { background-color: yellow; } Applies styles to WebVTT cues in a video.
::file-selector-button input[type='file']::file-selector-button { background: blue; } Styles the file input button of an <input type="file"> element.
::first-letter p::first-letter { font-size: 200%; } Applies styles to the first letter of the first line of a block-level element, if it is not preceded by any other content.
::first-line p::first-line { font-weight: bold; } Styles the first line of a block-level element.
::grammar-error ::grammar-error { color: green; } Styles text segments that a user agent has flagged for grammatical errors.
::highlight() ::highlight(myHighlight) { background-color: yellow; } Styles text that has been highlighted, typically via JavaScript or user interaction.
::marker li::marker { color: red; } Styles the marker box of list items, i.e., the bullet or number.
::part() custom-element::part(label) { font-weight: bold; } Styles part of a shadow DOM that has been exported for styling via the part attribute.
::placeholder input::placeholder { color: grey; } Styles the placeholder text of input fields and textareas.
::selection p::selection { background: lightblue; } Applies styles to the portion of an element that is selected by a user.
::slotted() ::slotted(span) { font-size: 20px; } Styles slotted elements in a shadow DOM using the <slot> HTML tag.
::spelling-error ::spelling-error { text-decoration: underline; } Styles text segments that a user agent has flagged for spelling errors.
::target-text ::target-text { background: yellow; } Applies styles to text targeted by a fragment identifier or other targeting method.
::view-transition div::view-transition { opacity: 0.5; } Hypothetical example assuming this pseudo-element would style elements during a view transition, such as during page or state changes in single-page applications.
::view-transition-image-pair() div::view-transition-image-pair(url1, url2) { transition: background-image 0.5s; } Hypothetically applies a style to elements that are transitioning between two images, using specific images as parameters.
::view-transition-group() ::view-transition-group(header) { transform: translateY(-100px); } Hypothetically targets a group of elements specified by a selector argument, applying transition effects as a collective group.
::view-transition-new() ::view-transition-new { z-index: 1; } Hypothetically used to style the entering or 'new' elements in a transition, emphasizing their stacking context during animations.
::view-transition-old() ::view-transition-old { z-index: 0; } Hypothetically used to style the exiting or 'old' elements in a transition, managing their visibility and position relative to new elements.

Conclusion

CSS pseudo-elements are essential for fine-grained design control in modern web development. They allow developers to apply styles to specific parts of the elements and content in unique states, enhancing the user experience and interface design.