In CSS gab es bisher keine Möglichkeit, ein übergeordnetes Element direkt anhand seiner untergeordneten Elemente auszuwählen. Das war seit vielen Jahren eine der häufigsten Anfragen von Entwicklern. Der Selektor :has(), der jetzt von allen wichtigen Browsern unterstützt wird, löst dieses Problem. Vor :has() mussten Sie oft lange Selektoren verketten oder Klassen für Styling-Hooks hinzufügen. Jetzt können Sie das Styling basierend auf der Beziehung eines Elements zu seinen Nachfolgern festlegen. Weitere Informationen
zum :has() Selektor in
CSS Wrapped 2023 und
5 CSS snippets every frontend developer should know.
Dieser Selektor mag klein erscheinen, kann aber eine Vielzahl von Anwendungsfällen ermöglichen.
In diesem Artikel werden einige Anwendungsfälle gezeigt, die E-Commerce-Unternehmen mit dem Selektor :has() erschlossen haben.
Sehen Sie sich die vollständige Reihe an, zu der dieser Artikel gehört. Darin wird beschrieben, wie E-Commerce-Unternehmen ihre Website mit neuen CSS- und UI-Funktionen verbessert haben.
Policybazaar
Mit dem Selektor
:has()konnten wir die JavaScript-basierte Validierung der Auswahl des Nutzers durch eine CSS-Lösung ersetzen, die für uns nahtlos funktioniert und die gleiche Nutzererfahrung wie zuvor bietet. – Aman Soni, Tech Lead, Policybazaar
Das Investmentteam von Policybazaar hat den Selektor :has() clever eingesetzt, um Nutzern, die Tarife vergleichen, eine klare visuelle Darstellung zu bieten. Die folgende Abbildung zeigt zwei Arten von Tarifen in der Vergleichs-UI (gelb und blau). Jeder Tarif kann nur mit Tarifen desselben Typs verglichen werden. Wenn ein Nutzer einen
Tariftyp auswählt, kann der andere Tariftyp nicht ausgewählt werden.:has()
:has(), um das übergeordnete Element und seine untergeordneten Elemente zu gestalten und eine kategoriegebundene Auswahlfunktion zu erstellen.Code
Mit :has() können Sie übergeordnete Elemente und ihre untergeordneten Elemente gestalten. Der folgende Code prüft, ob für einen übergeordneten Container die Klasse .disabled-group festgelegt ist.
Wenn dies der Fall ist, wird die Karte ausgegraut und die Schaltfläche „Hinzufügen“ reagiert nicht mehr auf Klicks, indem pointer-events auf none gesetzt wird.
.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);
}
Das Gesundheitsteam von Policybazaar hat
einen etwas anderen Anwendungsfall implementiert. Es gibt ein Inline-Quiz für den Nutzer und verwendet :has(), um den Status des Kontrollkästchens der Frage zu prüfen und festzustellen, ob die Frage beantwortet wurde. Wenn dies der Fall ist, wird eine Animation angewendet, um zur nächsten Frage zu wechseln.
Code
Im Beispiel für den Tarifvergleich wurde :has() verwendet, um das Vorhandensein einer Klasse zu prüfen. Sie können auch den Status eines Eingabeelements wie eines Kontrollkästchens mit :has(input:checked) prüfen. In der Abbildung des Quiz ist jede Frage im violetten Banner ein Kontrollkästchen. Policybazaar prüft mit :has(input:checked), ob die Frage beantwortet wurde. Wenn dies der Fall ist, wird mit animation: quesSlideOut 0.3s 0.3s linear forwards eine Animation ausgelöst, um zur nächsten Frage zu wechseln. Wie das funktioniert, sehen Sie im folgenden Code.
.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 hat :has() verwendet, um ein Overlay-Bild zu erstellen, wenn das Produkt-Thumbnail ein Video enthält. Wenn das Produkt-Thumbnail die Klasse .playIcon enthält, wird ein CSS-Overlay hinzugefügt. Hier wird der Selektor ` :has()` zusammen mit dem Verschachtelungsselektor & innerhalb der übergeordneten Klasse .thumbnailWrapper verwendet, die für alle Thumbnails gilt. Dadurch wird CSS modularer und besser lesbar.
:has().Code
Im folgenden Code werden die
CSS-Selektoren und -Kombinatoren
(& und >) sowie die Verschachtelung mit :has() verwendet, um das Thumbnail zu gestalten.
Für nicht unterstützte Browser wird die reguläre zusätzliche CSS-Klassenregel als Fallback verwendet. Die Regel @supports selector(:has(*)) wird auch verwendet, um die Browserunterstützung zu prüfen.
Daher ist die Nutzererfahrung in allen Browserversionen gleich.
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;
}
}
`;
Hinweise zur Verwendung von :has()
Kombinieren Sie :has() mit anderen Selektoren, um eine komplexere Bedingung zu erstellen. Einige Beispiele finden Sie unter has() the family selector.
Ressourcen:
- CSS Wrapped 2023
- :has(): the family selector
- Demos :has()
- Möchten Sie einen Fehler melden oder eine neue Funktion anfordern? Wir freuen uns auf Ihr Feedback!
In den anderen Artikeln dieser Reihe erfahren Sie, wie E-Commerce-Unternehmen von der Verwendung neuer CSS- und UI-Funktionen wie scrollgesteuerte Animationen, Ansichtsübergänge, Popover und Containerabfragen profitiert haben.