Introducere în Web Development

Selectorii compuși permit combinarea mai multor selectori simpli, pentru a ținti elemente mai specifice (spoiler).

Selectori lipiți

Mai mulți selectori se pot lipi pentru a ținti elemente care îndeplinesc mai multe condiții simultan.

De exemplu, putem ținti toate ancorele care au o anumită clasă a.nume-clasă, sau elementele care au mai multe clase simultan .a.b.c, sau elementele cu un ID, dar doar dacă ID-ul este aplicat pe un anumit tip de element și are anumite clase footer#id.clasa1.alta-clasa.

Orice combinație te gândești, probabil poate fi folosită.

Singurul lucru pe care trebuie să îl consideri e ca selectorul cu nume de element se pune la început. Celelalte nu contează. Pentru mine, cea mai logică ordine ar fi: element#id.clase[atribute].

                    a.menu.active
                

                    <a class="menu active">
                

                    #sidebar.open
                

                    <div id="sidebar" class="open">
                

Listă de selectori

Dacă vrem să aplicăm stiluri mai multor elemente, folosind selectori diferiți, putem să combinăm mai mulți selectori, simpli sau compuși. Punem toți selectorii de care avem nevoie, și îi separăm prin virgulă:

                    h2, h3, .red.hot {
  color: red;
}
                

                    <h2>
<h3>
<div class="red hot">
                

Descendent

Se pot selecta elemente care există undeva în interiorul altui element, chiar dacă nu direct. Acesta este cel mai folosit selector compus.

                    thead th {
  background: blue;
}
                

                    <thead>
  <tr>
    <th>Va fi albastru</th>
  <tr>
</thead>
<tbody>
  <tr>
    <th>Nu știm culoarea</th>
  <tr>
</<tbody>
                

Descendent imediați (copii) >

Dacă vrem să selectăm doar descendenții imediați, separăm „părintele” de „copil” prin semnul mai mare (>).

                    li > a {
    display: block;
}
                

                    <li><a>Va fi selectat</a></li>
<a>Nu va fi selectat</a>
<li><span><a>Nu va fi selectat</a></span></li>
                

Element adiacent

Putem selecta elemente care apar imediat după alt element, folosind semnul plus + între primul și al 2-lea element.

                    .target + span {
  background: yellow;
}
                

                    <span>Nu</span>
<span class="target">Nu</span>
<span>Da</span>
<span>Nu</span>
<span>Nu</span>