A + B
Znak + wybiera element B, który stoi bezpośrednio za elementem A i ma z nim wspólnego rodzica.
Przykład
#h3 + p {
font-size: 17px;
color: #fff;
}<style>
:where(article) h3 { margin: 0 0 6px; }
:where(article) p { margin: 0 0 6px; color: #a1a1aa; }
</style>
<article class="stage">
<h3>Selektory w praktyce</h3>
<p>Pierwszy akapit po nagłówku jest większy i jaśniejszy.</p>
<p>Kolejne akapity wyglądają zwyczajnie, bo nie stoją tuż za nagłówkiem.</p>
</article>Definicja i zastosowanie
#Kombinator sąsiada, nazywany też kombinatorem następnego rodzeństwa, łączy dwa elementy stojące tuż obok siebie. Zapis h2 + p trafi w akapit, który następuje zaraz po nagłówku h2, ale już nie w kolejne akapity ani w akapit oddzielony innym elementem.
Oba elementy muszą mieć wspólnego rodzica, a B musi stać za A, nigdy przed nim. Tekst i komentarze między nimi się nie liczą, liczą się tylko elementy.
Typowe zastosowania to wyróżnienie pierwszego akapitu po nagłówku, odstęp między sąsiednimi elementami (li + li) oraz reakcja na stan pola formularza: input:checked + label zmienia etykietę stojącą zaraz za zaznaczonym polem.
CSS nie ma osobnego kombinatora poprzedniego sąsiada. Gdy chcesz ostylować element stojący przed innym, użyj :has(): h2:has(+ p) wybiera nagłówek, po którym stoi akapit.
Składnia
#A + B { właściwość: wartość; }Przykładowe selektory
#- Tylko element stojący zaraz za
.start. Czwórka już nie pasuje. - Każdy
span, tuż przed którym stoi innyspan. Szóstka odpada, bo jej poprzednikiem jestem. - Kombinatory łączą się w łańcuch: tu drugi element za
.start. - Każde dziecko ramki, które ma poprzednika. Szary zostaje tylko pierwszy element, dlatego ten wzór służy do odstępów między elementami.
Przykładowe selektory w praktyce
#.start + span
.start. Czwórka już nie pasuje..start + span { background: #7c3aed; color: #fff; }span + span
span, tuż przed którym stoi inny span. Szóstka odpada, bo jej poprzednikiem jest em.span + span { background: #7c3aed; color: #fff; }.start + span + span
.start..start + span + span { background: #7c3aed; color: #fff; }.demo > * + *
.demo > * + * { background: #7c3aed; color: #fff; }Więcej przykładów
#.option input:checked + label {
border-color: #a78bfa;
background: rgb(124 58 237 / 0.2);
color: #fff;
}<style>
.option { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.option label { flex: 1; padding: 8px 12px; border: 2px solid #3f3f46; border-radius: 10px; color: #a1a1aa; cursor: pointer; }
</style>
<div class="option"><input type="radio" name="plan" id="plan-1" checked><label for="plan-1">Plan miesięczny</label></div>
<div class="option"><input type="radio" name="plan" id="plan-2"><label for="plan-2">Plan roczny</label></div>Kliknij drugą opcję. Styl przechodzi na etykietę stojącą tuż za zaznaczonym polem.
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
#- Do odstępów między elementami listy wystarczy
li + li { margin-top: 8px; }: pierwszy element nie dostanie zbędnego marginesu. W kontenerach flex i grid prostszy jestgap. - Przy polach formularza zachowaj kolejność w HTML: najpierw
input, potemlabel. Kombinator działa tylko w przód. - Poprzedniego sąsiada wybierzesz przez
:has(), np.label:has(+ input:invalid)to etykieta stojąca przed błędnym polem.
Powiązane hasła
#- A ~ BZnak ~ wybiera wszystkie elementy B, które stoją gdziekolwiek za elementem A i mają 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.
- :checkedPasuje do zaznaczonego pola wyboru, wybranego przycisku radio i wybranej opcji na liście select.
- *Gwiazdka pasuje do każdego elementu. Służy do resetów stylów i reguł dla wszystkich dzieci wybranego kontenera.
Widzisz błąd albo brakuje przykładu? Napisz do nas.