Différents types de sélecteurs

Bienvenue à ce nouveau cour .Nous avons vu ensemble dans le tuto précédant syntaxe de base. Dans ce tuto , nous allons voir Les sélecteurs définissent les éléments sur lesquelles s’applique un ensemble de règles CSS..

Sélecteur multiple
Sélecteur universel
Sélecteur d’éléments imbriqués
Sélectionner des éléments HTML en CSS grâce à leurs attributs id et class
Sélecteurs CSS avancés avec les pseudo-classes

Sélecteur multiple

Il est également possible d’appliquer le style à plusieurs balises en séparant le nom de ces balises par une virgule (,). La syntaxe d’un tel sélecteur, appelé sélecteur multiple, est la suivante :

Sélecteur universel

Grâce au sélecteur universel (« * ») il est possible de définir un style s’appliquant à tous les éléments HTML. La syntaxe du sélecteur universel est la suivante :

*{color:blue;
font-family:Arial;
}

Sélecteur d’éléments imbriqués

Il est possible de sélectionner une balise dans un contexte donné, c’est-à-dire en fonction des éléments qui l’entourent, grâce aux sélecteurs sélecteurs contextuels.

Il existe plusieurs type de sélecteurs contextuels :

Le sélecteur d’éléments imbriqués permet de créer une règle ne s’appliquant que lorsque un élément Y est imbriqué dans un élément X. Sa syntaxe est la suivante : selecteur_X selecteur_Y { /* style; */ }Soit le code HTML suivant :

<p> <i> Attention </i>, ceci est un <b> avertissement </b> </p> <b> Prière d'en tenir compte </b>

La règle suivante ne sélectionne que le mot « avertissement » (le seul entouré de balises , elles-mêmes imbriquées dans une balise) :

P B { font-weight: bold; color: red; }

Le sélecteur d’éléments consécutifs permet de créer une règle ne s’appliquant que lorsque un élément Y suit immédiatement un élément X. Sa syntaxe est la suivante :selecteur_X + selecteur_Y { /* style; */ }Soit le code HTML suivant :

<p> <i> Attention </i>, ceci est un <b> avertissement </b> </p> <b> Prière d'en tenir compte </b>

La règle suivante ne sélectionne que le mot « avertissement » (le seul entouré de balises , elles-mêmes suivant une balise ) :

I + B { font-weight: bold; color: red; }

Le sélecteur 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. Sa syntaxe est la suivante :selecteur_X > selecteur_Y { /* style; */ }Soit le code HTML suivant :

<p> <b><i> Attention </i></b>
, ceci est un <i><b> avertissement </b></i> </p> 
<b> Prière d'en tenir compte </b>

La règle suivante ne sélectionne que l’élément «  Attention  » (le seul entouré de balises , elles-mêmes directement imbriquées dans une balise ) :

P > B { font-weight: bold; color: red; }

Sélectionner des éléments HTML en CSS grâce à leurs attributs id et class

Souvent, nous ne pourrons pas nous contenter d’utiliser des sélecteurs CSS simples éléments pour mettre en forme nos pages. En effet, nous voudrons appliquer des styles particuliers à certains éléments d’un type (certains paragraphes par exemple) et pas à tous.

Pour appliquer des styles particuliers à un élément en particulier ou à une groupe d’éléments personnalisés, on peut s’appuyer sur des attributs id et class données à nos éléments en HTML

Pour cibler un élément portant un id en particulier en CSS, il va suffire d’indiquer le nom de l’id précédé par un # comme ceci : #nom_id.

Pour appliquer des styles à une classe, il va suffire en CSS d’indiquer le nom de l’attribut class précédé cette fois-ci par un . comme ceci : .nom_class.

<h1>Utilisation de ID et de CLASS</h1>
        
<p>Un premier paragraphe sans attribut</p>
<p class="gras">Un paragraphe avec un attribut class</p>
<p id="fond-orange">Un paragraphe avec un attribut id</p>
<p class="gras" id="bleu">Un paragraphe avec une classe et un id</p>

p{
    width: 80%; /*80% de leur élément parent en largeur*/
    border: 5px double #bbb; /*Bordure double*/
    padding: 10px /*Marges intérieures de 10px*/
}

.gras{
    font-weight: bold; /*Texte en gras*/
}

#fond-orange{
    background-color: orange; /*Fond en orange*/
}

#bleu{
    color: blue; /*Texte de couleur bleue*/
}

Pour rappel, la différence entre les attributs id et class en HTML est que chaque id doit être unique dans une page (chaque id doit posséder une valeur unique) tandis qu’on peut tout à fait attribuer la même valeur à différents attributs class pour différents éléments.

De plus, notez qu’il est tout à fait possible d’ajouter un id et un ou plusieurs attributs class à un même élément HTML.

<h1 class="orange">Utilisation de ID et de CLASS</h1>
        
<p>Un premier paragraphe sans attribut</p>
<p class="orange">Un paragraphe avec un attribut class</p>
<p class="orange gras">Un paragraphe avec deux attributs class</p>
<p class="orange bordure">Un autre paragraphe avec deux attributs class</p>
<p class="orange gras bordure">Un paragraphe avec trois attributs class</p>

p{
    width: 80%; /*80% de leur élément parent en largeur*/
    padding: 10px /*Marges intérieures de 10px*/
}


.orange{
    color: orange; /*Texte de couleur orange*/
}

.gras{
    font-weight: bold;
}

.bordure{
    border: 5px double #bbb; /*Bordures doubles*/
    border-radius: 5px; /*Bordures légèrement arrondies*/
}

Sélecteurs CSS avancés avec les pseudo-classes

Les pseudo-classes en CSS permettent de sélectionner des éléments pour une règle CSS en fonction d’un état précis qui peut leur être attribué, mais qui n’est pas inscrit dans le document HTML.

Il existe une multitude de pseudo-classes que vous pouvez utiliser pour affecter un élément donné selon l’état dans lequel il se trouve.

Une pseudo-classe est composée d’un mot-clé précédé par le caractère « : » et qui s’ajoute à la suite d’un autre sélecteur CSS sans espace.

Parmi les pseudo-classe les plus couramment utilisés ont retrouvera :

:hover : Permet d’affecter des déclarations CSS à un élément lorsque l’utilisateur le survole avec un pointeur (exemple : pointeur de souris d’ordinateur)
:visited : Permet de changer l’apparence d’un lien après que celui-ci ait été visité par l’utilisateur.
:checked : Peut être appliqué à une entrée (input) de type bouton radio, case à cocher ou option pour modifier son aspect lorsque celle-ci est cochée ou active.
:active : Permet de sélectionner un élément qui a été activé par l’utilisateur
:focus : Permet de cibler un élément uniquement lorsqu’il reçoit le focus.
:not() : C’est une pseudo-classe de négation qui prend un sélecteur en argument à ajouter entre les « ( ) » de la pseudo-classe et qui permet de ne pas prendre en compte le sélecteur donné en argument dans le sélecteur général de la règle CSS. Le sélecteur donné en argument ne peut pas être suivi d’une pseudo-classe de négation ou cibler de pseudo-élément.
:nth-child(an+b) : Permet de cibler les « an+b » éléments du sélecteur donné dans l’arbre du document.

TutoForYou