Le CSS n'offre pas de moyen de sélectionner directement un élément parent en fonction
ses enfants. Cela fait partie des principales demandes des développeurs depuis de nombreuses années. La
Le sélecteur :has()
, désormais compatible avec tous les principaux navigateurs, permet de résoudre ce problème. Avant
:has()
, vous devez souvent enchaîner de longs sélecteurs ou ajouter des classes pour définir le style des hooks. Maintenant
vous pouvez appliquer un style basé sur la relation d'un élément avec ses descendants. En savoir plus
concernant le sélecteur :has()
dans
CSS en 2023 et
Cinq extraits CSS que tous les développeurs de l'interface doivent connaître.
Bien que ce sélecteur semble petit, il peut prendre en charge un grand nombre de cas d'utilisation.
Cet article présente quelques cas d'utilisation que les entreprises d'e-commerce ont permis de débloquer
Sélecteur :has()
.
:has()
fait partie de Baseline Newly Available.
Navigateurs pris en charge
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
Consultez la série complète de cet article, qui explique comment les entreprises d'e-commerce ont amélioré leur site Web à l'aide de nouvelles fonctionnalités CSS et d'interface utilisateur.
Policybazaar
Avec le sélecteur
:has()
, nous avons pu éliminer la validation basée sur JavaScript de la sélection de l'utilisateur et la remplacer par une solution CSS qui fonctionne en toute sérénité, avec la même expérience qu'auparavant. Aman Soni, responsable technique, Policybazaar
L'équipe chargée des investissements de Policybazaar a appliqué le sélecteur :has()
de manière astucieuse pour fournir un
une indication visuelle claire pour les utilisateurs qui comparent les forfaits. L'image suivante
affiche deux types de forfaits dans l'interface utilisateur de comparaison (jaune et bleu). Chaque forfait
ne peuvent être comparés qu'à son propre type. En utilisant :has()
, lorsqu'un utilisateur en sélectionne une
type de forfait, vous ne pouvez pas sélectionner l'autre type de forfait.
:has()
pour appliquer un style à l'élément parent et à ses enfants afin de créer
une fonctionnalité de sélection liée à une catégorie.Code
:has()
vous permet d'appliquer un style aux éléments parents et à leurs enfants. La
Le code suivant vérifie si une classe .disabled-group
est définie pour un conteneur parent.
Si c'est le cas, la fiche est grisée et le bouton "Ajouter" est bloqué.
réagissant aux clics en définissant pointer-events
sur none
.
.plan-group-container:has(.disabled-group) {
opacity: 0.5;
filter: grayscale(100%);
}
.plan-group-container:has(.disabled-section) .button {
pointer-events: none;
border-color: #B5B5B5;
color: var(--text-primary-38-color);
background: var(--input-border-color);
}
L'équipe Santé de Policybazaar a implémenté
un cas d'utilisation légèrement différent. Elle propose un quiz intégré
à l'utilisateur et utilise
:has()
pour vérifier l'état de la case à cocher de la question et voir si la question était
répondu. Si c'est le cas, une animation est appliquée pour passer à la question suivante.
Code
Dans l'exemple de comparaison de plans, :has()
a été utilisé pour vérifier la présence d'un
. Vous pouvez également vérifier l'état d'un élément d'entrée tel qu'une case à cocher en utilisant
:has(input:checked)
Sur l'image illustrant le quiz, chaque question de la
bannière violette est une case à cocher. Policybazaar vérifie si la question a été
répondu à l'aide de :has(input:checked)
et, le cas échéant, déclencher une animation à l'aide de
animation: quesSlideOut 0.3s 0.3s linear forwards
pour passer à la suivante
cette question. Découvrez comment cela fonctionne dans le code suivant.
.segment_banner__wrap__questions {
position: relative;
animation: quesSlideIn 0.3s linear forwards;
}
.segment_banner__wrap__questions:has(input:checked) {
animation: quesSlideOut 0.3s 0.3s linear forwards;
}
@keyframes quesSlideIn {
from {
transform: translateX(50px);
opacity: 0;
}
to {
transform: translateX(0px);
opacity: 1;
}
}
@keyframes quesSlideOut {
from {
transform: translateX(0px);
opacity: 1;
}
to {
transform: translateX(-50px);
opacity: 0;
}
}
Tokopedia
Tokopedia a utilisé :has()
pour créer une image de superposition si la vignette du produit
contient une vidéo. Si la miniature du produit contient une classe .playIcon
, un code CSS
la superposition est ajoutée. Ici, le sélecteur :has() est utilisé avec le &
.
sélecteur d'imbrication dans la classe .thumbnailWrapper
globale qui s'applique
à toutes les miniatures. Le code CSS est ainsi plus modulaire et plus lisible.
![Capture d'écran de la page Tokopedia avant et après l'utilisation du sélecteur "Contient".](https://developer.chrome.com/static/blog/css-ui-ecommerce-has/image/has-before-after.png?authuser=9&hl=fr)
:has()
.Code
Le code suivant utilise la classe
Sélecteurs et combinateurs CSS
(&
et >
) et l'imbrication avec :has()
pour appliquer un style à la vignette.
Pour les services autres que
la règle de classe CSS supplémentaire standard est utilisée en remplacement. La
La règle @supports selector(:has(*))
permet également de vérifier la compatibilité des navigateurs.
Par conséquent, l'expérience globale est la même sur toutes les versions de navigateur.
export const thumbnailWrapper = css`
padding: 0;
margin-right: 7px;
border: none;
outline: none;
background: transparent;
> div {
width: 64px;
height: 64px;
overflow: hidden;
cursor: pointer;
border-color: ;
position: relative;
border: 2px solid ${NN0};
border-radius: 8px;
transition: border-color 0.25s;
&.active {
border-color: ${GN500};
}
@supports selector(:has(*)) {
&:has(.playIcon) {
&::after {
content: '';
display: block;
background: rgba(0, 0, 0, 0.2);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
}
& > .playIcon {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
text-align: center;
z-index: 1;
}
}
`;
Éléments à prendre en compte lors de l'utilisation de :has()
Combinez :has()
avec d'autres sélecteurs pour créer une condition plus complexe. Chèque
quelques exemples dans has() le sélecteur de famille.
Ressources :
- Version CSS 2023
- :has(): sélecteur de famille
- Démonstrations :has()
- Voulez-vous signaler un bug ou demander une nouvelle fonctionnalité ? Votre avis nous intéresse
Lisez les autres articles de cette série sur l'e-commerce entreprises ont profité de l'utilisation de nouvelles fonctionnalités CSS et UI, comme les animations, les transitions de vue, les pop-ups et les requêtes de conteneur.