CSS Selectors & Pseudo-elements Showcase

1. ::before and ::after Pseudo-elements

Text with stars added before and after.

2. ::first-letter Selector

Styled first letter of this paragraph.

3. ::first-line Selector

Styled first line of this paragraph for emphasis.

4. nth-child Selector

Item 1

Item 2 (even)

Item 3

Item 4 (even)

5. nth-of-type Selector

Paragraph 1

Paragraph 2 (styled)

Paragraph 3

6. first-child Selector

First child item

Second child item

7. last-child Selector

First item

Last item (styled)

8. hover Selector

Hover over this item

9. focus Selector

10. not Selector

This div is included in the :not rule

This div is excluded

11. empty Selector

This div is not empty

12. only-child Selector

Only child item, styled when it's the only child.

13. nth-last-child Selector