Bei CSS fehlt bekannterweise die Möglichkeit, ein übergeordnetes Element direkt anhand seiner untergeordneten Elemente auszuwählen. Dies ist schon seit vielen Jahren ein großes Anliegen von Entwicklern. Mit der Auswahl :has(), die jetzt von allen gängigen Browsern unterstützt wird, ist dieses Problem behoben. Vor :has() mussten Sie oft lange Selektoren verketten oder Klassen für Stil-Hooks hinzufügen. Jetzt können Sie den Stil basierend auf der Beziehung eines Elements zu seinen Nachfolgern gestalten. Weitere Informationen zum :has()-Selektor finden Sie unter CSS Wrapped 2023 und Fünf CSS-Snippets, die jeder Frontend-Entwickler kennen sollte.
Auch wenn dieser Selektor klein erscheint, kann er eine Vielzahl von Anwendungsfällen ermöglichen.
In diesem Artikel werden einige Anwendungsfälle beschrieben, die E-Commerce-Unternehmen mit der :has()-Auswahl freigeschaltet haben.
:has() ist Teil von Baseline Newly verfügbar.
Sehen Sie sich die vollständige Reihe an, zu der dieser Artikel gehört. Darin wird erläutert, wie E-Commerce-Unternehmen ihre Website mithilfe neuer CSS- und UI-Funktionen verbessert haben.
PolicyBazaar
Mit dem
:has()-Selektor konnten wir die JavaScript-basierte Validierung der Nutzerauswahl eliminieren und sie durch eine CSS-Lösung ersetzen, die für uns genauso funktioniert wie zuvor. Aman Soni, Tech Lead, Policybazaar
Das Investitionsteam von Policybazaar hat auf intelligente Weise die :has()-Auswahl angewendet, um Nutzern, die Pläne vergleichen, einen klaren visuellen Hinweis zu geben. Die folgende Abbildung zeigt zwei Arten von Plänen innerhalb der Vergleichs-UI (gelb und blau). Jeder Plan kann nur mit seinem eigenen Typ verglichen werden. Wenn ein Nutzer mit :has() einen Tarif auswählt, kann der andere Tariftyp nicht ausgewählt werden.
:has(), um das übergeordnete Element und seine untergeordneten Elemente zu gestalten, um eine kategoriegebundene Auswahlfunktion zu erstellen.Code
Mit :has() können Sie auf übergeordnete Elemente und ihre untergeordneten Elemente zugreifen. Mit dem folgenden Code wird geprüft, ob für einen übergeordneten Container eine .disabled-group-Klasse festgelegt ist.
Ist dies der Fall, ist die Karte ausgegraut und die Schaltfläche „Hinzufügen“ reagiert nicht auf Klicks, wenn Sie pointer-events auf none setzen.
.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 implementierte einen etwas anderen Anwendungsfall. Er bietet ein Inline-Quiz für den Nutzer und verwendet :has(), um den Status des Kästchens für die Frage zu prüfen, um festzustellen, ob die Frage beantwortet wurde. Ist dies der Fall, wird eine Animation für den Übergang zur nächsten Frage verwendet.
Code
Im Beispiel für den Planvergleich wurde :has() verwendet, um das Vorhandensein einer Klasse zu prüfen. Sie können auch den Status eines Eingabeelements wie eines Kästchens mit :has(input:checked) prüfen. In der Abbildung mit dem Quiz ist jede Frage im lila Banner ein Kästchen. PolicyBazaar prüft, ob die Frage mit :has(input:checked) beantwortet wurde. Falls ja, löst du mit animation: quesSlideOut 0.3s 0.3s linear forwards eine Animation aus, um zur nächsten Frage zu springen. Im folgenden Code sehen Sie, wie dies funktioniert.
.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 die Produkt-Miniaturansicht ein Video enthält. Wenn die Produkt-Miniaturansicht eine .playIcon-Klasse enthält, wird ein CSS-Overlay hinzugefügt. Hier wird der :has()-Selektor zusammen mit dem Verschachtelungsselektor & innerhalb der übergeordneten .thumbnailWrapper-Klasse verwendet, die für alle Miniaturansichten gilt. Dadurch wird der CSS-Code modularer und leichter lesbar.
:has().Code
Im folgenden Code werden die CSS-Selektoren und -Kombinatoren (& und >) verwendet und die Miniaturansicht mit :has() verschachtelt.
Bei Browsern, die keine Unterstützung bieten, wird die reguläre zusätzliche CSS-Klassenregel als Fallback verwendet. Mit der Regel @supports selector(:has(*)) wird auch geprüft, ob der Browser unterstützt wird.
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;
}
}
`;
Was Sie bei der Verwendung von :has() beachten sollten
Kombinieren Sie :has() mit anderen Selektoren, um eine komplexere Bedingung zu erstellen. Einige Beispiele finden Sie in has(), die Familienauswahl.
Weitere Informationen:
- Preisvergleichsportal 2023
- :has(): die Familienauswahl
- Demos :has()
- Möchtest du einen Fehler melden oder eine neue Funktion vorschlagen? Ihre Meinung ist uns wichtig.
In den anderen Artikeln dieser Reihe wird beschrieben, wie E-Commerce-Unternehmen von neuen CSS- und UI-Funktionen wie Scroll-Animationen, Ansichtsübergängen, Pop-over- und Containerabfragen profitieren.