Le Blog Tomsy web a récemment sorti un article présentant les 30 sélecteurs CSS à connaître absolument. Je tenais à faire partager cet article de valeur qui offre plein d'enseignements à tout ceux qui pensent maîtriser profondément les feuilles de style.
Tout webmaster peut se considérer bon intégrateur dès qu'il pense maitriser un peu l'(x)HTML et le CSS. Or, il est fort probable que de nombreux sélecteurs méconnus ne soient jamais utilisés et qu'ils soient remplacés par des classes créées sur-mesure pour répondre à certains besoins. N'ayant pas la science infuse, j'avoue que certains sélecteurs présentés dans l'article du blog de Tomsy web m'étaient inconnus, et c'est avec un grand plaisir que je les ai appris.
Voici quelques exemples de sélecteurs et pseudo-class utiles mais pourtant peu utilisés :
- - X[nom-attribut] est utilisé pour tout élément ayant un attribut correspondant à "nom-attribut".
- * Par exemple, img[alt] { color : #000000; }. Dans ce cas, toutes les balises images contenant un attribut ALT seront en noir.
- - X[href*="texte"] est utilisé pour attribuer un style à tous les éléments X ayant le contenu "texte" dans son href.
- * Par exemple, a[href*="internet-formation] { color : #cccccc; }. Ici, tous les liens contenant "internet-formation" seront en gris, comme www.internet-formation.fr ou annuaire.internet-formation.fr, etc.
- - input[type=radio]:checked { color : #f1f1f1 } utilise un sélecteur et une pseudo-class "checked" pour attribuer un style particulier à tous les champs de type radio (bouton rond à cocher) lorsqu'ils sont sélectionner par l'utilisateur.
- - X:hover est connu mais pourtant peu utilisé à proportion du nombre de site. Je fais partie des fervents défenseurs de la pseudo-class "hover" puisqu'elle permet de modifier un style au survol de la souris sur un élément choisi. Malheureusement, de nombreux sites et CMS négligent cette pseudo-class et retire une part de dynamisme à leur graphisme.
- * Exemple : img:hover { border:3px solid #f1f1f1 } permet d'appliquer une bordure blanche de 3 pixels de largeur au survol d'une image.
N.B. : Il est à noter qu'avant Internet Explorer 7, seul les éléments "a" (liens) acceptaient la pseudo-class "hover".