Cours par Webcam

Cours par Webcam

Formateur Web pour adultes depuis plus 11 ans, je vous propose des COURS collectifs par WEBCAM en LIVE pour booster vos connaissances et être autonome dans la création de site.

En savoir plus

CSS - texte

CSS - police

CSS - arrière-plan

CSS - boîte

CSS - mise en page

CSS - liste

CSS - tableau

CSS - animation

CSS - pseudo-class

CSS - pseudo-élément

CSS - les sélecteurs

Facebook
Twitter
LinkedIn

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é

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera

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)
(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é)

A lire aussi

tutowebdesign

Afficher du contenu au scroll

Afficher du contenu au scroll Voici un effet impressionnant et pourtant très facile à mettre en place sur vos pages. Le principe consiste à faire

Lire »