CSS selectors

This lesson will help you understand what are different kind of CSS selectors and how to use them.

Quick Hands-on

Lecture Slides

Points to Remember

• A CSS selector is used to select the HTML element(s) that we can style.

• Common CSS categories:
  • Simple selectors (name, id, class)
  • Combinator selectors (relation between two selectors)
    • Descendant selector (space)
    • Child selector ( > )
    • Normal sibling selector ( ~ )
    • Adjacent sibling selector ( + )

• Pseudo-class selectors (based on certain states)

• Pseudo-elements selectors (select and style a part of an element)

• Attribute selectors (based on an attribute or attribute value)

• Specific Class Selector: Select only specific elements that should be affected by a class.

• Multiple Selectors: We can specify more than one selector to select a group of elements.

• Universal Sector: Selects all HTML elements on the page.

• CSS Grouping Selector: Selects all the HTML elements with the same style.

• Descendant Selector: Matches all elements that are descendants(child, grandchild, or below) of a specified element.

• Child Selector (>): Selects all elements that are direct children of a specified element

• Normal Sibling Selector (~): Selects all elements that are siblings of a specified element.

• Adjacent Sibling Selector (+): Used to select an element directly after another specific element.