CSS Selectors — Visualiser les sélecteurs CSS de manière interactive

CSS Selectors — Si comme moi vous avez parfois des difficultés à distinguer la portée de certains sélecteurs CSS, ce site vous sera très utile. il suffit de sélectionner un sélecteur dans la liste et de regarder les éléments qui sont mis en évidence dans le marquage HTML qui sert d’exemple. Cerise sur le gâteau, la page précise les navigateurs compatibles et affiche la règle CSS en cours.

Exemple pour first-child

La règle CSS

#target p:first-child {font-weight: bold;}

Le marquage HTML

<div id="target">
    <h2>Where the Buggalo Roam</h2>
    <p>Alright, let's mafia things up a bit. Joey, burn down the ship. Clamps, burn down the crew. No! Don't jump! Dr. Zoidberg, that doesn't make sense.</p>
    <div>
        <p>Does anybody else feel jealous and aroused and worried?</p>
    </div>
    <h2>The Mutants Are Revolting</h2>
    <p>But, okay! I just want to talk. It has nothing to do with mating. Fry, that doesn't make sense.</p>
    <h2>Space Pilot 3000</h2>
    <p>Now, now. Perfectly symmetrical violence never solved anything.</p>
</div>

L’unique paragraphe sélectionné se trouve dans la balise div sans identifiant. Les sélecteurs disponibles sont : first-of-type, first-child, descendant, child, nth-child, adjacent sibling, general sibling, first-line, nth-of-type et last-of-type.

Via @dhoko_