CSS: Selectors

Learn how to target exactly the elements you want to style.

Type Selector (Element)

The type selector targets all elements of a given HTML tag. It is the most basic selector, write the tag name and every matching element on the page gets the style.

`Type Selector`

Targets every instance of a specific HTML element. No special character needed, just write the tag name.

p { }targets every
on the page
h1 { }targets every
on the page
Applies to all matching elements with no exceptions
Lowest specificity among the three main selector types

Type Selector

Every <h1> and <p> on the page is targeted.

h1 {
  color: steelblue;
}

p {
  color: gray;
  font-size: 16px;
}

Class Selector

A class selector targets elements that have a matching class attribute. Multiple elements can share the same class, and one element can have multiple classes.

`.className`

Class selectors start with a dot (.) followed by the class name. They are the most commonly used selector in real projects.

.highlight { }targets every element with class='highlight'
One class can be reused on many different elements
class='a b'an element can carry multiple space-separated classes
Higher specificity than type selectors

Class Selector

The .highlight class is reused on multiple elements.

.highlight {
  color: white;
  background: steelblue;
  padding: 4px 8px;
  border-radius: 4px;
}

ID Selector

An ID selector targets a single element with a matching id attribute. Each ID must be unique on the page, only one element should carry a given ID.

`#idName`

ID selectors start with a hash (#). Because an ID must be unique, this selector always targets at most one element.

#header { }targets the single element with id='header'
IDs must be unique, do not use the same ID on two elements
Higher specificity than class selectors, harder to override
Prefer classes for styling; reserve IDs for JavaScript hooks or anchor links

ID Selector

The #page-title ID targets only one specific element.

#page-title {
  color: crimson;
  font-size: 28px;
  border-bottom: 2px solid crimson;
  padding-bottom: 8px;
}

Universal Selector (*)

The universal selector * matches every element on the page. It is most commonly used in CSS resets.

`* (Universal)`

The asterisk (*) selects all elements. It is useful for applying a baseline reset to remove browser default margins and padding.

* { }applies to every single element on the page
Most common use: box-sizing reset and margin/padding reset
Use carefully, it targets everything including html, body, and all nested elements
Lowest specificity of all selectors

Universal Selector

* removes default browser margin and padding from every element.

/* Common CSS reset using the universal selector */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Attribute Selectors

Attribute selectors target elements based on the presence or value of an HTML attribute. They are written inside square brackets [ ].

`[attr] and [attr=value]`

Attribute selectors let you style elements based on their HTML attributes, very useful for form inputs, links, and custom data attributes.

[disabled]any element that has the disabled attribute present
[type='text']elements where type is exactly 'text'
[href^='https']links whose href starts with 'https'
[class*='btn']elements whose class contains the word 'btn'

Attribute Selectors

Styling elements by their HTML attributes.

input[type='text'] {
  border: 2px solid steelblue;
  padding: 4px 8px;
  display: block;
  margin-bottom: 8px;
}

/* Links that start with https */
a[href^='https'] {
  color: green;
  font-weight: bold;
}

Combinators

Combinators describe the relationship between two selectors. They let you target elements based on where they sit in the HTML structure relative to other elements.

Combinator	Symbol	Targets	Example
Descendant	space	All descendants at any depth	div p
Child	>	Direct children only	div > p
Adjacent Sibling	+	Immediately following sibling	h2 + p
General Sibling	~	All following siblings	h2 ~ p

Descendant Combinator (space)

A space between two selectors targets all matching elements nested anywhere inside the first element, children, grandchildren, and deeper.

`A B { }`

Targets every B that is a descendant of A at any depth, not just direct children.

div p { }all
inside any
, no matter how deep
Most commonly used combinator
Can accidentally match more elements than intended in deeply nested HTML
Use the child combinator (>) when you only want direct children

Descendant Combinator

Both paragraphs inside .card are targeted regardless of depth.

/* Targets ALL <p> inside .card at any depth */
.card p {
  color: steelblue;
  font-weight: bold;
}

Child Combinator (>)

The > combinator targets only the direct children of an element, grandchildren and deeper are not included.

`A > B { }`

Targets only B elements that are immediate children of A. Elements nested deeper than one level are skipped.

ul > li { }only
directly inside the
- More precise than the descendant combinator
- Use it to avoid accidentally styling deeply nested elements

Child Combinator (>)

Only the direct child <p> is styled, not the grandchild.

/* Only direct <p> children of .parent */
.parent > p {
  color: green;
  font-weight: bold;
}

Adjacent Sibling Combinator (+)

The + combinator targets the element that immediately follows another element at the same level.

`A + B { }`

Targets only the single B element that comes directly after A. Both must share the same parent.

h1 + p { }the first
immediately after an
Only one element is selected, the very next sibling
If any other element sits between A and B, B is not selected
Common use: style the first paragraph after a heading differently

Adjacent Sibling (+)

Only the paragraph immediately after the heading is styled.

/* Only the <p> right after an <h2> */
h2 + p {
  color: steelblue;
  font-weight: bold;
}

General Sibling Combinator (~)

The ~ combinator targets all siblings that follow an element, not just the immediate one.

`A ~ B { }`

Targets all B elements that follow A as siblings, whether adjacent or further down, as long as they share the same parent.

h2 ~ p { }all
siblings that come after the
Unlike + it matches multiple following siblings, not just one
Only matches elements that come AFTER A, elements before A are not selected

General Sibling (~)

All <p> siblings after the <h2> are targeted.

/* All <p> siblings that follow an <h2> */
h2 ~ p {
  color: purple;
  font-style: italic;
}

Grouping Selectors

When multiple selectors share the same styles, separate them with a comma to apply the rule to all of them at once, keeping your CSS DRY (Don't Repeat Yourself).

`A, B, C { }`

Grouping applies the same declaration block to multiple selectors. It is equivalent to writing the same rule separately for each.

h1, h2, h3 { }all three headings share the same rule
Each selector in the group is separated by a comma
Any selector type can be grouped, elements, classes, IDs, or combinators
If one selector in the group is invalid the browser skips only that one

Grouping Selectors

h1, h2, h3, and .note all share the same color rule.

/* All headings and .note share this rule */
h1, h2, h3, .note {
  color: navy;
  font-family: Arial, sans-serif;
}

Knowledge Check

1. Which selector targets every element on the page?

2. What does the selector `div > p` target?

3. Which selector targets an <input> with type='text'?

4. What does the adjacent sibling combinator (+) do?

5. Which selector correctly groups h1 and h2?

Previous Next