FR | EN
Installer
Documentation

Documentation - Pseudo-classes.

Découvrez Marssel : un framework CSS intelligent, configuration minimale, conçu pour des interfaces rapides et une expérience développeur simplifiée.

Démarrage

Concepts de base

Utilitaires

Composants

Pseudo-classes

Marssel permet d'appliquer des styles aux pseudo-classes CSS de manière simple et intuitive. Ajoutez simplement : suivi du nom de la pseudo-classe à la fin de votre classe pour cibler les états interactifs.

Syntaxe de base

Ajoutez la pseudo-classe après la valeur entre crochets :

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

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

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

Pseudo-classes multiples

Chaînez plusieurs pseudo-classes avec : :

Aperçu
  • 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>

Syntaxe compacte

Appliquez une pseudo-classe à plusieurs styles en une seule fois :

Aperçu
Plusieurs styles au hover 
<div class="card---[bg-[ffffff]+p-[20px]+shadow-[0_2px_4px_rgba(0_0_0_0.1)]]:hover">
    Plusieurs styles au hover
</div>

Pseudo-classes groupées

Utilisez la syntaxe [] pour grouper plusieurs propriétés :

Aperçu
Grouper plusieurs styles avec même pseudo-classe 
<div class="[bg-[red]+c-[fff]+p-[20px]]:hover">
    Grouper plusieurs styles avec même pseudo-classe
</div>

Ciblage d'éléments enfants (Sélecteur `>`)

Vous pouvez cibler des éléments enfants d'un élément donné en utilisant le sélecteur >. Cela est souvent combiné avec une pseudo-classe pour des états spécifiques.

Utilitaires Simples

Appliquez un style à l'enfant lorsque le parent est survolé, en utilisant des utilitaires simples :

Aperçu

Survolez-moi (L'enfant devient vert au survol du parent)

Survolez-moi Le span devient rouge à l'hover 

<p class="fs-[40px] c-[green]>span:hover">
    <span>Survolez-moi</span>
</p>
<p class="[fs-[20px]+c-[red]]>span:hover">
    Survolez-moi
    <span>Le span devient rouge à l'hover</span>
</p>

Avec Syntaxe Compacte

Lorsque vous utilisez la syntaxe compacte (---), le sélecteur d'enfant peut être placé soit dans le groupe de propriétés, soit après celui-ci.

Aperçu

Syntaxe 1 : Enfant dans le groupe Survolez-moi

Syntaxe 2 : Enfant après le groupe Survolez-moi 

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

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

Pseudo-classes communes

Aperçu
Lien
  • Premier
  • Dernier
  • Premier élément
  • Deuxième élément
  • Troisième élément
<!-- États interactifs -->
<a class="c-[2563eb]:hover">Lien</a>
<button class="bg-[e0e0e0]:active">Bouton</button>
<input class="border-[2px_solid_2563eb]:focus">

<!-- États de formulaire -->
<input class="border-[D41212]:invalid">
<input class="bg-[f0f0f0]:disabled">
<input class="c-[999999]:placeholder-shown">

<!-- États structurels -->
<ul>
    <li class="font-weight-[700]:first-child">Premier</li>
    <li class="font-weight-[100]:last-child">Dernier</li>
</ul>

<ul>
    <li class="ee ee---[bg-[lightgreen]+c-[white]]:last-of-type">Premier élément</li>
    <li class="ee">Deuxième élément</li>
    <li class="ee">Troisième élément</li>
</ul>

Pseudo-éléments

Ciblez les pseudo-éléments CSS de la même manière :

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

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

Avec breakpoints

Combinez pseudo-classes et responsive design :

Aperçu
Hover uniquement sur desktop
<!-- Hover uniquement sur desktop -->
<div class="md--bg-[ff0000]:hover">...</div>

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

Important avec pseudo-classes

Ajoutez ! pour forcer la priorité :

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

Exemples pratiques

Aperçu
Contenu
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 4
Item 5 ✓ Survolez
<!-- Bouton interactif -->
<button class="btn-pc-ex---[bg-[2563eb]+c-[ffffff]+p-[12px_24px]]:hover btn-pc-ex---[bg-[1d4ed8]+transform-[scale(0.5)]]:active">
    Cliquez-moi
</button>

<!-- Card avec effets -->
<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">
    Contenu
</div>

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

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

<!-- Test 1: nth-child pairs/impairs -->
<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: nth-child impairs -->
<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 spécifique -->
<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 avec formule -->
<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() avec classe -->
<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() avec pseudo-classe -->
<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: Combinaison nth-child + hover -->
<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() avec attribut -->
<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: Combinaison complexe -->
<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>

```
## Pseudo-classes supportées
```
:hover              Au survol
:focus              Au focus
:active             Lors du clic
:visited            Lien visité
:disabled           Élément désactivé
:enabled            Élément activé
:checked            Case cochée
:invalid            Formulaire invalide
:valid              Formulaire valide
:required           Champ requis
:optional           Champ optionnel
:first-child        Premier enfant
:last-child         Dernier enfant
:nth-child(n)       Nième enfant
:only-child         Enfant unique
:empty              Élément vide
:not()              Négation
:nth-last-child(n)  Nième enfant en partant de la fin
← Précédent Thèmes
Suivant → Performance

Réglages des cookies

Choisissez les données que vous souhaitez partager.

🙏 Les analytics nous aident à prioriser les bonnes fonctionnalités — données en Suisse, jamais revendues.

Essentiels Requis

Nécessaires au fonctionnement (session, sécurité).