CSS Selectors

This page contains elements that can be located using various CSS selectors. It also includes nested Shadow DOM levels and elements with different visibility states.

Scenario

Practice locating elements using ID, class, attribute, and combinatory CSS selectors.
Pierce through multiple levels of Shadow DOM to reach deeply nested elements.
Use :visible and :hidden pseudo-classes to filter elements by visibility state.

Playground

ID Selector

Class Selector

Attribute Selectors

External LinkActiveInactive

Combinatory Selectors

Item 1
Item 2 (special)
Item 3

First paragraph

Second paragraph (adjacent sibling)

Following span (general sibling)

Nth-child Selectors

Row 1, Cell 1	Row 1, Cell 2
Row 2, Cell 1	Row 2, Cell 2
Row 3, Cell 1	Row 3, Cell 2
Row 4, Cell 1	Row 4, Cell 2

Visibility Tests

Nested Shadow DOM

Locate elements inside multiple levels of Shadow DOM.