Jeśli <p>
element znajduje się bezpośrednio po <div>
elemencie, czy nie oznacza to, że <p>
element jest poprzedzony <div>
elementem?
To jest poprawne. Innymi słowy, div + p
jest podzbiorem z div ~ p
- cokolwiek dopasowane dawna jest również dopasowane przez ten ostatni, z konieczności.
Różnica między +
i ~
polega na tym, że ~
pasuje do wszystkich następnych rodzeństwa, niezależnie od ich bliskości od pierwszego elementu, o ile oboje mają tego samego rodzica.
Oba te punkty są najbardziej zwięźle zilustrowane na jednym przykładzie, w którym każda reguła stosuje inną właściwość. Zauważ, że p
ta następująca bezpośrednio po div
ma zastosowane obie reguły:
div + p {
color: red;
}
div ~ p {
background-color: yellow;
}
<section>
<div>Div</div>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
</section>
<section>
No div
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
</section>
W każdym razie szukam selektora, w którym mogę wybrać element znajdujący się bezpośrednio przed danym elementem.
Niestety jeszcze takiego nie ma .
+
jest najbliższym następnymp
elementem i~
zawiera wszystkie następnep
elementy (po każdymdiv
elemencie)