Combinators si Selectors

Stefanescu Mihai 2 years ago 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;
}

 

Programator de ~8 ani, am lucrat la proiecte din mai multe industrstrii, de la eCommerce la telecomunicatii la automatizari. In acest timp am folosi diferite tehnologii, de la PHP, MySQL, PostgreSql, RabbitMq, Redis, Memcached si altele.


Get in touch
Pentru nelamuriri, dubii, comentarii si chestii de pe suflet ne putem auzi pe Discord, Reddit sau poti deschide o discutie noua pe forum

Club-ul este dedicat membrilor si ofera access la mai multe zone ale website-ului.
Login Register

🔖 Bookmarks
âœĻ Pentru a sustine aceasta comunitate am sa te rog sa te autentifici sau sa te inregistrezi!

🌊ïļ Discord
Back to top
Folosim cookie-uri pentru a oferi functionalitatile critice ale aplicatiei Invata-Programare. Folosim cookie-uri si pentru a analiza traficul, pentru care e nevoie de consimtamantul dvs. explicit.