Pseudo-classes

Basic syntax

Add the pseudo-class after the value in square brackets:

Preview

Hover

<!-- Hover -->
<div class="bg-[ff0000]:hover">...</div>

<!-- Focus -->
<input class="border-[2px_solid_0000ff]:focus">

<!-- Active -->
<button class="scale-[1.5]:active">...</button>

Multiple pseudo-classes

Chain multiple pseudo-classes with ::

Preview

First-child + Hover
second li
third li

<!-- Hover + Focus -->
<button class="bg-[00ff00]:hover:focus">...</button>

<!-- First-child + Hover -->
<li class="c-[ff0000]:first-child:hover">...</li>

Compact syntax

Apply a pseudo-class to multiple styles at once:

Preview

Several styles of the hover

<div class="card---[bg-[ffffff]+p-[20px]+shadow-[0_2px_4px_rgba(0_0_0_0.1)]]:hover">
    Several styles of the hover
</div>

Grouped pseudo-classes

Use the [] syntax to group multiple properties:

Preview

Group several styles with same pseudo-class

<div class="[bg-[red]+c-[fff]+p-[20px]]:hover">
    Group several styles with same pseudo-class
</div>

Targeting child elements (`>` selector)

You can target child elements of a given element using the > selector. This is often combined with a pseudo-class for specific states.

Simple Utilities

Apply a style to the child when the parent is hovered over, using simple utilities:

Preview

Hover over me (Child turns green on parent hover)

Hover over me The span turns red in winter

<p class="fs-[40px] c-[green]>span:hover">
    <span>Hover over me</span>
</p>
<p class="[fs-[20px]+c-[red]]>span:hover">
    Hover over me
    <span>The span turns red in winter</span>
</p>

With Compact Syntax

When using compact syntax (---), the child selector can be placed either within the property group or after it.

Preview

Syntax 1: Child in group Hover over me

Syntax 2: Child after group Hover over me

<p class="a---[fs-[40px]+c-[blue]>span]:hover">
    <span>Hover over me</span>
</p>

<p class="a2---[fs-[40px]+c-[red]]>span:hover">
    <span>Hover over me</span>
</p>

Common pseudo-classes

Preview

Link

First
Last

First element
Second element
Third element

<!-- Interactive States -->
<a class="c-[2563eb]:hover">Link</a>
<button class="bg-[e0e0e0]:active">Button</button>
<input class="border-[2px_solid_2563eb]:focus">

<!-- Form States -->
<input class="border-[D41212]:invalid">
<input class="bg-[f0f0f0]:disabled">
<input class="c-[999999]:placeholder-shown">

<!-- Structural states -->
<ul>
    <li class="font-weight-[700]:first-child">First</li>
    <li class="font-weight-[100]:last-child">Last</li>
</ul>

<ul>
    <li class="ee ee---[bg-[lightgreen]+c-[white]]:last-of-type">First element</li>
    <li class="ee">Second element</li>
    <li class="ee">Third element</li>
</ul>

Pseudo-elements

Target CSS pseudo-elements in the same way:

Preview

Before

After

<!-- Before -->
<div class="content-[Hello_World_]:before">Before</div>
<div class="content-[★]:before">Before</div>

<!-- After -->
<div class="content-[→]:after">After</div>

With breakpoints

Combine pseudo-classes and responsive design:

Preview

Hover only on desktop

<!-- Hover only on desktop -->
<div class="md--bg-[ff0000]:hover">...</div>

<!-- Focus with breakpoint -->
<input class="lg--border-[2px_solid_0000ff]:focus">

Important with pseudo-classes

Add ! to force priority:

Preview

Important

<div class="bg-[ff0000]:hover!">...</div>

Practical examples

Preview

Content

Menu

Item 1 : nth-child(2n)

Item 2 ✓

Item 3

Item 4 ✓

Item 5

Item 6 ✓

Item 7

Item 8 ✓

Item 9

Item 10 ✓

Box 1 ✓ :nth-child(odd)

Box 2

Box 3 ✓

Box 4

Box 5 ✓

Card 1 :nth-child(3)

Card 2

Card 3 ✓

Card 4

Card 5

Tile 1 ✓ :nth-child(3n+1)

Tile 2

Tile 3

Tile 4 ✓

Tile 5

Tile 6

Tile 7 ✓

Tile 8

Tile 9

Tile 10 ✓

Link 1 - Hover :not(:hover) Link 2 - Hover Link 3 - Hover

Cell 1 nth-child() + :hover

Cell 2 ✓ Hover

Cell 3

Cell 4 ✓ Hover

Cell 5

Cell 6 ✓ Hover

Badge 1 :nth-last-child()

Badge 2

Badge 3 ✓

Badge 4 ✓

Badge 5 ✓

Item 1 ✓ Survolez

Item 2

Item 3 (skip)

Item 4

Item 5 ✓ Survolez

<!-- Interactive button -->
<button class="btn-pc-ex---[bg-[2563eb]+c-[ffffff]+p-[12px_24px]]:hover btn-pc-ex---[bg-[1d4ed8]+transform-[scale(0.5)]]:active">
    Click me
</button>

<!-- Card with effects -->
<div class="card---[bg-[red]+p-[24px]+rounded-[8px]+transition-[all_0.3s]+shadow-[0_8px_16px_rgba(0_0_0_0.1)]+c-[yellow]+transform-[translate(0_-4px)]]:hover">
    Content
</div>

<!-- Stylized input -->
<input class="w-[100%]+p-[12px]+border-[1px_solid_e0e0e0]:focus [border-[2563eb]+outline-[none]]:invalid border-[1px_solid_D41212]">

<!-- Active navigation -->
<a class="c-[333333]:hover [c-[2563eb]]:active font-weight-[700]">
    Menu
</a>

<!-- Test 1: nth-child even/odd -->
<div class="section">
    <div class="test-container">
        <div class="item---[bg-[3498db]+c-[white]+p-[15px]]:nth-child(2n)">Item 1 : nth-child(2n)</div>
        <div class="item">Item 2 ✓</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4 ✓</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6 ✓</div>
        <div class="item">Item 7</div>
        <div class="item">Item 8 ✓</div>
        <div class="item">Item 9</div>
        <div class="item">Item 10 ✓</div>
    </div>
</div>

<!-- Test 2: odd nth-child -->
<div class="section">
    <div class="test-container">
        <div class="box---[bg-[e74c3c]+c-[white]+p-[15px]]:nth-child(odd)">Box 1 ✓ :nth-child(odd)</div>
        <div class="box">Box 2</div>
        <div class="box">Box 3 ✓</div>
        <div class="box">Box 4</div>
        <div class="box">Box 5 ✓</div>
    </div>
</div>

<!-- Test 3: nth-child specific -->
<div class="section">
    <div class="test-container">
        <div class="card---[bg-[2ecc71]+c-[white]+p-[15px]]:nth-child(3)">Card 1 :nth-child(3)</div>
        <div class="card">Card 2</div>
        <div class="card">Card 3 ✓</div>
        <div class="card">Card 4</div>
        <div class="card">Card 5</div>
    </div>
</div>

<!-- Test 4: nth-child with formula -->
<div class="section">
    <div class="test-container">
        <div class="title---[bg-[9b59b6]+c-[white]+p-[15px]]:nth-child(3n+1)">Tile 1 ✓ :nth-child(3n+1)</div>
        <div class="title">Tile 2</div>
        <div class="title">Tile 3</div>
        <div class="title">Tile 4 ✓</div>
        <div class="title">Tile 5</div>
        <div class="title">Tile 6</div>
        <div class="title">Tile 7 ✓</div>
        <div class="title">Tile 8</div>
        <div class="title">Tile 9</div>
        <div class="title">Tile 10 ✓</div>
    </div>
</div>

<!-- Test 5: not() with class -->
<div class="section">
    <div class="test-container">
        <button class="btn---[bg-[95a5a6]+c-[white]+p-[15px]]:not(.active)">Bouton 1 ✓ :not(.active)</button>
        <button class="btn  active">Bouton 2 (active)</button>
        <button class="btn">Bouton 3 ✓</button>
        <button class="btn active">Bouton 4 (active)</button>
        <button class="btn">Bouton 5 ✓</button>
    </div>
</div>

<!-- Test 6: not() with pseudo-class -->
<div class="section">
    <div class="test-container">
        <a href="#" class="link---[c-[7f8c8d]+text-dec-[none]]:not(:hover)">Lien 1 - Survolez-moi :not(:hover)</a>
        <a href="#" class="link">Lien 2 - Survolez-moi</a>
        <a href="#" class="link">Lien 3 - Survolez-moi</a>
    </div>
</div>

<!-- Test 7: nth-child + hover combination -->
<div class="section">
    <div class="test-container">
        <div class="cell---[bg-[ecf0f1]+p-[15px]]:nth-child(even):hover cell---[bg-[red]+c-[white]]:hover">Cell 1 nth-child() + :hover</div>
        <div class="cell">Cell 2 ✓ Survolez</div>
        <div class="cell">Cell 3</div>
        <div class="cell">Cell 4 ✓ Survolez</div>
        <div class="cell">Cell 5</div>
        <div class="cell">Cell 6 ✓ Survolez</div>
    </div>
</div>

<!-- Test 8: not() with attribute -->
<div class="section">
    <div class="test-container" style="flex-direction: column;">
        <input type="text" class="input---[border-[2px_solid_red]+p-[10px]]:not(disabled)" placeholder="Input actif ✓ :not">
        <input type="text" class="input" placeholder="Input désactivé" disabled>
        <input type="text" class="input" placeholder="Input actif ✓">
    </div>
</div>

<!-- Test 9: nth-last-child -->
<div class="section">
    <div class="test-container">
        <div class="badge---[bg-[f39c12]+c-[white]+p-[15px]]:nth-last-child(-n+3)">Badge 1 :nth-last-child()</div>
        <div class="badge">Badge 2</div>
        <div class="badge">Badge 3 ✓</div>
        <div class="badge">Badge 4 ✓</div>
        <div class="badge">Badge 5 ✓</div>
    </div>
</div>

<!-- Test 10: Complex combination -->
<div class="section">
    <div class="test-container">
        <div class="complex---[bg-[16a085]+c-[white]+p-[15px]] complex---[bg-[red]!]:nth-child(odd):not(.skip):hover">Item 1 ✓ Survolez</div>
        <div class="complex">Item 2</div>
        <div class="complex skip">Item 3 (skip)</div>
        <div class="complex">Item 4</div>
        <div class="complex">Item 5 ✓ Survolez</div>
    </div>
</div>

```
## Supported pseudo-classes
```
:hover              On hover
:focus              In focus
:active             When clicking
:visited            Link visited
:disabled           Disabled item
:enabled            Activated item
:checked            Box checked
:invalid            Invalid form
:valid              Valid form
:required           Required field
:optional           Optional field
:first-child        First child
:last-child         Last child
:nth-child(n)       Nth child
:only-child         only child
:empty              Empty element
:not()              Negation
:nth-last-child(n)  Nth child from the end

Documentation - Pseudo-classes.

Startup

Basic concepts

Utilities

Components

Basic syntax

Multiple pseudo-classes

Compact syntax

Grouped pseudo-classes

Targeting child elements (`>` selector)

Simple Utilities

With Compact Syntax

Common pseudo-classes

Pseudo-elements

With breakpoints

Important with pseudo-classes

Practical examples

Documentation - Pseudo-classes.

Startup

Basic concepts

Utilities

Components

Pseudo-classes

Basic syntax

Multiple pseudo-classes

Compact syntax

Grouped pseudo-classes

Targeting child elements (`>` selector)

Simple Utilities

With Compact Syntax

Common pseudo-classes

Pseudo-elements

With breakpoints

Important with pseudo-classes

Practical examples

Cookie settings