Langage CSSSélecteurs CSS
Les différents sélecteurs CSS
On appelle sélecteur CSS (de balise ou d'éléments) le (ou les) mot(s) clés précédant l'accolade et servant à indiquer le ou les balises du document auxquelles le style s'applique.
Sélecteurs CSS multiple
- Afin d'appliquer un style CSS à plusieurs balises on écrit les nom des balises en les séparant par une virgule.
Syntaxe : selecteur_1, selecteur_2 { ...style... }
Exemple: p, td, div { text-align:left; }
Sélecteurs CSS universel
- Avec le sélecteurs CSS universel étoile (*), on peut définir un style pour tous les éléments.
Syntaxe : * { background-color:#ffffff; }
Sélecteurs CSS contextuels
- Permet de sélectionner une balise en fonction des éléments qui l'entourent.
Il existe trois types de sélecteurs CSS contextuels :
- Sélecteurs d'éléments imbriqués
Il permet de créer une règle ne s'appliquant que lorsque un élément Y est imbriqué dans un élément X.
Syntaxe: selecteur_X selecteur_Y { ...style... }
Exemple: div em { color: #c0c0c0; }
Soit, tout texte de style emphase dans un div sera gris. - Sélecteurs d'éléments consécutifs
Il permet de créer une règle ne s'appliquant que lorsque un élément Y suit immédiatement un élément X.
Syntaxe: selecteur_X + selecteur_Y { font-weight:bold; color:red; } - Sélecteurs d'éléments père-fils
Permet de créer une règle ne s'appliquant que lorsque un élément Y est fils direct d'un élément X. La règle ne s'applique pas si Y est encapsulé dans une ou plusieurs autres balises intermédiaires.
Syntaxe: selecteur_X > selecteur_Y { font-weight:bold; color:red; }
- Sélecteurs d'éléments imbriqués
Sélecteur d'attribut []
Les crochets CSS [] permettent de "cibler" un sélecteur sur un élément doté d'un attribut donné, ou même plus précisément selon la valeur de cet attribut.
Exemples :
- a[title] { color: pink; }
soit, tous les éléments <a> avec un attribut title seront rose - input[type="date"] { ... }
soit, tous les input qui ont un type date - [type="button"]:not(:disabled) { ... }
soit, tous les type button qui ne sont pas disabled
<style>
[class*="col-"] { border: 1px solid black; }
</style>
<div class="col-lg-4">4 colonnes</div>
<div class="col-lg-8">8 colonnes</div>