HTML CSS Selector

An HTML CSS Selector is a pattern used in CSS to target and select the specific HTML element(s) you want to style. It acts as the bridge between your HTML markup and your CSS styles.

1. What is the "Select All" Selector?
The "Select All" selector in CSS is known as the Universal Selector. It is written using an asterisk ().
Definition
The universal selector () matches every single HTML element on the page (or within a specific scope).
/* Selects ALL elements on the page */

• { margin: 0; padding: 0; box-sizing: border-box; }

Common Use Case: It is most frequently used in CSS resets to clear default margins/paddings and set box-sizing: border-box globally across all elements.

2. Categories of CSS Selectors (With Examples)
CSS selectors fall into 5 main types:
Type 1: Basic Selectors

• Universal Selector (*): Targets all elements.
  • Example: * { box-sizing: border-box; }
• Element / Tag Selector: Targets elements by their HTML tag name.
  • Example: p { color: blue; } (Selects all

    tags)

• Class Selector (.): Targets elements with a specific class attribute.
  • Example: .btn { padding: 10px; } (Selects , , etc.)
• ID Selector (#): Targets a single element with a specific id attribute.
  • Example: #header { background: black; } (Selects )
• Group Selector (,): Selects multiple elements sharing the same styles.
  • Example: h1, h2, p { font-family: sans-serif; }

Type 2: Combinator Selectors
Combinators define the relationship between two or more selectors.
*** Descendant Selector (space)**: Matches all child/grandchild elements inside a parent.

• Example: div p { color: gray; } (All

  inside a

  ) *** Child Selector (>)**: Matches only direct children.
• Example: ul > li { list-style: none; } (Only
• directly inside
  ). *** Adjacent Sibling Selector (+)**: Matches the element that comes immediately after a specified element.
  • Example: h1 + p { font-weight: bold; } (The

    right after an

    ). ** General Sibling Selector (~)*: Matches all elements that follow a specified element at the same level.

  • Example: h1 ~ p { line-height: 1.5; } (All

    tags following an

    )

  Type 3: Attribute Selectors
  Selects elements based on the presence or value of an attribute.

  

  Type 4: Pseudo-Class Selectors
  Targets an element based on its state or position. Starts with a single colon (:).
  *** State Pseudo-classes:**

  • :hover — When mouse hovers over an element.
  • :focus — When an input receives focus.
  • :active — When an element is being clicked. *** Positional Pseudo-classes:**
  • :first-child — The first child of a container.
  • :last-child — The last child of a container.
  • :nth-child(n) — Selects elements based on a formula (e.g., :nth-child(even) or :nth-child(3)).

  Type 5: Pseudo-Element Selectors
  Targets a specific part of an element. Starts with double colons (::).

  • ::before — Inserts content before the element's content.
  • ::after — Inserts content after the element's content.
  • ::placeholder — Styles the placeholder text of an .
  • ::selection — Styles the text highlighted/selected by the user. 3. Difference Between Key Selectors

  

  1. Specificity Quick Cheat Sheet

  When two selectors apply to the same element, CSS decides which style wins using Specificity: