Results for “Interaction selectors”
Small, practical examples. Search by task or narrow things down below.
Alternate row backgrounds with a structural selector
CSS: Nth-child counts sibling positions starting at one.
CSS✓ Tested
Change a control’s appearance on hover
CSS: Hover applies while a pointing device is positioned over the element.
CSS✓ Tested
Display a hint for a truly empty container
CSS: The empty selector requires no element or text children, including whitespace text nodes.
CSS✓ Tested
Highlight a group containing keyboard focus
CSS: Focus-within matches a parent when any descendant has focus.
CSS✓ Tested
Show a pressed pointer state
CSS: Active applies during the pointer press rather than after the click has finished.
CSS✓ Tested
Style a card based on a selected descendant
CSS: Has matches the parent when its relative selector finds a checked control inside it.
CSS✓ Tested
Style a control that fails native validation
CSS: Invalid reflects the input’s current constraint-validation result.
CSS✓ Tested
Style content associated with a checked option
CSS: The adjacent-sibling selector connects a checked control with its following label text.
CSS✓ Tested
Style placeholder text independently of entered text
CSS: The placeholder pseudo-element affects the hint, while the input rule styles the actual value.
CSS✓ Tested
Visually distinguish a disabled control
CSS: The disabled pseudo-class follows the control’s actual disabled state.
CSS✓ Tested
Control a native dialog through a reference
Control a native dialog through a reference with a standalone Angular component and explicit browser behavior.
Angular✓ Tested
Focus an input through a ref
Focus an input through a ref with a small React component and explicit browser behavior.
React✓ Tested