• 15 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 8/6/20

Utilisez les combinateurs

Log in or subscribe for free to enjoy all this course has to offer!

Dans les chapitres précédents, nous avons vu comment créer et utiliser les combinateurs descendants. Mais vous pouvez aussi créer d’autres combinateurs. D’ailleurs, Sass vous permet de créer tous les autres types de combinateurs CSS.

Découvrez d’autres types de combinateurs

Combinateur parent

.parent {
background-color: #15DEA5;
}

Combinateur descendant

.parent .descendant {
color: #fff;
}

Combinateur parent > enfant

.parent > .child {
color: #D6FFF5;
}

Combinateur adjacent

.parent + .adjacent {
color: #001534;
}

Ça vous rappelle quelque chose, n’est-ce pas ? Récapitulons :

  1. Dans le premier cas, tout ce qui est relié à l’élément parent adoptera la couleur de fond spécifiée. 

  2. Dans le deuxième cas, si le deuxième élément est le descendant du premier, alors il adoptera la couleur spécifiée. 

  3. Dans le troisième cas, si le deuxième élément est un enfant du premier, alors il adoptera la couleur spécifiée.

  4. Dans le quatrième cas,  si le deuxième élément est immédiatement précédé du premier, alors il adoptera la couleur spécifiée.

Une minute, descendant on l’a vu plus tôt, mais c’est quoi la différence entre “descendant” et “enfant” ? 🤔

C’est la même différence qu’en français :

  • Vous êtes à la fois l’enfant et le descendant de vos parents ;

  • Vous n’êtes pas l’enfant de vos grands-parents, en revanche vous êtes leur descendant.

Un élément enfant a donc un lien direct et immédiat avec son élément parent alors qu’un lien descendant, non. Vous avez un lien direct et immédiat avec vos parent. Par contre, vous êtes le descendant de vos grand-parents : votre lien n’est pas direct et immédiat.

En ajoutant le bon symbole de combinateur devant un sélecteur, vous pouvez créer tous les combinateurs CSS dans Sass :

.parent {
background-color: #15DEA5;
.descendant {
color: #fff;
}
>.child {
color: #D6FFF5;
}
+.adjacent {
color: #001534;
}
}

Quand vous imbriquez un bloc dans Sass, cela crée un nouveau sélecteur CSS avec le sélecteur parent attaché, séparé par le combinateur adapté.

Essayez par vous-même !

Appliquez vos nouvelles connaissances des combinateurs dans cet exercice.

Coding application
Houston... ?
It seems you're not connected to the internet.
You are not signed in

Sign in to access coding exercises and test your new skills.

Make sure to practice in this chapter before moving on.

Mais si l’on ne veut pas de séparation entre parent et enfant ? 🙅‍♀️

Dans ce cas-là on utilise l’esperluette (ou ampersand en anglais) !

Utilisez l’esperluette

Vous avez besoin d’ajouter une pseudoclasse  li:hover  à vos <li> pour ajouter un peu d’interaction visuelle et améliorer l’expérience utilisateur. Si on imbrique le pseudo-sélecteur dans notre sélecteur li, cela nous donne:

ul {
list-style: none;
text-align: right;
li {
display: inline;
font-size: 3rem;
color: #D6FFF5;
:hover {
color: #001534;
}
}
}

Ce qui se compile ainsi :

ul {
list-style: none;
text-align: right;
}
ul li {
display: inline;
font-size: 3rem;
color: #D6FFF5;
}
ul li :hover {
color: #001534;
}

Aïe, ça ne marchera pas… 😕 Souvenez-vous que le nesting dans Sass crée des combinateurs de lui-même. Sauf que vous ne voulez pas d’un combinateur avant votre pseudosélecteur. Ce n’est pas comme ça qu’ils fonctionnent ; vous avez besoin qu’il soit directement relié au sélecteur pour qu’il ait l’effet attendu.

Sass a un signe spécifique pour concaténer les sélecteurs parent et enfant : l’esperluette (&)

Magie. ✨

Ajoutons donc une esperluette avant notre pseudosélecteur  :hover  :

ul {
list-style: none;
text-align: right;
li {
display: inline;
font-size: 3rem;
color: #D6FFF5;
&:hover {
color: #001534;
}
}
}

Et voici le CSS qui en découle :

ul {
list-style: none;
text-align: right;
}
ul li {
display: inline;
font-size: 3rem;
color: #D6FFF5;
}
ul li:hover {
color: #001534;
}

Beaucoup mieux ! Maintenant, nous avons un :hover qui fonctionne pour nos  <li>, et tout ça dans en seul bloc de code.

Essayez par vous-même !

Dans cet exercice, utilisez l’esperluette.

Coding application
Houston... ?
It seems you're not connected to the internet.
You are not signed in

Sign in to access coding exercises and test your new skills.

Make sure to practice in this chapter before moving on.

N’abusez pas du nesting

Il n’y a pas réellement de limite quant à la profondeur du nesting qu’on peut opérer dans Sass. On serait tenté de répliquer intégralement notre HTML dans Sass, en reproduisant une copie conforme de sa structure.

.parent-div {
background-color: #15DEA5;
.child-div {
color: #fff;
.grandchild-div {
color: #D6FFF5;
}
}
}

Mais souvenez-vous, quand vous imbriquez des sélecteurs, vous augmentez la spécificité des sélecteurs compilés. De ce fait, si vous les imbriquez trop, vous allez vous retrouver avec des sélecteurs de très haute spécificité, ce qui les rendra extrêmement difficiles à modifier ou outrepasser si besoin.

.parent-div {
background-color: #15DEA5;
}
.parent-div .child-div {
color: #fff;
}
.parent-div .child-div .grandchild-div {
color: #D6FFF5;
}

Essayer d’outrepasser un sélecteur aussi spécifique que  .parent-div, .child-div  ou  .grandchild-div  nécessiterait un sélecteur encore plus spécifique. Sans compter que cela nuirait beaucoup à la réutilisation de votre code. À moins d’ajouter plus tard un élément qui corresponde parfaitement à cette hiérarchie de classes, ce sélecteur sera complètement inutile. Vous vous retrouverez donc avec du code instable et difficile à maintenir – ce qui va à l’encontre de la raison d’être des préprocesseurs !

Plutôt que d’essayer de répliquer exactement la structure du HTML, il est préférable d’écrire des sélecteurs imbriqués qui soient uniquement relatifs au sélecteur racine. Cela ne reproduira pas la structure HTML aussi clairement, mais permettra de maintenir une spécificité basse dans votre codebase, ainsi qu’une certaine flexibilité et une certaine modularité.

Par exemple, si vous avez ce code et que vous voulez modifier l’image :

<section class="proj-prev proj-prev--mint">
<div class="proj-prev__image">
<img src="/public/img/photography_1280w.jpg" alt="project title goes here" >
</div>
<h1 class="proj-prev__heading">
Project Title
</h1>
<p class="proj-prev__byline">
project keywords would go here
</p>
</section>

vous pourriez juste vous arrêter au sélecteur précédent et avoir seulement votre balise img sans la nester dans  proj-prev puis   proj-prev image  :

.proj-prev{
votre code ici
img {
color: #fff;
}
}

En pratique, si vous vous retrouvez à imbriquer au-delà de deux niveaux de profondeur, arrêtez-vous et réfléchissez à la façon dont vous êtes en train de structurer votre bloc. Il y a des chances que vous soyez en train de créer des sélecteurs trop spécifiques et devriez refactoriser votre code en conséquence.

Le nesting dans Sass est un outil très performant qui vous aide à regrouper les sélecteurs pertinents et ainsi bâtir une codebase facile à parcourir et à maintenir. Toutefois, cela a pour inconvénient de créer une surenchère de spécificité. Du coup, vous vous dites peut-être qu’il vaut mieux revenir au système BEM, avec l’organisation et la structure que cela confère à vos sélecteurs. Vous vous souvenez peut-être aussi que BEM repose sur un principe de basse spécificité. Ce qui est l’inverse de l’augmentation de spécificité générée par le nesting. Alors, qu’est-ce qui vaut mieux ? BEM ou nesting ?

La réponse est : pourquoi pas les deux ! Mais avant de voir ensemble comment faire, récapitulons un peu ce que nous venons d’apprendre.

En résumé

  • Dans Sass, les sélecteurs peuvent être imbriqués, ou nestés, dans d’autres sélecteurs.

  • Sass peut créer tous les combinateurs CSS.

  • Utilisez l’esperluette pour lier un sélecteur imbriqué à un sélecteur parent sans recourir à un combinateur. 

  • Attention à ne pas créer des sélecteurs trop spécifiques. 

Dans le chapitre suivant, nous allons combiner la puissance de Sass et l’ordre de BEM pour créer des sélecteurs de baisse spécificité, tout en gardant la structure du nesting.

Example of certificate of achievement
Example of certificate of achievement