Developer
Intros
How it works
API reference
Turbo CSS
Fundamentals
Utilities
Selectors
Child
Next sibling
After sibling
Descendant
Self
Viewport width
Device type
Hoverable
Empty
Not empty
Even
Odd
First
Not first
Last
Not last
Hover
Focus
Active
Visited
Valid
Invalid
Enabled
Disabled
Checked
Unchecked
Mode
Placeholder
Selection
Before
After
Thumb
Tags
Download
Turbo UI
Turbo Playground
License
Blog
Developer
Intros
How it works
API reference
Turbo CSS
Blog
Fundamentals
Utilities
Selectors
Download
Turbo UI
Turbo Playground
License
Combinators
Child
Next sibling
After sibling
Descendant
Self
Viewport
Viewport width
Device
Device type
Hoverable
DOM Structure
Empty
Not empty
Even
Odd
First
Not first
Last
Not last
Interaction
Hover
Focus
Active
Visited
State
Valid
Invalid
Enabled
Disabled
Checked
Unchecked
Mode
Pseudo elements
Placeholder
Selection
Before
After
Thumb
Tags
Tags
Even
Syntax
Class
Properties
{...}
even:
{...}
{...}
:nth-child(even)
{...}
<div class="t1 w-full px-8 py-2 bg-c-white even:bg-c-gray-800 even:color-white">odd</div> <div class="t1 w-full px-8 py-2 bg-c-white even:bg-c-gray-800 even:color-white">even</div> <div class="t1 w-full px-8 py-2 bg-c-white even:bg-c-gray-800 even:color-white">odd</div> <div class="t1 w-full px-8 py-2 bg-c-white even:bg-c-gray-800 even:color-white">even</div>
Specification test cases
The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Give even elements a subtle gray background.
t1 even:bg-c-hex-F8F8F8
.t1.even\:bg-c-hex-F8F8F8:nth-child(even) { background-color: #F8F8F8; }