CSS3 – les sélecteurs avancés

Il y a quelques jours, l’une de nos réalisations a été transférée à une agence de communication partenaire d’un de nos clients. C’est bien normal, le sponsoring, c’est ainsi que ça fonctionne.

Première étape, transmission des accès au système WordPress. WordPress est relativement simple à utiliser, très efficace et beaucoup de professionnels (dont nous) ainsi que quantité d’amateurs s’en servent.
C’est un excellent outil.

24 heures se passent et on nous demande notre aide : comment faire ceci, où ce trouve cela. Nous nous prêtons de bonne grâce aux premières explications quand la question des feuilles de style se posent. WordPress fait tout sauf le café, nous sommes d’accord. Par contre, il ne va pas faire votre mise en page avancée pour vous – nous parlons d’une agence qui prépare les mises en pages pour que les membres de l’administration puissent travailler à introduire le contenu !

Nous avons, dans l’urgence, dispenser une formation accélérée sur les CSS et quelques autres éléments comme les modèles de pages… en 2 heures. Ca peut faire chauffer les neurones.

Donc voici quelques lignes pour appréhender ce qu’est CSS3, troisième version validée par le W3C en résumé, qui permet de faire des choses formidables ; pour les sites comme pour l’impression.

On passe la première

En conséquence, si vous lisez ce qui suit, on peut supposer que vous avez déjà entendu parler de CSS3. La dernière version de CSS comprend des propriétés qui vous permettent de styliser vos éléments HTML avec des coins arrondis, des ombres portées, des dégradés de couleurs et de spécifier des éléments de mise en page avancés en cas d’impression.

Ici, nous n’allons qu’effleurer ce que CSS3 peut réellement faire. Voici trois techniques CSS3 « avancées ».

Une petite démo, assez ancienne, ne fait pas de mal.

Les sélecteurs avancés constituent l’une des caractéristiques les plus importantes mais trop peu abordée de CSS3. Elle permet de cibler un élément HTML spécifique sans avoir à lui donner un ID. C’est plutôt une bonne chose, non ?

Traditionnellement, les sélecteurs CSS ont toujours été : ID (#id), classes (.class), éléments HTML (tels que p), et occasionnellement des pseudo-classes comme :hover ou :active.

Le problème avec ce procédé est que presque chaque élément doit avoir un crochet. Cela signifie que pour être précis dans ce que vous sélectionnez, l’élément doit avoir soit un ID (s’il s’agit d’un seul élément), soit une classe (s’il s’agit d’un groupe d’éléments), bref, le navigateur doit savoir de quoi vous parlez.

Lorsque vous commencez à travailler avec des mises en page complexes, la quantité d’ID et de classes que vous devez ajouter à votre balisage commence à brouiller les pistes et ralentir votre navigateur.

C’est là une grande force de CSS3. Grâce aux nombreuses pseudo-classes utilisables, votre balisage et les temps de réponse de vos pages vous remercieront.

Petit exemple

Pour démontrer certains de ces nouveaux sélecteurs, voici un exemple simple : deux listes non ordrées :

<!DOCTYPE html>
<html>
<body>
  <ul>
    <li>First Line</li>
    <li>Second Line</li>
    <li>Third Line</li>
    <li>Fourth Line</li>
    <li>Fifth Line</li>
    <li>Sixth Line</li>
  </ul>
  <ul>
    <li>First Line</li>
    <li>Second Line</li>
    <li>Third Line</li>
    <li>Fourth Line</li>
    <li>Fifth Line</li>
    <li>Sixth Line</li>
  </ul>
</body>
</html>

Le petit bloc de code suivant est un CSS de base, juste pour l’aspect visuel. On réinitialise les marges et le padding de chaque élément en utilisant le sélecteur universel (*) et on applique quelques styles de base aux deux listes.

* {
  margin: 0;
  padding: 0;
}
ul {
  list-style-type: none;
  margin: 2%;
  border: 1px solid #ccc;
  padding: 5px;
  width: 44%;
  float: left;
}
ul li {
  margin-bottom: 5px;
  padding: 2px;
}

C’est parti pour le premier sélecteur :

La première partie de notre sélecteur dit simplement de sélectionner le <ul> qui est le premier enfant d’un autre élément (le <body> dans ce cas).

Ensuite, il sélectionne les éléments impairs de la liste (premier, troisième, cinquième, etc.) dans la première liste non ordonnée.

Comme vous pouvez le constater, en utilisant une combinaison de pseudo-classes et de sélecteurs d’éléments HTML, nous avons réussi à ne sélectionner que le premier des deux listes non ordonnées identiques.

ul:first-child li:nth-child(odd)

Une autre façon de procéder est présentée ci-dessous, qui fait la même chose, mais cette fois, elle le fait en sélectionnant le premier <ul> de la page, qu’il soit ou non le premier enfant d’un autre élément.

ul:first-of-type li:nth-child(odd)

À mesure que vous progresserez dans l’utilisation des sélecteurs CSS, vous constaterez qu’il existe de nombreuses façons de faire la même chose, et c’est à vous de décider laquelle utiliser.

Une fois la première liste non ordonnée sélectionnée, nous pouvons donner un style aux éléments de la liste impairs (nous leur donnerons une couleur d’arrière-plan différente de celle des autres éléments de la liste).

ul:first-child li:nth-child(odd) {
background-color : #d2fffe ;
border : 1px solid #000 ;
}

Ce n’est cependant pas la seule façon d’utiliser :nth-child. Nous pouvons également l’utiliser pour donner un style à des éléments individuels en fonction de leur position. Le bloc de code ci-dessous donne un fond rose au cinquième élément de la première liste non ordonnée de notre page Web.

body > ul:first-child li:nth-child(5) {
background : #ffd2d2 ;
}

Un autre exemple

Pour un autre exemple, ajoutons un formulaire Web à notre document HTML. Remarquez qu’un des éléments d’entrée (name=email) dispose de l’attribut booléen disabled pour présenter la pseudo-classe :disabled plus tard.

<form method="post" action="#">
<p>
<label for="name">Nom:</label>
<input type="text" name="name" value="" />
<p>
<label for="email">Email:</label>
<input type="text" name="email" value="" disabled />
</p>
<p>
<label for="message">Message:</label>
<textarea name="message"></textarea>
</p>
</form>

Le bloc de code suivant ajuste quelques styles de base pour notre formulaire web. Ce que cela va faire est de supprimer certains styles par défaut sur le formulaire et de faire flotter les étiquettes à gauche et les entrées à droite.

form {
clear : both ;
width : 95% ;
}
form p {
margin-bottom : 15px ;
clear : both ;
overflow : hidden ;
}
form label {
float : left ;
}
form input, form textarea {
width : 70% ;
float : right ;
border : 1px solid #000 ;
}
form textarea {
hauteur : 50px ;
}

Profitons de l’attribut désactivé de l’entrée email pour lui ajouter un fond gris plus foncé.

input:disabled {
background : #e7e7e7 ;
}

Ensuite, nous avons un sélecteur qui semble complexe, mais qui est en fait assez simple.

En utilisant la pseudo-classe :not, nous sélectionnons tout ce qui se trouve dans un paragraphe et dans un formulaire, à l’exception des éléments <textarea> et <label>.

Essentiellement, cela permet de cibler tous les champs de formulaire qui ne sont pas des zones de texte.

form p *:not(textarea):not(label) {
height : 20px ;
}

Dans la pratique, il serait plus efficace d’utiliser input comme sélecteur dans notre cas particulier, mais ce procéder est choisi de  manière à démontrer le sélecteur :not et la façon dont nous pouvons enchaîner différentes pseudo-classes pour produire un sélecteur plus spécifique.

Arrêtons-nous ici pour les sélecteurs avancés …

Vous imaginez que nous venons de passer – dans la réalité – quelque chose comme 15 minutes avec notre agence de communication ? Ce n’est pas la fin du monde, mais ça commence à chauffer entre les oreilles ! 😉