Pseudoklasa CSS :has() wybiera element, który jest związany określoną relacją z elementem wskazywanym przez selektor lub selektory przekazane jako jej argument. Innymi słowy ta pseudoklasa pozwala odwoływać się do elementów nadrzędnych lub poprzednich równorzędnych na podstawie ich zawartości bądź sąsiedztwa.
Przykład użycia :has
Przykład użycia pseudoklasy :has – wszystkie elementy p zawierające element span będą miały zielone pogrubione pismo.
<style>
p:has(span) {color: green; font-weight: bold}
</style>
...
<p>Ten akapit <span>zawiera</span> element span.</p>
<p>Ten akapit nie zawiera elementu span.</p>Poniższy zrzut ekranu przedstawia wynik zastosowania tej reguły CSS.
Składnia :has
Składnia pseudoklasy :has:
:has(lista selektorów rozdzielonych przecinkami) {...}Parametry i przykłady użycia :has
Pseudoklasa :has() przyjmuje listę rozdzielanych przecinkami selektorów określających warunki wyboru elementu, do którego została zastosowana, np.:
<style>
p:has(span, i) {color: green; font-weight: bold}
</style>
...
<p>Ten akapit <span>zawiera</span> element span.</p>
<p>Ten akapit zawiera <i>element</i> i.</p>W tym przypadku wszystkie akapity zawierające element span lub i będą miały zielone pogrubione pismo.
Za pomocą pseudoklasy :has można odnosić się także do elementów sąsiadujących na tym samym poziomie drzewa dokumentu z wybranym elementem, np.:
p:has(~div) {color: green;}Ta reguła CSS odnosi się do wszystkich elementów p, za którymi pośrednio lub bezpośrednio na tym samym poziomie hierarchii znajduje się element div, a więc oba poniższe akapity będą miały zielony kolor pisma.
<p>Pierwszy akapit.</p>
<p>Drugi akapit.</p>
<section>Sekcja</section>
<div>Jakaś treść.</div>Natomiast w poniższym przypadku powyższa pseudoklasa nie zadziała, ponieważ element div znajduje się na innym poziomie hierarchii niż akapity.
<p>Pierwszy akapit.</p>
<p>Drugi akapit.</p>
<section>Sekcja... <div>Jakaś treść.</div></section>Przy użyciu pseudoklasy :has można również tworzyć warunki logiczne. Jeśli jako argument przekażemy listę rozdzielanych przecinkami selektorów, to pseudoklasa wybierze każdy element spełniający którykolwiek z tych warunków, np.:
p:has(span, strong)
p:has(span):has(strong)Pierwszy z tych selektorów wybierze wszystkie akapity zawierające element span lub strong. Natomiast drugi wybierze wszystkie akapity zawierające element span i strong.