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_
Articles sur le même sujet
PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car Il n'y pas d'amour, il n'y a que des preuves d'amour
(Jean Cocteau) ;) Merci d'avance.
Afin de satisfaire le plus grand nombre, j'ai ajouté
un bouton Flattr parce que vous le valez bien ;)
Bonjour,
Le site à l’air sympa, mais les compatibilité navigateurs semblent erronées ? Si mes souvenirs sont bon, :first-child ne fonctionne pas sous ie < 8 … si ?
Cordialement,
Si si, first-child fonctionne à partir de IE7 en mode « static » cf. http://www.quirksmode.org/css/contents.html
Ah! merci pour la précision ça devient plus intéressant :)
Bonjour Bruno,
Toujours pas de Bouton pour twitter tes articles ! :)
Merci pour le billet en tout cas
Pas de bol, je les ai enlevé il y a quelques jours :-)
[...] CSS selectors – FF13 – Developper CSS Selectors Level 3 – A Quick Reference – FF13 – Developper CSS Selectors — Visualiser les sélecteurs CSS de manière interactive – FF13 – Developper One possibility is when you want style with "states." When the page has a certain hash, [...]
[...] 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… [...]