Easy-Micro

LANGAGE Langage CSS
Sé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.

CSS 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; }

CSS 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; }

CSS 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 :

    1. 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.
    2. 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; }
    3. 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; }

CSS 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
Autres exemples :
<style>
[class*="col-"] { border: 1px solid black; }
</style>

<div class="col-lg-4">4 colonnes</div>
<div class="col-lg-8">8 colonnes</div>
Soit, toute les classes dont l'attribut commence par col- auront une bordure noir.

< Page précédente LANGAGE CSS Page suivante >