Target HTML elements precisely and understand which styles take priority using CSS selectors and specificity.

What Are CSS Selectors?

Selectors define which HTML elements a CSS rule applies to.

This applies to all <p> elements

Common Selector Types

1. Type Selector

Targets elements by tag name:

2. Class Selector .

Targets elements with a specific class using

3. ID Selector

Targets a single element with #

Attribute Selector

Targets elements with specific attributes

Combinators

1. Descendant Selector

Applies to <p> inside a <div>

2. Child Selector

Applies only to direct children

3. Adjacent Sibling Selector

Targets the <p> immediately after <h2>

CSS Specificity

Determines which CSS rule wins when multiple rules target the same element

Specificity hierarchy:

1. Inline styles (style="") Highest
2. IDs (#id)
3. Classes, attributes, pseudo-classes (.class, [attr], :hover)
4. Type selectors (div, p) Lowest

Example:

Result: Text will be red because ID has higher specificity

Visual Suggestions

1. Diagram showing type, class, ID hierarchy
2. GIF highlighting multiple selectors and which one takes effect
3. Screenshot of DevTools showing applied styles and specificity