Combinators si Selectors

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>:

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>:

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>:

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>:

div ~ span{
    background-color: #00ff00;
}