#1 Co jsou kombinátory?
Kombinátor slouží k určení vztahu mezi dvěma selektory. Jsou určeny pro specifické případy a díky nim není v některých případech nutné vytvářet nové identifikátory nebo třídy.
Druhy
Jedním z nich je také vnoření, které jsme popsali v jiném článku, přičemž v tomto se zaměříme na kombinátory využívající symboly pro určení vztahu.
#2 Kombinátor >
Kombinátor > označuje všechny prvky, které jsou přímými potomky daného prvku. Přímý potomek znamená, že se nachází na úrovni o jednu nižší než je rodič daného prvku.
<div>
<p>Odstavec textu</p>
<p>Odstavec textu</p>
<div>
<!-- Tento odstavec nebude mít šedou barvu -->
<p>Odstavec textu</p>
</div>
<p>Odstavec textu</p>
</div>
div > p {
color: gray;
}
V tomto příkladu budou mít všechny prvky <p> šedou barvu textu, kromě odstavce, který se nachází v dalším prvku <div>, jelikož se nejedná o přímého potomka.
#3 Kombinátor +
Znak + vybírá prvky, které jsou mezi sebou přímo sousedí. V tomto příkladu bude mít červené pozadí pouze druhý a třetí prvek odstavce <p>, jelikož se přímo vedle nich nachází odkaz <a>.
<p>1. odstavec textu</p>
<p>2. odstavec textu</p>
<a href="index.html">Odkaz na hlavní stránku</a>
<p>3. odstavec textu</p>
<p>4. odstavec textu</p>
p + a {
background-color: red;
}
#4 Kombinátor ~
Podobný kombinátoru +, kombinátor ~ vybere všechny prvky, které následují daný prvek, ale zároveň jsou na stejné úrovni. V následující ukázce bude mít modrou barvu textu druhý, třetí a pátý odstavec textu. Čtvrtý odstavec textu avšak nikoli, i když se nachází po prvku <a>, ale není na stejné úrovni.
<p>1. odstavec textu</p>
<a href="index.html">Odkaz na hlavní stránku</a>
<p>2. odstavec textu</p>
<p>3. odstavec textu</p>
<div>
<p>4. odstavec textu</p>
</div>
<p>5. odstavec textu</p>
a ~ p {
color: blue;
}