7. Pokročilé selektory CSS

Již víte, jak používat většinu z dostupných typů CSS selektorů a jak je kombinovat. Toto jsou dostatečné znalosti pro kódování jednoduché webové stránky. Ale občas se může stát, že je potřeba trik, k nakódování zajímavého efektu, nebo prostě zlepšení interakce s webovou stránkou.

Pojďme se podívat na tyto zvláštní selektory.

Selektor dítěte

Ukázali jsme si, jak zvolit všechny vnořené prvky. Ale představme si, situaci, kdy budeme mít do sebe vnořených více prvků - typicky navigace a seznamy. Může nastat okamžik, kdy budeme chtít graficky odlišit jednotlivé prvky. Podívejme se na příklad seznamu:

ul li {
  color:  rgb(134, 134, 134);;
  padding: 1rem 0;
}

Tímto výběrem bychom vybrali všechny <li> elementy, které mají nějaký nadřazený prvek <ul>.

<ul class="shopping-list">
  <li>
    Jídlo a pití:
    <ul>
      <li>Neperlivá voda</li>
      <li>Mléko</li>
      <li>Sýr</li>
    </ul>
  </li>
  <li>
    Drogerie:
    <ul>
      <li>Šampón</li>
      <li>Prášek na praní</li>
      <li>Zubní pasta</li>
    </ul>
  </li>
  <li>
    Oblečení:
    <ul>
      <li>Bílé tričko</li>
      <li>Tílko</li>
      <li>Černé šortky</li>
    </ul>
  </li>
</ul>

Proto potřebujeme nějakým způsobem říci prohlížeči, že chceme vybrat jen prvky v prvním vnoření. K tomu naštěstí existuje zápis:

.shopping-list > li {
  padding: 1rem 0;
  color: dodgerblue;
}

Díky vložení znaku > místo mezery, dojde k vybrání jen prvků v prvním vnoření.

Ostatní

Ještě existují selektory "bratrské". Jejich použití se v praxi však používá pouze málo, proto je zde jen v rychlosti zmíníme:

/*
Vybere element typu li, který je hned 
za elementem s třídou select-my-first-sibling
*/
.select-my-first-sibling + li {
  color: mediumvioletred;
}

/*
Vybere všechny atributy typu li, které jsou hned
za elementem s třídou select-all-my-siblings
*/
.select-all-my-siblings ~ li {
  color: seagreen;
}

<ul>
  <li>Jablka</li>
  <li class="select-my-first-sibling">Banány</li>
  <li>Švestky</li>
  <li>Pomeranče</li>
  <li>Mango</li>
</ul>

<ul>
  <li>Petržel</li>
  <li class="select-all-my-siblings">Celer</li>
  <li>Pórek</li>
  <li>Mrkev</li>
  <li>Cibule</li>
</ul>