Un combinator este cel ce explica relatia dintre selectori.
Un selector CSS poate contine mai mutle elemente, de fapt intre selectori pot exista si combinatori.Incepand cu CSS3 au aparut diferiti combinatori:
- descendant selector
- child selector
- adjacent sibling selector
- general sibling selector
Descendant Selector
Acest selector descendent cauta toate elementele descendente unui anumti element.
Urmatorul exemplu selecteaza toate elementele <span> din interiorul unui <div>:
1
2
3
|
div span{ background-color : red ; } |
Child Selector
Acest tip de selector cauta toate elementele care sunt “copil” imediat al unui anumit element.
Urmatorul exemplu va afecta toate elementele <span> ce sunt “copil” imediat al elementelor <div>:
1
2
3
|
div > span { background-color : #ff0000 ; } |
Adjacent Sibling Selector
Acest tip de selector cauta toate elementele ce sunt inrudite si adiacente ale elementului specificat.
Cand spun inrudit ma refer la faptul ca au acelasi element parinte, iar cand spun adiacent ma refer la elementele ce urmeaza imediat.Urmatorul cod va selecta toate elementele <span> ce sunt amplasate imediat dupa un element <div>:
1
2
3
|
div + span { background-color : #ccc ; } |
General Sibling Selector
Acest tip de selector cauta toate elementele ce sunt inrudite cu un anumit element.
Urmatorul cod selecteaza toate elementele <span> ce sunt inrudite cu elementul <div>:
1
2
3
|
div ~ span{ background-color : #00ff00 ; } |