Bo dinglesTM - -   Bright Lightbulb Graphic Ideas   - -

The Web Developer Bootcamp 2024

Colt Steele

Back to CSS Reference Index


CSS Basic Selectors

Basic Selectors

  • Element Selector
    • select element by it's name
    • eg. h1, p, a, etc.
  • Universal Selector | * (asterisk)
    • selects all elements
  • Combine Selector | , (comma)
    • combines multiple elements
  • Class Selector | . (period)
    • selects specific class element
  • ID Selector | # (pound)
    • selects specific id element

Combinator Selectors

  • Descendant Selector | (space)
    • matches all elements that are descendants of a specified element
    • eg. [ p a ] | selects all a tags inside a p tag
  • Adjacent Selector | + (plus)
    • used to select a single element that is directly after another specific element
    • the sibling element must have the same parent element, and "adjacent" means "immediately following"
    • eg. [ h1 + p ] | selects the first p tag that is adjacent to an h1 tag
  • Direct Child Selector | > (greater than)
    • selects all child elements
    • eg. [ div > li ] | selects all li elements that are a child to a div element
  • General Sibling Selector | ~ (tilde)
    • selects all elements that are the next siblings of a specified element
    • eg. [ div ~ p ] | selects all p elements that are the next siblings after a div element

Attribute Selector

: Pseudo Classes

  • W3Schools Pseudo-Class
  • MDN Pseudo-Class
  • pseudo-classes are used to define a special state of an element.
      For example it can be used to,
    • Style an element when a user mouses over it
    • Style visited and unvisited links differently
    • Style an element when it gets focus
    • and many more.

  • :hover
    • styles an element when the mouse is hovered over it
  • :active
    • styles the element when clicked with the mouse
  • :checked
    • styles and radio or checkbox that is checked
  • :first-child
    • selects the element that is the first child of its parent (among a group of sibling elements)
  • :nth-child()
    • selects the element that is the nth child of its parent (among a group of sibling elements)
  • :nth-of-type()
    • matches every element that is the nth child, of the same tag (type), of its parent
    • can be a number/index, a keyword (odd or even), or a formula (like an + b)
    • W3Schools More Info
    • MDN More Info
  • :not()

:: Pseudo Elements

  • W3Schools Pseudo Elements
  • MDN Pseudo Elements
  • A CSS pseudo-element is used to style specified parts of an element
      For example, it can be used to:
    • Style the first letter, or line, of an element
    • Insert content before, or after, the content of an element

    Some examples
  • element::first-letter
    • styles the "first letter" of an element
  • element::first-line
    • styles the "first line" of an element, such as a paragraph
  • element::selection
    • styles page items that would be selected by the user. For example,
      • if a user selects some text on a webpage, change the background color of the selected text.
    • select any text on this page to see the result

Back to Top