#1 Typy seskupování
Selektory lze seskupovat do komplexnějších vzorců, které tak vyhledávají specifičtější případu některého prvku.
- Vnoření – selekce prvku, který je potomkem jiného prvku
- Skupiny – seskupení vícero selektorů, které sdílí stejnou vlastnost
- Shlukování – výběr prvků, které mají všechny případy definovaných selektorů
#2 Vnoření
Jako vnořené selektory se označují selektory typové, class a id, které se nacházejí v CSS za dalším selektorem, přičemž jsou na rozdíl od přiřazování odděleny mezerou. Tímto se vybírají prvky, které jsou v HTML vně jiných prvků.
<div>
<p>Odstavec textu</p>
<a>Odkaz</a>
</div>
<p>Odstavec textu</p>
<div id="blok">
<p>Odstavec textu</p>
<a>Odkaz</a>
</div>
V tomto příkladu se v HTML nachází dva prvky <div>, z nichž oba mají v sobě prvek <p> a <a>, druhý má ale atribut id a mezi nimi se nachází samostatný odstavec textu.
div p {
color: blue;
}
#blok a {
color: red;
}
V CSS se nachází deklarace div p, která označuje každý odstavec, který se nachází v prvku <div> – tedy, v tomto případě, každý odstavec, který je v prvku <div> bude mít modré písmo. V druhé CSS deklaraci se deklaruje, že odkaz, který je vně prvku s identifikátorem #blok bude mít červenou barvu – na tomto příkladu to bude pouze druhý odkaz, jelikož se jako jediný nachází v prvku s #blok.
#3 Skupiny
Skupiny, jsou celky selektorů, které jsou sdružovány na základě sdílení stejné vlastnosti. Tuto funkci je možné aplikovat na všechny základní selektory. Toto…
h2 {
font-size: 150%;
}
h3 {
font-size: 150%;
}
…lze nahradit tímto…
h2, h3 {
font-size: 150%;
}
#4 Shlukování
Selektory id a class mají jednu speciální vlastnost – shlukování – lze je v CSS přiřazovat přímo k prvku, tzn. lze například vybrat pouze ty prvky, které mají danou třídu a i když bude mít jiný prvek tutéž třídu, styly se pro něj aplikovat nebudou.
<h2 class="bold">Nadpis</h2>
<p>Odstavec textu.</p>
<p class="bold">Odstavec textu s tučným písmem.</p>
p.bold {
font-style: bold;
}
V tomto příkladu se v HTML nachází tři prvky – jeden nadpis a dva odstavce textu, a v CSS jeden styl, které definuje, že každý prvek <p> s třídou .bold bude mít tučné písmo. Tedy, i když má nadpis třídu .bold, nejedná se o prvek <p> a styl na něj aplikován nebude. Podobně to je s první odstavcem textu, který naopak nemá třídu .bold, ale jedná se o prvek <p>, avšak nemá kombinací obojího, tudíž na něj styl aplikován také nebude.