Bisher war es in CSS nicht möglich, ein übergeordnetes Element direkt
ihre untergeordneten Elemente. Dies wird von Entwicklern schon seit vielen Jahren am häufigsten gefordert. Die
Der :has()
-Selektor wird jetzt von allen gängigen Browsern unterstützt und löst dieses Problem. Vorher
:has()
haben Sie oft lange Selektoren verkettet oder Klassen für Stil-Hooks hinzugefügt. Jetzt
können Sie Stile basierend auf der Beziehung eines Elements zu seinen Nachfolgerelementen gestalten. Mehr erfahren
zur :has()
-Auswahl in
CSS Wrapped 2023 und
Fünf CSS-Snippets, die jeder Frontend-Entwickler kennen sollte.
Obwohl dieser Selektor klein erscheint, kann er viele Anwendungsfälle ermöglichen.
Dieser Artikel zeigt einige Anwendungsfälle, die E-Commerce-Unternehmen mit dem
:has()
-Auswahl.
:has()
ist Teil von Baseline neu verfügbar.
Unterstützte Browser
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
Sehen Sie sich die vollständige Reihe an, zu der dieser Artikel gehört. Darin wird die E-Commerce-Unternehmen ihre Website mit neuen CSS- und UI-Funktionen optimiert.
Richtlinienbasar
Mit dem
:has()
-Selektor konnten wir die JavaScript-basierte Validierung eliminieren der Auswahl des Nutzers und ersetzen Sie diese durch eine funktionierende CSS-Lösung. nahtlos für uns mit der gleichen Erfahrung wie zuvor. –Aman Soni, Tech Lead, Policybazaar
Das Investmentteam von Policybazaar hat die :has()
-Auswahl geschickt eingesetzt, um eine
eine klare visuelle Anzeige
für Nutzende, die Pläne vergleichen. In der folgenden Abbildung
zeigt zwei Arten von Tarifen auf der Vergleichsoberfläche an (gelb und blau). Jeder Plan
nur mit ihrem eigenen Typ verglichen werden kann. Durch die Verwendung von :has()
, wenn ein Nutzer ein Element auswählt
Der Tariftyp des anderen Tariftyps kann nicht ausgewählt werden.
:has()
implementieren, um das übergeordnete Element und seine untergeordneten Elemente zu gestalten, um
eine kategoriegebundene Auswahlfunktion.Code
Mit :has()
haben Sie Zugriff auf die Gestaltung von übergeordneten Elementen und deren untergeordneten Elementen. Die
Der folgende Code prüft, ob für einen übergeordneten Container die Klasse .disabled-group
festgelegt ist.
Ist dies der Fall, ist die Karte ausgegraut und Schaltfläche wird daran gehindert, sich
auf Klicks reagieren, indem 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 hat
einen etwas anderen Anwendungsfall. Die Nutzenden haben ein Inline-Quiz,
:has()
, um den Status des Kästchens zu prüfen und zu sehen, ob die Frage
beantwortet. Ist dies der Fall, wird eine Animation angewendet, um zur nächsten Frage überzugehen.
Code
Im Beispiel für einen Tarifvergleich wurde :has()
verwendet, um zu prüfen, ob eine
. Sie können auch den Status eines Eingabeelements, z. B. eines Kästchens, mithilfe von
:has(input:checked)
In der Grafik, die das Quiz zeigt, ist jede Frage im
lila Banner ist ein Kästchen. Der PolicyBazaar prüft, ob die Frage
mit :has(input:checked)
beantwortet und falls ja, eine Animation auslösen mit
animation: quesSlideOut 0.3s 0.3s linear forwards
, um zum nächsten zu springen
Frage. 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 mit :has()
ein Overlay-Bild erstellt, wenn das Produkt-Thumbnail
ein Video enthält. Wenn die Produkt-Miniaturansicht eine .playIcon
-Klasse enthält, wird ein CSS-Code
wird ein Overlay hinzugefügt. Hier wird der Selektor „:has()“ zusammen mit dem &
verwendet
Verschachtelungsauswahl in der übergreifenden Klasse .thumbnailWrapper
, die angewendet wird
auf alle Thumbnails angewendet. Dadurch wird modularer und besser lesbarer CSS-Code erstellt.
![Screenshot der Tokopedia-Seite vor und nach Verwendung des has-Selektors](https://developer.chrome.com/static/blog/css-ui-ecommerce-has/image/has-before-after.png?authuser=1&hl=de)
:has()
.Code
Der folgende Code verwendet die Methode
CSS-Selektoren und Kombinatoren
(&
und >
) und Verschachtelung mit :has()
, um das Thumbnail zu gestalten.
Für nicht unterstützende
Browsern wird die reguläre zusätzliche CSS-Klassenregel als Fallback verwendet. Die
Die Regel „@supports selector(:has(*))
“ wird auch verwendet, um die Browserunterstützung zu prüfen.
Das Gesamterlebnis ist daher 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 bei der Verwendung von :has()
zu beachten ist
Kombinieren Sie :has()
mit anderen Selektoren, um eine komplexere Bedingung zu erstellen. Prüfen
finden Sie unter has() (Familienauswahl) einige Beispiele.
Ressourcen:
- CSS Wrapped 2023
- :has(): die Familienauswahl
- Demos :has()
- Möchtest du einen Fehler melden oder eine neue Funktion vorschlagen? Ihre Meinung ist uns wichtig.
Lesen Sie auch die anderen Artikel dieser Reihe, in denen es um E-Commerce geht. Unternehmen profitierten von neuen CSS- und UI-Funktionen wie Scroll-orientierte Animationen, Anzeigenübergänge, Popover- und Containerabfragen.