INAPOI
Scris de Marius Chiriac

Combinatorii CSS

In termeni simpli, combinatorii CSS sunt un mod care se pot „combina” selectorii bazat pe locatia unuia fata de celalalt in document.

Acestia sunt:

1. Selectorul descendend, reprezentat printr-un singur spatiu intre selectorii folositi. In exemplul „section p”, se vor selecta toate elementele „p” din interiorul elementelor „section” indiferent de cat de adanc se afla in structura:

section
 paragraph
 div
  paragraph
 /div
 paragraph
/section

2. Selectorul de copil direct, reprezentat prin simbolul „>”. In exemplul „section > p”, se vor selecta toate elementele „p” care sunt copii directi ale elementelor „section”:

section
 paragraph
 div
  paragraph
 /div
 paragraph
/section

3. Selectorul de copil adiacent, reprezentat prin simbolul „+”. In exemplul „section div + p”, se va selecta primul element „p” din „section”, copil direct, ce are inaintea lui un element „div”:

section
 paragraph
 div
  paragraph
 /div
 paragraph
 paragraph
/section

4. Selectorul de copil general, reprezentat prin simbolul „~”. In exemplul „section div ~ p”, se vor selecta toate elementele „p” din „section”, copii directi, ce au inaintea lor un element „div”:

section
 paragraph
 div
  paragraph
 /div
 paragraph
 paragraph
/section

Daca sunt folositi corect, acesti combinatori pot crea design-uri complicate si chiar pot inlocui codul javascript.

In exemplul urmator vom crea un mod interactiv, cu butoane pentru utilizatori, de a schimba background-ul a unul element dintr-un site. Pentru a realiza acest lucru ne vom folosi de combinatorul „~” si de pseudo-elementul „checked” ce indica daca un element de tipul „radio” este selectat sau nu.

Vom incepe prin crearea codului html. Intr-un „div” vom introduce multiple elemente de tipul „input” (in functie de numarul de culori dorite) si un alt element, in acez caz inca un div, ce va fi folosit pentru a afisa culoarea dorita:

<div>
 <input type=”radio”>
 <input type=”radio”>
 <input type=”radio”>
 <div></div>
</div>

Dupa ce avem structura incepem sa construim CSS-ul si la input introducem attributul „name” cu acelasi nume pentru toate (acest lucru va permite deselctarea unui input la selectarea altuia).

<div class=”bkg-wrapper”>
 <input name=”color” class=”bkg1 bkg-select” type=”radio”>
 <input name=”color” class=”bkg2 bkg-select” type=”radio”>
 <input name=”color” class=”bkg3 bkg-select” type=”radio”>
 <div class=”bkg-container”></div>
</div>

Clasele CSS introduse ne vor ajuta sa identificam toate elementele si sa le dam dimensiuni, culori si pozitii.

Clasa „bkg-wrapper” va functiona drept container-ul pentru toate celelalte elemente:

.bkg-wrapper{
 width:300px;
 height:300px;
 position:relative;
}

Clasa „bkg-container” va stiliza elementul caruia dorim sa ii schimbam culoarea la background:

.bkg-container{
 width:100%;
 height:100%;
 position:relative;
 border-radius:4px;
 transition:0.3s ease-out;
 margin-top:10px;
 border:1px solid #000;
}

Clasa „bkg-select” va stiliza elementele de tipul „input”:

.bkg-select{
 position:relative;
 width:32px;
 height:32px;
 margin-right:1px;
 cursor:pointer;
}

Clasele „bkg1”, „bkg2”, „bkg3” sunt folosite pentru a identifica ce input este selectat. Folosindu-le impreuna cu combinatorul „~” vom schimba culoarea la background:

input.bkg1:checked ~ .bkg-container{
 background:#CE1126;
}
input.bkg2:checked ~ .bkg-container{
 background:#FCD116;
}
input.bkg3:checked ~ .bkg-container{
 background:#002B7F;
}

La final am adaugat elemente de tipul „span” ce vor reprezenta culorile si stau peste elementele „input”. Desi nu sunt necesare, ele vor ajuta utilizatorul sa stie ce culori are la dispozitie fara sa fie nevoie sa dea click pe fiecare input sau sa adaugam text. Putem refolosi clasele „bkg1”, „bkg2”, „bkg3” pentru a adauga background-ul la aceste elemente:

.bkg1{background:#CE1126}
.bkg2{background:#FCD116}
.bkg3{background:#002B7F}

Puteti vedea codul final aici:

See the Pen
CSS Simple Color Picker
by Puiu (@Puiu)
on CodePen.

Dupa cum se vede, combinatorii CSS pot crea website-uri dimanice si interactive fara a fi nevoie sa introduceti cod Javascript si nu sunt dificil de invatat.

Mai multe articole

INOVEO a scris

INOVEO semneaza proiectul de rebranding pentru GURSK

Companie de distributie de implanturi si solutii complete pentru medicii stomatologi. Bucuresti, iunie 2025 – INOVEO, agentie de branding cu 25 de ani de experienta, a semnat proiectul de rebranding pentru GURSK, prima companie care [...]

Citeste tot articolul from Combinatorii CSS

Citeste tot articolul

INOVEO a scris

Ce ramane viu intr-o lume care invata sa mimeze viata?

Acest articol pleaca de la ideile care s-au conturat in timpul si imediat dupa recentele discutii de la IQ Digital, editia proaspat incheiata, desfasurata intr-un loc cu totul special: Cazinoul din Constanta – o bijuterie [...]

Citeste tot articolul from Combinatorii CSS

Citeste tot articolul

INOVEO a scris

Logo-ul nu conteaza

… chiar atat de mult cat crezi Spune pe bune, ai alocat ore intregi sau zile sau poate chiar saptamani in dezvoltarea unui logo pentru compania ta sau brandul tau? Cu siguranta ca da. Gandeste-te [...]

Citeste tot articolul from Combinatorii CSS

Citeste tot articolul

INOVEO a scris

Cat costa luxul

Pretul nu e o simpla eticheta. E o declaratie. Si, cel mai important, e parte integranta din procesul de constructie a brandului. Brandurile de lux nu vand produse. Vand statut, aspiratie, apartenenta la un cerc [...]

Citeste tot articolul from Combinatorii CSS

Citeste tot articolul