Pokročilé vztahy mezi prvky

Selektory v CSS umožňují vyjádřit i některé rafinovanější vztahy mezi prvky. Tyto selektory trpěly slabší podporou v klientech, ovšem moderní generace webových prohlížečů je umí. V současnosti není důvod se jich obávat.

Dítě

Trochu se podobá selektoru potomka. Tentokrát ovšem požaduje, aby druhý z uvedených prvků byl dítětem (čili přímým potomkem, bez jakýchkoli prvků v hierarchii mezi nimi) prvního. Zapisuje se pomocí znaku „>“ mezi příslušnými prvky. Například

h1 > em { color: red; }

bude uplatněno na <em> v nadpisu:

<h1>Příkaz <em>delete</em></h1>

nikoli však na

<h1>Příkaz <a id="delete"><em>delete</em></a></h1>

kde vadí <a> nacházející se v hierarchii mezi nimi.

Následník

Zapíšete-li v selektoru mezi dvojici prvků „+“, požadujete, aby druhý byl následníkem prvního. To znamená, že oba mají stejného rodiče a ve zdrojovém kódu se nacházejí bezprostředně za sebou. Pravidlo se vztahuje jen na druhý prvek.

Například pravidlu

h2 + p { color: gray; }

vyhoví jen takové <p>, jež následuje ihned za nadpisem <h2>. Například první ze dvou odstavců v tomto kódu bude šedý:

<h2>Instalace</h2>

<p>V této části popíšeme instalaci programu.</p>

<p>Program ke své činnosti využívá...</p>

Existuje také volnější verze tohoto selektoru, zapisovaná znakem „vlnka“ (~). Platí pro všechny sourozence prvního prvku, kteří se ve zdrojovém kódu nacházejí za ním. Například toto pravidlo

h2 ~ p { color: blue; }

obarví všechny odstavce následující za <h2> modře. Mohou mezi ně být vloženy i jiné prvky (např. <h3> nebo <ul>), ale pokud se kdekoli před ním ve zdrojovém kódu nachází <h2> se stejným rodičem, bude odstavec modrý.