À quel élément s’applique ce style ? (sélecteurs CSS)

Pour mettre en forme une page Web, on utilisera une combinaison d'éléments HTML et de règles CSS.

Les éléments HTML peuvent être stylisés de différentes façons. Dans cet article, je vous expose les grandes lignes qui vous aideront à bien cibler le ou les éléments qui seront affectés par un style donné.

▼Publicité

Balise vs class vs id

Dans sa forme la plus simple, le style sera appliqué directement à une balise, à une classe ou à un identifiant. Le choix de l'un ou de l'autre dépend de la portée que l'on désire donner au style.

  • Si on choisit de styliser une balise, toutes les occurrences de cette balise dans la page se verront attribuer ce style. Par exemple, on pourrait vouloir que tous les <p> de la page Web aient une marge supérieure de 10 pixels et une marge inférieur de 10 pixels.

  • Si on choisit de styliser une classe (class), le style s'appliquera à tous les éléments HTML auxquels cette classe est affectée. Par exemple, on pourrait vouloir que tous les éléments auxquels la classe important a été affectée soient surlignés en jaune.
  • Si on choisit de styliser un identifiant (id), le style ne s'appliquera qu'à l'élément portant cet identifiant. Par exemple, on pourrait vouloir que seul l'élément portant l'identifiant menuprincipal se voit attribuer un style donné.

Voici comment y parvenir en pratique.

Balise

Si le style doit être appliqué à toutes les occurances d'une balise donnée, simplement nommer la balise dans la feuille de style.

Ex : Dans le fichier HTML :

HTML

<h1>Loisirs</h1>

Dans la feuille de style :

CSS

h1 {

    ...

}

class

Si plusieurs éléments de la page Web doivent avoir un style donné, on peut utiliser une classe.

Pour référer à une classe du fichier HTML, on fera précéder son nom par un point dans la feuille de style.

Ex : Dans le fichier HTML :

HTML

<li class="menuactuel">

Dans la feuille de style :

CSS

.menuactuel {

    ...

}

id

Il est également possible d'affecter un style à une balise spécifique en utilisant son id. On fera précéder son nom par un # dans la feuille de style.

Ex : Dans le fichier HTML :

HTML

<section id="principal">

    ...

</section>

Dans la feuille de style :

CSS

#principal {

    ...

}

Format pour les balises imbriquées

Il est possible de définir un style particulier pour une balise imbriquée dans une autre. Par exemple, on pourra avoir un style pour <h1> imbriqué dans la section principal et un autre lorsque la balise est imbriquée dans la section secondaire.

Dans la feuille de style, il n'est pas possible d'imbriquer des éléments. Plutôt, on définiera le style en précisant la suite des éléments en laissant un espace entre les deux éléments.

Ex : Dans le fichier HTML (notez l'imbrication du <h1> dans le <section>) :

HTML

<section id="principal">

    ...

    <h1>Zone principale</h1>

    ...

</section>

Dans la feuille de style (notez qu'il n'y a pas d'imbrication des règles CSS, seule l'utilisation d'un espace indique l'imbrication dans le HTML) :

CSS

#principal h1 {

    ...

}

Formats pour définir plusieurs balises qui ne sont pas nécessairement imbriquées

Si plusieurs éléments doivent avoir le même format sans qu’il y ait nécessairement de lien entre eux, on pourra définir les formats communs en un seul temps en séparant les éléments par une virgule.

Ex : Dans la feuille de style :

CSS

/* définition des caractéristiques communes */

#principal h1, #principal h2 {

    ...

}

 

/* définition des caractéristiques propres */

#principal h1 {

    ...

}

 

/* définition des caractéristiques propres */

#principal h2 {

    ...

}

Dans cet exemple, les éléments h1 et h2 dans la balise dont le id est principal pourront avoir des caractéristiques communes, comme la police, par exemple. On définira ensuite la taille de chacune pour différencier les titres h1 des titres h2.

Format pour les éléments affectés par plusieurs classes

Parfois, on voudra appliquer plusieurs classes sur un élément. Par exemple, on pourrait avoir une division qui permet d'afficher un message d'information. On lui affectera la classe message, qui contient les règles CSS pour tous les types de message puis la classe information qui contient les règles pour les messages d'information.

Ex : Dans le fichier HTML (notez l'utilisation de l'espace pour séparer les deux classes) :

HTML

<div class="message information">

    ...

</div>

À la base, ceci suffit pour que les styles des deux classes soient appliqués à l'élément. Cependant, si on voulait ajouter un style précis pour les éléments qui contiennent à la fois ces deux classes, il serait possible de faire un ajout dans la feuille de style.

Dans la feuille de style (notez que les classes message et information appparaissent collées puisqu'elles s'appliquent au même élément) :

CSS

.message {

    ...

}

 

.information {

    ...

}

 

.message.information {

    ...

}

Sélecteurs d'attributs

On a vu qu'il était possible d'appliquer un style à toutes les occurances d'une balise donnée, par exemple styliser tous les titres h1. Mais comment fera-t-on pour styliser une boîte de saisie différemment d'un bouton, sachant que tous deux sont affichés à l'aide d'une balise input ? Ce sera possible grâce aux sélecteurs d'attributs qui consistent à placer entre crochets carrés le nom de l'attribut suivi de sa valeur.

Ex : Dans le fichier HTML :

HTML

<input type="text" id="usager" name="usager" />

...

<input type="submit" id="soumettre" name="soumettre" value="Soumettre" />

Ex : Dans la feuille de style (notez qu'il n'y a pas d'espace avant le crochet carré) :

CSS
input[type='text'] {

    ...

}

 

input[type='submit'] {

    ...

}

Pseudo-formats

Le pseudo-format permet de préciser un style pour une balise comprenant une caractéristique qu’il n’est normalement pas possible de définir par le HTML. Par exemple : un lien visité ou la première ligne d’un paragraphe.

Les caractéristiques pouvant être ciblées sont définies sur cette page :

« Pseudo-classes ». MDN. https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes

ou

« CSS Pseudo-elements ». W3Schools. http://www.w3schools.com/CSS/CSS_pseudo_elements.asp

Voici quelques exemples, pour vous mettre en appétit.

Ex : Pour que la couleur d'un lien soit différente lorsque le lien a déjà été visité :

Dans le fichier HTML :

HTML

<a href=...>...</a>

Dans la feuille de style (notez les deux points entre l’élément et sa caractéristique) :

CSS

a:visited {

    ...

}

Ex : Dans ce second exemple, on veut appliquer un format seulement au premier élément d'une liste.

Dans le fichier HTML :

HTML

<nav id="menuprincipal">

    <ul>

        <li>...</li>

        <li>...</li>

        <li>...</li>

    </ul>

</nav>

Ex : Dans la feuille de style :

CSS

#menuprincipal ul li:first-child {

    ...

}

Ex : Dans ce troisième exemple, on veut appliquer un format à un bouton radio mais seulement s'il est sélectionné.

Dans le fichier HTML :

HTML

<input type="radio" name="sexe" id="homme" />

<label for="homme">Homme</label>

<input type="radio" name="sexe" id="femme" />

<label for="femme">Femme</label>

Dans la feuille de style :

CSS

input[type=radio]:checked {

    ...

}

Ex : Il est possible d'utiliser les pseudo-formats pour générer une liste à virgules à l'aide du CSS.

Dans le fichier HTML :

HTML

<ul class="listeavirgules">

    <li>Premier élément</li>

    <li>Deuxième élément</li>

    <li>Troisième élément</li>

</ul>

Dans la feuille de style :

CSS

ul.listeavirgules {

    list-style: none;

    margin: 0;

    padding: 0;

}

 

ul.listeavirgules li {

    display: inline;

}

 

ul.listeavirgules li:after {

    content: ", ";

}

 

ul.listeavirgules li:last-child:after {

    content: "";

}

Pour plus d'information

« Pseudo-classes ». MDN. https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes

« CSS Pseudo-elements ». W3Schools. http://www.w3schools.com/CSS/CSS_pseudo_elements.asp

« Les sélecteurs CSS 2 et 3 ». xul. http://www.xul.fr/css/selecteur.php

« :before et :after, des pseudo-éléments qui ont du style ». Chez Jérémie. http://jeremie.patonnier.net/post/2010/11/22/before-et-after-des-pseudo-elements-qui-ont-du-style

« The Current Generation of CSS3 Selectors ». Site point. http://www.sitepoint.com/current-generation-css3-selectors/

« CSS Cheat Sheet ». Cheetyr. http://www.cheetyr.com/css-selectors

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories