Explain the different types of CSS selectors

beginner

Re-explain

CSS selectors pick out elements or parts of elements by their features, their place in the document, or their state.

Element, class and ID selectors match names such as div, .classname and #idname.
Attribute selectors match on an attribute, as in [type="text"].
Combinators relate two elements.
- The descendant combinator in div p matches at any depth.
- The child combinator in div > p matches direct children only.
- The adjacent sibling in h2 + p is the p right after an H2 heading.
- The general sibling in h2 ~ p is any later p sibling of an H2 heading.
A pseudo-class such as :hover matches a state, and a pseudo-element such as ::before targets part of an element.

Rewriting in plainer words…

This answer doesn't lend itself to a diagram - it reads best . No credits were charged.

Why there's no diagram: “”

The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓

The diagram below the answer is the concept . Jump to it ↓

Tailored explanation · switch back to · ·

What should the new diagram focus on?

How well did you know this?

AI:

Saved in this browser - sign in to keep your review list.

How should your speech become text?

Listening… your words appear above as you speak - tap Stop when you're done.

Recording · cr - tap Stop & transcribe when you're done.

Transcribing with AI…

Voice:

Keep going - a few more words and AI can grade it.

Interview lens

Likely follow-ups, what you can say, and the weak answers to avoid.

Want a quick review of the fundamentals? See the CSS3 cheatsheet.

Pro · $10/mo

Full answers, code samples, and AI explanations that go simpler or deeper. Cancel anytime.