Selectors Quick Reference

Description

The following list summarizes the selectors and their CSS version.

  • *
    selects all elements
    CSS Level 2
  • type
    selects elements by type.
    CSS Level 1
  • .className
    Selects elements by the specified class.
    CSS Level 1
  • #id
    Selects elements by the id attribute.
    CSS Level 1
  • [attr]
    Selects elements with the attribute attr defined, regardless of its value.
    CSS Level 2
  • [attr="val"]
    Selects elements that define attr and whose value is val.
    CSS Level 2
  • [attr^="val"]
    Selects elements that define attr and whose value starts with the string val.
    CSS Level 3
  • [attr$="val"]
    Selects elements that define attr and whose value ends with the string val.
    CSS Level 3
  • [attr*="val"]
    Selects elements that define attr and whose value contains the string val.
    CSS Level 3
  • [attr~="val"]
    Selects elements that define attr and whose value contains multiple values, once of which is val.
    CSS Level 2
  • [attr|="val"]
    Selects elements that define attr and whose value is a hyphen-separated list of values, the first of which is val.
    CSS Level 2
  • selector, selector
    Selects the union of the elements matched by each individual selector.
    CSS Level 1
  • selector selector
    Selects elements that match the second selector and are arbitrary descendants of the elements matched by the first selector.
    CSS Level 1
  • selector > selector
    Selects elements that match the second selector and are immediate descendants of the elements matched by the first selector.
    CSS Level 2
  • selector + selector
    Selects elements that match the second selector and immediately follow an element that matches the first selector.
    CSS Level 2
  • selector ~ selector
    Selects elements that match the second selector and that follow an element that matches the first selector.
    CSS Level 3
  • ::first-line
    Selects the first line of text.
    CSS Level 1
  • ::first-letter
    Selects the first letter of text.
    CSS Level 1
  • :before
    :after
    Inserts content before or after the selected element.
    CSS Level 2
  • :root
    Selects the root element in the document.
    CSS Level 3
  • :first-child
    Selects elements that are the first children of their containing elements.
    CSS Level 2
  • :last-child
    Selects elements that are the last children of their containing elements.
    CSS Level 3
  • :only-child
    Selects elements that are the only element defined by their containing element.
    CSS Level 3
  • :only-of-type
    Selects elements that are the only element of their type defined by their containing element.
    CSS Level 3
  • :nth-child(n)
    Selects elements that are the nth child of their parent.
    CSS Level 3
  • :nth-last-child(n)
    Selects elements that are the nth from last child of their parent.
    CSS Level 3
  • :nth-of-type(n)
    Selects elements that are the nth child of their type defined by their parent.
    CSS Level 3
  • :nth-last-of-type(n)
    Selects elements that are the nth from last child of their type defined by their parent.
    CSS Level 3
  • :enabled
    Selects elements that are in enabled state.
    CSS Level 3
  • :disabled
    Selects elements that are in disabled state.
    CSS Level 3
  • :checked
    Selects elements that are in a checked state.
    CSS Level 3
  • :default
    Selects default elements.
    CSS Level 3
  • :valid
    :invalid
    Selects input elements that are valid or invalid based on input validation.
    CSS Level 3
  • :in-range
    :out-of-range
    Selects constrained input elements that are within or outside the specified range.
    CSS Level 3
  • :required
    :optional
    Selects input elements based on the presence of the required attribute.
    CSS Level 3
  • :link
    Selects link elements.
    CSS Level 1
  • :visited
    Selects link elements the user has visited.
    CSS Level 1
  • :hover
    Selects elements that is under the mouse pointer.
    CSS Level 2
  • :active
    Selects elements are under the pointer when the mouse button is pressed.
    CSS Level 2
  • :focus
    Selects the element that has the focus
    CSS Level 2
  • :not(selector)
    Negates a selection.
    CSS Level 3
  • :empty
    Selects elements that contain no child elements.
    CSS Level 3
  • :lang(language)
    Selects elements based on the value of the lang attribute.
    CSS Level 2
  • :target
    Selects the element referred to by the URL fragment identifier.
    CSS Level 3




















Home »
  HTML CSS »
    CSS »




CSS Introduction
CSS Background
CSS Border
CSS Box Layout
CSS Text
CSS Font
CSS Form
CSS List
CSS Selectors
CSS Others
CSS Table