Combinators si Selectors

postat acum 2 ani de Stefanescu Mihai in categorie CSS

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;
}

 

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Acest articol a fost mutat de pe vechea platforma.
Pentru orice eroare aparuta la mutare va rog sa ma contactati!