Quelques sélecteurs utiles

Il y a des sélecteurs CSS qu'on utilise peu souvent et qu'on a intérêt à connaître. En voici quelques-uns

Les frères (siblings) directs (+)

Pour cibler le frère d'un élément, il faut utiliser le symbole +. Des frères sont des balises de même niveau, côte à côte.

Voici le code :

h1 + h2 {
   margin-top:0;
}

Les styles seront appliqués uniquement à la balise h2 s'il suit directement la balise h1.

Compatibilité

La prise en charge de ce sélecteur est intéressante, puisque Firefox 1+, Safari 1.3+, Opera 9.2+, Chrome 2.0+ et IE 7+ comprennent ce sélecteur.
Petite nuance pour Safari qui a un problème d'interprétation lorsqu'on cible le frère d'un élément en hover jusqu'à la version 5.


Les frères indirects (~)

Tout comme les frères directs, les frères indirects sont des balises de même niveau, mais qui peuvent avoir un autre frère qui les séparent. Il faut utiliser le symbole ~ afin de cibler ces frères.

Voici le code :

h1 ~ h2 {
   margin-top:0;
}

Ceci stylera tous les h2 qui suivent un h1 (au même niveau). Même s'il est séparé par des paragraphes.

Compatibilité

La prise en charge est plutôt large pour un sélecteur CSS3, puisque Firefox 1+, Safari 3.1+, Opera 9.2+, Chrome 2.0+ et IE 7+ comprennent ce sélecteur.
Petite nuance cependant pour IE 7 qui n'aime pas qu'un commentaire HTML vienne s'interposer entre des frères, et pour IE 8 qui ne ciblera que les 298 premiers éléments.


Les descendants directs (>)

Pour cibler les enfants d'un élément, nous utilisons simplement un espace. Mais pour cibler un enfant directement en dessous, par exemple, obtenir les <li> de premier niveau d'une liste à puce. Il suffit d'utiliser le symbole >.

Voici le code :

ul > li {
   border: 1px solid #000;
}

Ceci stylera uniquement les <li> de premier niveau. Si on prend le code suivant :

<ul>
   <li>Premier niveau</li>
   <li>
      <ul>
         <li>Deuxième niveau</li>
      </ul>
   </li>
</ul>

Le <li> de deuxième niveau ne sera pas touché.

Compatibilité

La prise en charge est bonne, puisque IE 7+ et les autres navigateurs comprennent ce sélecteur.


Les attributs

Compatibilité

La prise en charge est bonne, puisque IE 7+ et les autres navigateurs comprennent les sélecteurs utilisant les attributs suivants.

1) Cibler un attribut présent

On peut rechercher des éléments ayant un certain attribut spécifié, peu importe sa valeur. Il suffit de saisir l'attribut désiré entre crochets.

Voici le code :

a[title] {
	font-weight:bold;
}

2) Cibler un attribut ayant une valeur précise

On peut également rechercher des éléments ayant un attribut avec une valeur spécifique.

Voici le code :

a[title="foo"] {
	color:red;
}

3) Cibler un attribut contenant une chaine de caractères (*=)

On peut rechercher des éléments avec un attribut contenant une chaine de caractères, peu importe où cette chaine est située.

Voici le code :

a[href*="andyharvey.ca"] {
	color:green;
}

4) Cibler un attribut commencant par une chaine de caractères (^=)

On peut rechercher des éléments avec un attribut commencant par une chaine de caractères précise.

Voici le code :

a[href^="http"] {
	background: url(path/to/external/icon.png) no-repeat;
	padding-left: 10px;
}

5) Cibler un attribut finissant par une chaine de caractères ($=)

On peut rechercher des éléments avec un attribut finissant par une chaine de caractères précise.

Voici le code :

a[href$=".jpg"] {
	background: url(path/to/fileimage/icon.png) no-repeat;
	padding-left: 10px;
}

6) Cibler un attribut ayant une valeur précise parmis plusieurs valeurs (~=)

Comme au point 2, on peut rechercher des éléments avec une valeur d'attribut précise, mais cet attribut pourrait contenir plus d'une valeur séparées par un espace.

Prenons cet exemple :

<a href="path/to/image.jpg" data-infos="externe image">Exemple de lien</a>

Et voici le code :

a[data-info~="externe"] {
	color: red;
}

a[data-info~="image"] {
	border: 1px solid black;
}

Les champs input de formulaire (JQuery seulement)

Lorsqu'on veut valider un formulaire, on peut vouloir obtenir tous les champs de ce formulaire. Pas uniquement les champs <input>, mais aussi les textarea, button, select, etc. JQuery met à notre disposition le sélecteur suivant :

$('form :input');

À ne pas confondre avec simplement :

$('form input');

Les deux points devant input font toute la différence.

Source

Source 2

Voici le code en exemple

Ajout 22 avril 2012 :
Voici un site qui regroupe beaucoup de sélecteurs pour diverses situations : http://vogtjosh.com/selectors/