Sélecteur CONTEXTUEL

Rôle

Le sélecteur contextuel permet de cibler les éléments de la page à partir d’un motif de recherche.

Pour constituer ce motif vous pouvez combiner plusieurs types de sélecteur (descendant, enfant, balise..) séparés par un espace. C’est le dernier sélecteur de cette liste qui est concerné par la feuille de style.

Le sélecteur contextuel est donc le chemin hiérarchique qui mène au dernier sélecteur.

#header div p.gras{
    color: red;
}

Code HTML

<div id="header">
<p> lorem impsum ..</p>
<p class="gras"> lorem impsum ..</p>
<p> lorem impsum ..</p>
<p class="gras"> lorem impsum ..</p> 
</div>

Note : un sélecteur contextuel est soumis à certaines règles de cascade. La cascade est la gestion des conflits. En effet un élément HTML peut être soumis à plusieurs feuilles de style différentes

Voici les règles de priorités rangées par ordre d’importance (du plus important au moins important)

•  La priorité absolue prend le dessus sur tout : il est appelé par l’instruction !important placé à la fin de la valeur.

  p{
      color: red !important;
  }

•  Le css appelé dans l’objet HTML avec l’attribut style est prioritaire sur les autres sélécteurs. Lorsque le changement se style se fait avec la langage Javascript (obj.style.color = « red »), ce dernier génère dynamique l’attribut style au sein de l’objet HTML.

  <p style="color:red"> lorem ipsum </p>

•  Le sélecteur d’identifiant ID est prioritaire sur le sélecteur contextuel (s’il ne contient pas lui-même un selecteur ID).

  #paragraphe1{
      color: red;
  }

•  Le sélecteur de class est prioritaire sur le sélecteur contextuel (s’il ne contient pas lui-même un selecteur de class). Il est cependant moin prioritaire que le sélecteur ID.

  .gras{
      color: red;
  }

•  Le sélecteur contextuel plus spécifique est prioritaire sur un autre sélecteur contextuel moin spécifique. La spécificité correspond au nombre de sélecteurs combinés. Dans l’exemple ci-dessous, le premier sélecteur, qui contient 5 sélecteurs, sera prioritaire sur le second qui contient que 4 sélecteurs (même s’il est appelé avant).

  #header section div p.gras{
      color: red;
  }
  #header div p.gras{
      color: green;
  }

•  A spécificité égale, c’est le sélecteur contextuel de proximité (le dernier appelé) qui sera prioritaire. Dans cet exemple, le deuxième sélecteur annule le premier

  #header div p.gras{
      color: red;
  }
  #header div p.gras{
      color: green;
  }

Testez vous-même ce sélecteur

Utilisez Codepen.

– Le code CSS

form p .sansBordure{
  border: none;
  background-color: silver;
}

– Le code HTML

<form action="">
  <p>
    <label for="pseudo">Pseudo : < /label>< br>
    <input type="text" id="pseudo" class="sansBordure" /> < br>
    <label for="message">Message :</label> <br>
    <textarea name="" id="message" class="sansBordure">< /textarea> < br>
    <input type="button" value='ok' />
    <input type="reset" />
  </p>
</form>

Résultat

Dans cet exemple, le sélecteur contextuel combine un sélecteur de balise (form), un deuxième sélecteur de balise (p) et un sélecteur de class (.sansBordure)

Compatibilité

La compatibilité du sélecteur contextuel va dépendre des sélecteurs que vous utiliserez dans la composition.

A voir aussi

#id (sélecteur id)
.class (sélecteur class)
p (sélecteur balise)
p,h1 (sélecteur multiple)
* (sélecteur universel)
p a (sélecteur descendant)
p>a (sélecteur enfant)
[] (sélecteur d’attribut)
[attribut=valeur]
[attribut~=valeur]
[attribut|=valeur]
[attribut^=valeur]
[attribut$=valeur]
[attribut*=valeur]
h1+p (sélecteur adjacent)
h1~p (sélecteur de proximité)