The snippet library.
Small, practical examples. Search by task or narrow things down below.
Stack columns on small screens
Change a two-column CSS grid to one column at a viewport breakpoint.
CSS✓ Tested
Stack flex items vertically
CSS: Flex-direction column makes the main axis vertical.
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 list markers
Set marker color separately from list text using CSS ::marker.
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
Style supporting text in italics
CSS: Font-style changes presentation without adding semantic emphasis by itself.
CSS✓ Tested
Target a unique element by ID
CSS: Learn how to target a unique element by ID in a complete browser example.
CSS✓ Tested
Target an element by class
CSS: Learn how to target an element by class in a complete browser example.
CSS✓ Tested
Truncate a single line
Combine CSS overflow and ellipsis for a constrained single line.
CSS✓ Tested
Underline meaningful text
CSS: Learn how to underline meaningful text in a complete browser example.
CSS✓ Tested