A ~ B
Znak ~ wybiera wszystkie elementy B, które stoją gdziekolwiek za elementem A i mają z nim wspólnego rodzica.
Przykład
#.hint {
display: none;
}
.field input:focus ~ .hint {
display: block;
}<style>
.field { display: grid; gap: 6px; }
.field input { padding: 8px 10px; border: 1px solid #52525b; border-radius: 8px; background: #18181b; color: inherit; font: inherit; }
.field small { color: #71717a; }
.field .hint { margin: 0; color: #c4b5fd; font-size: 14px; }
</style>
<div class="field stage">
<label for="nick">Nazwa gracza</label>
<input id="nick" placeholder="Kliknij w pole">
<small>Widoczna dla innych graczy</small>
<p class="hint">Od 3 do 20 znaków, bez spacji.</p>
</div>Kliknij w pole. Podpowiedź stoi dwa elementy dalej, a ~ i tak ją znajdzie. Kombinator + by tu nie zadziałał.
Definicja i zastosowanie
#Kombinator rodzeństwa, nazywany też kombinatorem dalszego rodzeństwa, to luźniejsza wersja +. Zapis h2 ~ p wybiera każdy akapit, który stoi za nagłówkiem h2 na tym samym poziomie, nawet jeśli między nimi są inne elementy.
Tak jak przy +, liczą się tylko elementy za A, nigdy przed nim, i tylko te o wspólnym rodzicu. Element w innym kontenerze nie pasuje, nawet jeśli w kodzie stoi niżej.
Kombinator przydaje się w interfejsach sterowanych stanem pól formularza: pole na początku kontenera może zmieniać wygląd elementów stojących dalej w tym samym rodzicu, np. input:focus ~ .hint. Dziś podobne efekty często łatwiej zapisać przez :has(), które nie zależy od kolejności elementów.
Składnia
#A ~ B { właściwość: wartość; }Przykładowe selektory
#- Każdy
spanza.start, także piątka stojąca za elementemem. Jedynka odpada, bo stoi przed.start. - Całe dalsze rodzeństwo
.start, bez względu na typ elementu. - Każdy
span, przed którym gdziekolwiek wcześniej stoi innyspan. Pasują wszystkie oprócz pierwszego.
Przykładowe selektory w praktyce
#.start ~ span
span za .start, także piątka stojąca za elementem em. Jedynka odpada, bo stoi przed .start..start ~ span { background: #7c3aed; color: #fff; }.start ~ *
.start, bez względu na typ elementu..start ~ * { background: #7c3aed; color: #fff; }span ~ span
span, przed którym gdziekolwiek wcześniej stoi inny span. Pasują wszystkie oprócz pierwszego.span ~ span { background: #7c3aed; color: #fff; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Kombinator nie widzi elementów przed A ani w innych kontenerach. Jeśli coś nie działa, sprawdź w narzędziach deweloperskich, czy oba elementy mają tego samego rodzica.
- Sztuczka z ukrytym polem wyboru i
~pozwala zrobić menu bez JavaScriptu, ale do menu i akordeonów lepszy jest element<details>albo przycisk zaria-expanded, zrozumiałe dla czytników ekranu. :has()uwalnia od kolejności:.field:has(input:focus) .hintpokaże podpowiedź niezależnie od tego, gdzie w kontenerze stoi.
Powiązane hasła
#- A + BZnak + wybiera element B, który stoi bezpośrednio za elementem A i ma z nim wspólnego rodzica.
- A > BZnak > wybiera elementy B, które są bezpośrednimi dziećmi elementu A, czyli leżą dokładnie jeden poziom niżej.
- A BSpacja między selektorami wybiera elementy B leżące gdziekolwiek wewnątrz elementu A, na dowolnej głębokości.
- :has()Wybiera element na podstawie tego, co zawiera lub co stoi za nim. Pozwala stylować rodzica według jego dzieci.
- :focusPasuje do elementu, który ma fokus, czyli przyjmuje teraz dane z klawiatury, np. do klikniętego pola formularza.
- :checkedPasuje do zaznaczonego pola wyboru, wybranego przycisku radio i wybranej opcji na liście select.
Widzisz błąd albo brakuje przykładu? Napisz do nas.