CSS Selectors Examples

1. Universal Selector (*)

Applies to all elements.

2. Element Selector (p)

This paragraph is styled with the element selector.

3. ID Selector (#id)

This uses the ID selector.

4. Class Selector (.class)

This paragraph is highlighted using a class selector.

5. Group Selector (h2, h3)

This h3 is green because of group selector.

6. Descendant Selector (div p)

This is inside a div → styled with descendant selector.

7. Child Selector (div > span)

This span is a direct child of div.

8. Adjacent Sibling Selector (h3 + p)

Heading 3

This paragraph is styled because it comes right after h3.

9. General Sibling Selector (h2 ~ p)

This paragraph is styled because it comes after an h2.

10. Attribute Selector (a[target="_blank"])

Google (opens in new tab)
OpenAI (normal link)