Selektory referencyjne w css

Question

Witam, poszukuje informacji o referencyjnych selektorach w css, Mam na myśli coś takiego:

.class~.class2

Oraz

.class + .class2

 

O co chodzi dokładnie z tymi dwoma, bo tylko je jako tako rozumiem, a chciałbym dokładniej zrozumieć ich zasadę.

Answer 1

Selektor z tyldą: "A ~ B" szuka elementu B, który jest którymkolwiek (dowolnym) następnym rodzeństwem elementu A: https://css-tricks.com/child-and-sibling-selectors/#general-sibling-combinator

Selektor z plusem: "A + B" szuka elementu B, który jest bezpośrednim (przyległym) następnym rodzeństwem elementu A: https://css-tricks.com/child-and-sibling-selectors/#adjacent-sibling-combinator

Istotne jest, że selektory rodzeństwa nie działają w drugą stronę (czyli nie można znaleźć elementu A, który jest poprzedzającym rodzeństwem elementu B) - podobnie jak nie ma selektora parenta.