Results for “compute”
Small, practical examples. Search by task or narrow things down below.
Space items with gap
Use CSS gap instead of margins between flex children.
CSS✓ Tested
Span a grid item across multiple columns
CSS: Grid-column span counts tracks and includes the gaps between them.
CSS✓ Tested
Specify a flex item’s initial main size
CSS: Flex-basis establishes the starting main-axis size before growth or shrinkage.
CSS✓ Tested
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