CSS Selectors

Styles the area behind a full-screen element or dialog. It allows you to dim the background or add effects like blur when a modal is active.

Targets custom text highlights created via the CSS Highlight API. It allows you to style specific ranges of text programmatically (ideal for search-and-highlight features).

Targets the transition 'group' container for a specific named view transition. This is the container that holds both the 'old' and 'new' snapshots of an element, allowing you to animate the entire group as it moves or scales.

Targets the 'pair' of images (the old snapshot and the new snapshot) within a view transition group. This is where the cross-fade between the two states actually happens.

Targets the 'new' state's snapshot in a view transition. This is the image of how the element looks AFTER the change, allowing you to specifically animate how it fades in.

Targets the 'old' state's snapshot in a view transition. This is the image of how the element looked BEFORE the change, allowing you to animate how it fades out or is removed.

Matches elements that are currently participating in a view transition. This allows you to apply specific styles or animations exclusively while the transition is in progress.

A pseudo-class that targets elements based on the directionality of the text within them (e.g., left-to-right or right-to-left).

Matches an element if it contains at least one descendant or preceding element that matches the selector provided in the arguments. It is often referred to as the 'parent selector'.

A selector that matches a media element (like <video> or <audio>) when it is currently set to play back in a loop.

Targets media elements (like <video> or <audio>) when they are currently muted.

A pseudo-class that matches elements when they are in an 'open' state, such as a <dialog> or <details> element. It's designed to provide a unified way to style openable components.

A selector that matches a media element (like <video> or <audio>) when it is currently paused.

A selector that matches a media element (like <video> or <audio>) when it is currently playing.

Matches elements with the popover attribute that are currently in their open state. It allows you to style top-layer content like menus and tooltips specifically when they are visible.

A modern pseudo-class that targets form elements that are currently invalid, but ONLY after the user has interacted with them. This avoids showing scary red errors immediately before the user has even started typing.

The companion to ':user-invalid', this targets form elements that are valid, but only after the user has finished interacting with them. It is great for showing 'Success' checkboxes without cluttering the form initially.

Allows you to write CSS rules inside of other rules. This makes your code more organized and mirrors the structure of your HTML.

Creates a 'virtual' element that appears as the last child of the selected element. It's commonly used for decorative elements like icons, dividers, or tooltips without adding extra HTML tags.

Creates a 'virtual' element that appears as the first child of the selected element. It's often used for quotes, bullet icons, or other decorative elements that don't need to be in the HTML markup.

An experimental pseudo-element part of the customizable select API that allows styling the checkmark icon in dropdown menus.

An experimental pseudo-element that allows you to style individual column boxes in a multi-column layout.

A pseudo-element that allows you to style VTT (Video Text Tracks) cues, such as subtitles or captions, inside a media element.

An experimental pseudo-element that specifically targets the content part of a <details> element (the part that expands and collapses).

A pseudo-element that targets the button part of an '<input type="file">' element, allowing you to style the 'upload' button directly.

A pseudo-element that targets the very first letter of the first line of a block-level element. perfect for creating drop caps.

A pseudo-element that targets the entire first line of text within a block-level element. The line length changes as the browser window is resized.

Matches text that the browser has flagged as having a grammatical error. You can use this to change the color or style of the grammar correction underline.

Targets the list item marker (usually the bullet point or number) of a list element. It allows you to style the bullet separately from the text of the list item.

A selector used inside a Shadow DOM that allows you to style specific internal pieces of a web component from the outside (the 'global' CSS).

A pseudo-element selector part of the new customizable <select> API. it allows you to style the actual dropdown menu (the 'picker') that appears when you click a select box.

A pseudo-element selector part of the new customizable <select> API. It identifies the icon or arrow that users click to open a selection menu.

A pseudo-element selector that lets you style the actual text of a placeholder inside an input field.

A new pseudo-element that allows you to style the 'up', 'down', 'left', and 'right' buttons that appear in scrollable containers (like scrollbars).

A new experimental pseudo-element that represents an individual navigation dot in a carousel. You can style these dots (like an active/inactive state) directly in CSS.

A new experimental pseudo-element that acts as a container for individual 'scroll markers'. It's used to create native CSS carousels with built-in navigation dots.

A pseudo-element that allows you to style text that matches a 'find in page' search query. This lets you customize how highlighted search results appear in your site.

A pseudo-element that styles the part of a document that has been highlighted by the user (usually by clicking and dragging with the mouse).

A pseudo-element used inside a Web Component (Shadow DOM) to style elements that have been 'slotted' into a <slot> tag from the light DOM.

A pseudo-element that allows you to customize the styling of words that the browser identifies as having spelling errors.

A pseudo-element that allows you to style text that has been targeted via a URL fragment (the part after the # in a URL). This is often used for 'scrol-to-text' highlights.

Matches an element while it is actively being clicked or tapped. It's often used to give visual feedback (like a slight 'press' down effect) to the user.

Allows you to target elements during a specific type of view transition. By naming your transitions (e.g., 'slide-in' or 'payout'), you can apply different styles for each scenario.

Matches any element that is an anchor with an 'href' attribute, regardless of whether it has been visited. It's a cleaner way to style all links without having to list ':link' and ':visited' separately.

Allows you to select elements based on the presence or value of their HTML attributes. This is powerful for styling elements like inputs with specific types or links pointing to PDF files.

Matches an input element when its value has been automatically filled by the browser (like an address or credit card). It's useful for overriding the browser's default yellow background in autofilled fields.

Targets media elements (like <video> or <audio>) while they are actively loading data and currently 'buffering'.

A pseudo-class that targets checkboxes, radio buttons, or option elements that are currently selected (checked) by the user.

The child combinator (>) selects elements that are immediate children of a specific parent, ignoring grandchildren or further descendants.

The class selector (.) targets all elements that have a specific 'class' attribute. It is the most common and flexible way to apply styles in CSS.

A pseudo-class that targets form elements (like buttons or checkboxes) that are the default among a set of similar elements.

Matches any element that has been officially 'defined' by the browser. This includes all standard HTML elements and any custom elements that have been registered via JavaScript.

The most common CSS combinator (a simple space). It targets an element that is inside (a descendant of) another specified element, no matter how deeply nested.

A pseudo-class that targets elements that are in a disabled state (like a button with the 'disabled' attribute), making them unclickable and often grayed out.

A pseudo-class that targets any element that has absolutely no content inside it (not even whitespace or children).

A pseudo-class that targets form elements (like inputs or buttons) that are in an 'enabled' state and can be interacted with.

A page-target selector used within the '@page' rule to specifically style the first page of a printed document.

A pseudo-class that targets an element only if it is the very first child of its parent.

A pseudo-class that targets the first element of its specific type within a parent. For example, 'p:first-of-type' targets the first paragraph, even if it's not the first overall child.

A pseudo-class that targets an element that has been selected (e.g., clicked or tabbed to) and is ready to receive input.

A pseudo-class that targets an element only when it is focused AND the browser determines focus should be visible (usually when using a keyboard, not a mouse).

A pseudo-class that targets an element if it or any of its children are focused. It's great for highlighting a whole form group when an input inside is active.

Targets an element while it is being displayed in the browser's full-screen mode (e.g., when a video or a photo is expanded to fill the whole monitor).

A pseudo-class used with WebVTT (video subtitles). It targets subtitle cues that are scheduled to appear 'in the future' relative to the current playback time.

Matches a 'slot' in the Shadow DOM if it contains content that matches the selector. It's used within Web Components to style slots based on what's been put inside them.

An experimental pseudo-class that targets any heading element (h1, h2, h3, h4, h5, or h6) automatically.

Allows you to style the 'host' (the custom element itself) from within the element's own Shadow DOM. It's the standard way to set a component's default display, width, or height.

A pseudo-class used in Web Components to style the custom element based on its position in the outside page (e.g., styling a component differently if it's placed inside a 'dark-mode' container).

Used inside a Shadow DOM to style the 'host' element (the custom element itself). The functional version ':host()' lets you apply styles only if the host matches a specific selector.

Targets an element when the user's cursor is positioned over it. It's the bread-and-butter for making interactive buttons and links.

Targets a single, unique element on a page that has a matching 'id' attribute. Since IDs must be unique, this selector should only ever match one element.

Targets form inputs (like type='number') whose current value is between the minimum and maximum limits set by 'min' and 'max' attributes.

Targets form elements whose state is neither 'on' nor 'off' (like a checkbox that's been mixed by JavaScript, or a radio group where nothing is selected yet).

Experimental: Targets an element that is currently the 'source' of interest (the element being hovered or focused) which is triggering an interest-based UI like a tooltip.

Experimental: Targets the 'target' of an interest action (like the tooltip or popover itself) while it is currently being shown.

Targets form inputs that contain data that doesn't follow the rules set by attributes like 'required', 'pattern', or 'type'.

Matches any element in its list while taking the specificity of its most specific argument. It is used to group selectors efficiently and reduce repetition.

Targets elements based on the language they are written in (using the 'lang' attribute). It is smart enough to match sub-languages like 'en-US' when you search for 'en'.

Targets an element only if it is the very last child inside its parent container.

Targets the last element of a specific type (like the last <p> or the last <img>) within its parent container, even if there are other types of elements after it.

A selector used inside the @page rule to target the physical 'left' pages of a double-sided printed document.

Targets links (<a> elements with an 'href') that have not yet been visited by the user.

A selector list is simply a comma-separated list of multiple selectors. If an element matches any one of the selectors in the list, the styles will be applied to it.

Targets an element that is in a 'modal' state, such as a <dialog> element opened with the showModal() method.

Targets an element that is immediately following another element at the same level in the HTML structure.

Matches elements that do not match the list of selectors provided in its arguments. It allows you to exclude specific items from a general style rule.

Targets elements based on their position in a list. You can use numbers, formulas (like 2n for 'every second'), or keywords like 'odd' and 'even'.

Works exactly like :nth-child(), but it counts backwards from the very last element in the container.

Targets elements of a specific type (like <p>) by counting backwards from the last one of that type in the container.

Targets elements based on their position among siblings of the same type. For example, it can target 'the second image' even if there are paragraphs in between.

Targets an element that is the ONLY child of its parent. If there are any other elements (even of a different type), it won't match.

Targets an element that is the ONLY child of its type among its siblings. For example, 'the only image' in a div, even if there's also text.

Targets elements that are currently in an 'open' state, such as a <details> element that is expanded or a <dialog> that is visible.

Targets form elements (like <input> or <select>) that do NOT have the 'required' attribute.

Targets form inputs when their value is outside the limits specified by 'min' or 'max' attributes (for example, typing 11 in a 1-10 range input).

A selector used with WebVTT subtitles to style the text that has already been spoken in the current video caption.

A selector that matches a media element (like <video>) when it is currently being played in a floating 'picture-in-picture' window.

A selector that matches an <input> or <textarea> element ONLY while it is currently showing its placeholder text (meaning the field is empty).

A selector that matches elements (like inputs) that cannot be edited by the user. This includes fields with the 'readonly' attribute or contenteditable fields that are disabled.

A selector that matches elements that ARE editable by the user. This includes normal text inputs, textareas, or elements with 'contenteditable' turned on.

A selector that matches any <input>, <select>, or <textarea> element that has the 'required' attribute set. It's often used to show a red asterisk or border on mandatory fields.

A selector used in paged media (like printing) to style only the right-hand pages of a document (usually odd-numbered pages).

A selector that matches the very top-level element of the document (usually the <html> tag in a website). It's the standard place to define global CSS variables.

A selector that matches a media element (like <video> or <audio>) while the user is actively 'seeking' or scrubbing through the timeline.

A selector that matches a media element (like <video> or <audio>) when it tries to fetch data but can't because of a slow network or connection issues.

A pseudo-class for Custom Elements that allows you to style them based on custom internal states (like 'loading', 'active', or 'error') that are set via JavaScript using the ElementInternals API.

Matched by the '~' symbol, this selector targets any siblings that come AFTER the specified element in the HTML. It doesn't have to be the very next sibling.

Matches a unique element with an ID that matches the current URL's hash (e.g., #section1). It's great for highlighting a section when a user clicks a 'Jump to Section' link.

An experimental pseudo-class that matches a 'scroll marker' when it represents an item that comes AFTER the current viewport in a scroll container.

An experimental pseudo-class that matches a 'scroll marker' when it represents an item that comes BEFORE the current viewport in a scroll container.

An experimental pseudo-class that matches the 'scroll marker' corresponding to the item currently visible in the viewport. This is the 'active' state for carousel indicators.

The 'asterisk' selector that matches every single element on the page. It is commonly used in CSS resets to apply a base style (like 'box-sizing: border-box') to everything at once.

Targets any form element that currently meets its requirements (like matching a 'pattern' or having content in a 'required' field). Unlike ':user-valid', this can match immediately on page load.

Matches any link that the user has already visited in their browser. For privacy reasons, the browser only allows you to change a few specific properties (like 'color' and 'background-color') using this selector.

An experimental pseudo-class that targets audio or video elements that are currently 'locked' from being muted or having their volume changed (often seen in certain accessibility contexts).

Matches any element in its list of arguments, but always has zero specificity. It is ideal for setting default styles that are intended to be easily overridden.

An experimental pseudo-class function that targets a heading of a specific level or relative level (e.g., :heading(2) for h2).

An experimental selector used in the View Transition API to target and style the children within a view transition group.

An experimental pseudo-class that targets the root element of a 'DOM Overlay' when a web page is being viewed in an Immersive AR or VR environment.