Skip to main content

CSS selectors

The CSS selectors module defines the patterns to select elements to which a set of CSS rules are then applied along with their {{cssxref("specificity")}}. The CSS selectors module provides us with more than 60 selectors and five combinators. Other modules provide additional pseudo-class selectors and pseudo-elements.

In CSS, selectors are patterns used to match, or select, the elements you want to style. Selectors are also used in JavaScript to enable selecting the DOM nodes to return as a NodeList.

Selectors, whether used in CSS or JavaScript, enable targeting HTML elements based on their type, attributes, current states, and even position in the DOM. Combinators allow you to be more precise when selecting elements by enabling selecting elements based on their relationship to other elements.

Reference

Combinators and separators

Selectors

  • {{CSSXref(":active")}}
  • {{CSSXref(":any-link")}}
  • {{CSSXref(":autofill")}}
  • {{CSSXref(":blank")}}
  • {{CSSXref(":buffering")}}
  • {{CSSXref(":checked")}}
  • {{CSSXref(":current")}}
  • {{CSSXref(":current", ":current()")}}
  • {{CSSXref(":default")}}
  • {{CSSXref(":defined")}}
  • {{CSSXref(":dir", ":dir()")}}
  • {{CSSXref(":disabled")}}
  • {{CSSXref(":empty")}}
  • {{CSSXref(":enabled")}}
  • {{CSSXref(":first-child")}}
  • {{CSSXref(":first-of-type")}}
  • {{CSSXref(":focus")}}
  • {{CSSXref(":focus-visible")}}
  • {{CSSXref(":focus-within")}}
  • {{CSSXref(":fullscreen")}}
  • {{CSSXref(":future")}}
  • {{CSSXref(":has", ":has()")}}
  • {{CSSXref(":hover")}}
  • {{CSSXref(":indeterminate")}}
  • {{CSSXref(":in-range")}}
  • {{CSSXref(":invalid")}}
  • {{CSSXref(":is", ":is()")}}
  • {{CSSXref(":lang", ":lang()")}}
  • {{CSSXref(":last-of-type")}}
  • {{CSSXref(":link")}}
  • {{CSSXref(":local-link")}}
  • :matches() (obsolete legacy selector alias for {{CSSXref( ":is", ":is()")}})
  • {{CSSXref(":modal")}}
  • {{CSSXref(":muted")}}
  • {{CSSXref(":not", ":not()")}}
  • {{CSSXref(":nth-child", ":nth-child()")}}
  • {{CSSXref(":nth-of-type", ":nth-of-type()")}}
  • {{CSSXref(":nth-last-child", ":nth-last-child()")}}
  • {{CSSXref(":nth-last-of-type", ":nth-last-of-type()")}}
  • {{CSSXref(":only-child")}}
  • {{CSSXref(":only-of-type")}}
  • {{CSSXref(":optional")}}
  • {{CSSXref(":out-of-range")}}
  • {{CSSXref(":past")}}
  • {{CSSXref(":paused")}}
  • {{CSSXref(":picture-in-picture")}}
  • {{CSSXref(":placeholder-shown")}}
  • {{CSSXref(":playing")}}
  • {{CSSXref(":read-only")}}
  • {{CSSXref(":read-write")}}
  • {{CSSXref(":required")}}
  • {{CSSXref(":root")}}
  • {{CSSXref(":scope")}}
  • {{CSSXref(":seeking")}}
  • {{CSSXref(":stalled")}}
  • {{CSSXref(":target")}}
  • {{CSSXref(":target-within")}}
  • {{CSSXref(":user-invalid")}}
  • {{CSSXref(":user-valid")}}
  • {{CSSXref(":valid")}}
  • {{CSSXref(":visited")}}
  • {{CSSXref(":volume-locked")}}
  • {{CSSXref(":where", ":where()")}}
  • :-webkit- pseudo-classes
  • Attribute selectors
  • Class selector
  • ID selectors
  • Type selectors
  • Universal selectors

Terms

Guides

  • {{CSSXref(":popover-open")}} pseudo-class

  • {{CSSXref(":state","state()")}} pseudo-class

  • CSS nesting module

  • CSS scoping module

    • {{CSSXref(":host")}} pseudo-class
    • {{CSSXref(":host_function", ":host()")}} pseudo-class
    • {{cssxref(":host-context", ":host-context()")}} pseudo-class
    • {{CSSXref("::slotted")}} pseudo-element
  • CSS pseudo-element module (representing entities not included in HTML)

    • {{CSSXref("::after")}}
    • {{CSSXref("::before")}}
    • {{CSSXref("::file-selector-button")}}
    • {{CSSXref("::first-letter")}}
    • {{CSSXref("::first-line")}}
    • {{CSSXref("::grammar-error")}}
    • {{CSSXref("::marker")}}
    • {{CSSXref("::placeholder")}}
    • {{CSSXref("::selection")}}
    • {{CSSXref("::spelling-error")}}
    • {{CSSXref("::target-text")}}
  • CSS shadow parts module

    • {{CSSXref("::part")}} pseudo-element
  • CSS positioned layout module

    • {{CSSxRef("::backdrop")}}
  • Other pseudo-elements

    • {{CSSxRef("::cue")}}
  • {{CSSXref("@namespace")}} at-rule

  • {{cssxref("important", "!important")}}

  • Specificity

  • Cascade

  • {{domxref("Document.querySelector")}} method

  • {{domxref("Document.querySelectorAll")}} method

  • {{domxref("NodeList.forEach()")}} method

Specifications

See also