← Back to Examples

CSS Selectors Demo

This page demonstrates various CSS selectors. View the source code to see how each selector works!

1. Element Selector

This paragraph is styled using the element selector p { }

All paragraphs on this page share basic styling.

2. Class Selector

This is a normal paragraph.

This paragraph has the "highlight" class applied!

Classes can be reused on any element.

3. ID Selector

The main title at the top uses #main-title - notice the green color and border.

IDs should be unique - only one element per ID per page!

4. Grouping Selector

This h3 and h2 above share the same color

We used h2, h3 { } to style them together.

5. Descendant Selector

This paragraph is inside .container (has blue left border)

This nested paragraph is also a descendant (also has border)

This paragraph is outside .container (no border)

6. Child Selector

I am a direct child of .direct-parent (red and bold)

I am nested inside a div, not a direct child (not red)

7. Adjacent Sibling Selector

Adjacent Sibling Demo

This paragraph comes immediately after h3 (purple, larger)

This paragraph is not adjacent to h3 (normal)

8. Attribute Selector

9. Pseudo-class Selector

Hover over me to see the :hover effect!

10. Multiple Classes

Regular box with .box class
Box with both .box and .special classes

Selector Specificity Reference

Selector Type Example Specificity
Element p (0, 0, 1)
Class .highlight (0, 1, 0)
ID #main-title (1, 0, 0)
Combined div.container p (0, 1, 2)

← Back to Examples