CSS :has(), partie 2
Introduction Introduction
Voici la suite de l’article sur les possibilités avec le :has(), pour voir la première partie, vous pouvez cliquer le lien de la partie 1 de l’article
La sélection par quantité La sélection par quantité
Ciblage par index Ciblage par index
En CSS, le sélecteur :nth-child() permet de cibler un enfant en fonction de son index, autrement dit selon sa position en tant qu’enfant.
Pour approfondir vos connaissances sur :nth-child(), vous pouvez lire l’article sur :nth-child()
Voici quelques exemples :
/* Ciblage par index */
span:nth-child(3) {
}
/* Ciblage à partir d'un index */
span:nth-child(n + 3) {
}
/* Idem en partant de la fin */
span:nth-last-child(n + 3) {
}
Ciblage en fonction du nombre d’éléments Ciblage en fonction du nombre d’éléments
Il est possible d’appliquer un style à un élément en fonction du nombre de ses enfants :
/* dès que 5 enfants et plus */
ul:has(> *:nth-child(5n)) {
}
/* avec nth-last-child */
article:has(section > span:nth-last-child(n + 3)) {
}
Prenons un exemple concret et imaginons que nous ayons un conteneur d’éléments qui doit passer à l’orange dès que le nombre de burgers est supérieur à 3 puis au rouge dès que l’on dépasse 6 burgers. On va aussi dynamiser l’affichage d’un message en fonction de ces dépassements.
<article>
<span class="message"></span>
<section><span>🍔</span></section>
<button class="small danger" onclick="deleteBurger(this)">Delete</button>
<button class="small" onclick="addBurger(this)">Add</button>
</article> article {
--state-color: green;
--text: "C'est ok 😀";
border: var(--state-color) 3px solid;
background-color: #000;
padding: 2rem clamp(1rem, 4vw, 4rem);
font-size: clamp(2rem, 4vw, 4rem);
border-radius: 20px;
text-align: center;
section {
padding:0;
}
.message {
font-size: 2rem;
color: var(--state-color);
&::before {
content: var(--text);
}
}
&:has(section > span:nth-child(3n)) {
--state-color: orange;
--text: "Trop de burgers 😧";
}
&:has(section > span:nth-child(6n)) {
--state-color: red;
--text: "là c'est abusé 😱";
}
}La sélection par attribut La sélection par attribut
Les sélecteurs d’attributs sont également très utiles pour cibler certains de nos éléments. On peut aller assez loin dans les patterns de sélection avec un peu d’expressions régulières.
Appliquer du style selon la valeur de l’attribut Appliquer du style selon la valeur de l’attribut
Par exemple, on peut appliquer un certain style sur un lien qui serait externe au site :
a:is([href^="https://"],[href^="http://"])
{
}
Imaginons maintenant que nous souhaitions personnaliser un encart contenant un lien de téléchargement en fonction du type fichier.
En combinant le :has() et un sélecteur d’attribut, c’est tout à fait possible :
<div class="links">
<a id="top" href="https://www.samuelgomez.fr">https personal Website</a>
<a href="http://www.wooweb.fr">No https external website</a>
<a href="#top">My anchor link</a>
</div>
<div class="links">
<div class="link-box">
<p>Télécharger votre fichier</p>
<a href="text.txt">Download</a>
</div>
<div class="link-box">
<p>Télécharger votre fichier</p>
<a href="myfile.jpg">Download</a>
</div>
<div class="link-box">
<p>Télécharger votre fichier</p>
<a href="myfile.wave">Download</a>
</div>
<div class="link-box">
<p>Télécharger votre fichier</p>
<a href="myfile.pdf">Download</a>
</div>
<div class="link-box">
<p>Télécharger votre fichier</p>
<a href="myfile.docx">Download</a>
</div>
<div class="link-box">
<p>Télécharger votre fichier</p>
<a href="myfile.xslx">Download</a>
</div>
</div> .links {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-block-end: 2rem;
a:after {
content: var(--icon-link, "");
}
a[href^="#"] {
--icon-link: " 🔗";
&:after {
font-size: 0.8em;
}
}
a:is([href^="https://"],[href^="http://"]){
--icon-link: " ↗";
}
.link-box {
--theme-color: #333;
--theme-icon: "📄";
--theme-file: "";
border: 1px solid var(--theme-color);
padding: 1rem 1rem 2rem 1rem;
border-radius: 15px;
text-align: center;
position: relative;
background: color-mix(in srgb, var(--theme-color) 15%, white);
transition: background-color 0.5s linear;
&::before {
border-radius: 5px;
position: absolute;
height: 20px;
background: color-mix(in srgb, var(--theme-color) 70%, white);
top: 0;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 0.8rem;
padding: 0.1rem 0.5rem;
line-height: 1;
display: flex;
place-items: center;
z-index: 2;
content: var(--theme-icon);
}
&:hover,
&:focus-within {
background: color-mix(in srgb, var(--theme-color) 5%, white);
transition: background-color 0.5s linear;
}
a {
all: revert;
&::before {
content: none;
}
color: var(--theme-color);
border-radius: 15px;
position: absolute;
display: grid;
height: calc(100% - 0.5rem);
padding-bottom: 0.5rem;
width: 100%;
top: 0;
left: 0;
justify-content: center;
align-content: end;
&:hover,
&:focus {
outline: 2px solid color-mix(in srgb, var(--theme-color) 5%, white);
outline-offset: 2px;
}
}
p {
color: var(--g8);
margin: 0;
&::after {
position: relative;
content: var(--theme-file);
}
}
&:has(a[href$=".wave"]) {
--theme-color: purple;
--theme-icon: "🔈";
--theme-file: " Audio";
}
&:has(a[href$=".jpg"]) {
--theme-color: sienna;
--theme-icon: "🏞";
--theme-file: " Image";
}
&:has(a[href$=".pdf"]) {
--theme-color: darkred;
--theme-icon: "PDF";
--theme-file: " PDF";
}
&:has(a[href$=".docx"]) {
--theme-color: blue;
--theme-icon: "DOCX";
--theme-file: " DOCX";
}
&:has(a[href$=".xslx"]) {
--theme-color: darkgreen;
--theme-icon: "XLSX";
--theme-file: " XLSX";
}
}
}Autres cas avec has Autres cas avec has
Cibler les éléments adjacents autres que l’élément survolé Cibler les éléments adjacents autres que l’élément survolé
Dis comme ça, on ne voit pas quel serait l’intérêt d’un tel ciblage.
Imaginons maintenant une galerie d’images sur laquelle, lorsque je survole une image, les autres seraient mises en retrait.
On pourrait essayer le faire depuis le hover du parent mais ce n’est pas tout à fait ce que l’on souhaite car cette solution déclenche l’effet dès que l’on survole le parent.
Ce qu’on souhaite ici, c’est déclencher l’effet uniquement au survol d’un enfant.
En combinant le :has() et le :not(), voici ce que cela donne :
<div class="gallery">
<img src="/images/avatar.jpg" alt="avatar" width="80" height="80" />
<img src="/images/avatar.jpg" alt="avatar" width="80" height="80" />
<img src="/images/avatar.jpg" alt="avatar" width="80" height="80" />
<img src="/images/avatar.jpg" alt="avatar" width="80" height="80" />
</div> .gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 3rem;
place-items: center;
/* Gestion du hover ******************************/
&:has(img:hover) {
img:hover {
opacity: 1;
transform: scale(1.2);
}
img:not(:hover) {
scale: 0.7;
filter: blur(1em);
}
}
/* Gestion du hover ******************************/
img {
max-width: 100%;
border-radius: 100vmax;
transition: 1s cubic-bezier(0.27, 0.91, 0.47, 0.99);
opacity: 0.7;
&:hover {
transition: all 1s cubic-bezier(0.27, 0.91, 0.47, 0.99);
}
}
}Elément vide Elément vide
Il était déjà possible d’appliquer du style sur un élément dont le contenu est vide. Cet article détaille ce que signifie un élément vide exactement (attention aux whitespaces 😉)
On peut donc le combiner avec un :has() pour appliquer du style sur un élément dont tous les enfants sont vides.
/* ici, on vérifie les enfants directs */
.card:has(> *:empty) {
}
Menu dropdown Menu dropdown
Sur un menu, les liens de premier niveau peuvent potentiellement avoir un sous-menu. Généralement, on indique à l’utilisateur, l’existence de ce sous-menu à l’aide d’une petite flèche.
/* ici, on vérifie les enfants directs */
nav li:has(ul) a:after {
content: '▼';
}
C’est la fin de cet article, on se rend compte des possibilités qu’offre la pseudo-classe :has().
Il y a également pas mal de cas d’usage autour des formulaires, c’est pour cette raison que j’ai dédié un article sur les formulaires et le has