Szelektorok kombinálása

• 2018.11.01.
• css sorozat
• csshow to
• Leoamros

Ma két olyan szelektort fogunk megnézni, melyekkel egy elem után következő egy vagy több elemre tudunk hivatkozni.

Elem után következő elem kiválasztása

(A + B)

Ez a szelektor az A után következő első B-re hivatkozik, szóval minden A utáni első B lesz csak formázva.

Példa:

div + p {
    color: green;
}

Tehát minden div utáni első p szövege zöld lesz. DEMO

Elem után következő elemek kiválasztása

(A ~ B)

Kicsit hasonlít a fenti A + B szelektorra, Ez a szelektor az A után következő összes B-re hivatkozik, szóval minden A után következő B lesz formázva.

Példa:

div ~ p {
    color: green;
}

Tehát minden div után következő összes p szövege zöld lesz. DEMO