Málo známé vlastnosti CSS

Výběr potomků

<style type="text/css">
#obsah p a { color: #FF0000; }
</style>

<div id="obsah">
 <p>
 <a href="https://www.maxiorel.cz">Maxiorel</a>
 </p>
</div>

<div id="obsah2">
 <p>
 <a href="http://www.rejpal.cz">Rejpal.cz</a>
 </p>
</div>

Výběr po sobě jdoucích prvků

Tento trik není moc praktický, protože při velkém počtu po sobě jdoucích prvků (třeba řádků tabulky), vyžaduje velice dlouhou definici v CSS:

<style type="text/css">
tr{background-color: #39f;}
tr+tr{background-color: #fff;}
tr+tr+tr{background-color: #39f;}
</style>

<table cellpadding="5">
    <tr>
        <td>jedna</td>
        <td>dvě</td>
    </tr>
    <tr>
        <td>tři</td>
        <td>čtyři</td>
    </tr>
    <tr>
        <td>pět</td>
        <td>šest</td>
    </tr>
</table>

Výběr podle atributů

Zajímavá možnost výběru prvků v závislosti na tom, zda mají definovánu nějakou vlastnost anebo zda hodnota vlastnosti odpovídá konkrétní hodnotě.

a[title] { cursor:help; color:#FF0000; text-decoration:none;}

<a href="https://www.maxiorel.cz/">Maxiorel</a>
<br />
<a href="http://www.rejpal.cz/" title="Diskuze pro rejpaly">Rejpal</a>

a[id="diskuze"] { color:#0000FF; text-decoration:none;}

<a href="http://www.rejpal.cz/" id="diskuze">Rejpal</a>

Chcete-li styl aplikovat pouze na prvek, jehož hodnota některého atributu obsahuje určitý text, použijte následující postup:

a[title~="Nejlepší"] { color:#33CC33;}

<a href="https://www.maxiorel.cz/" title="Nejlepší odkaz">Maxiorel</a>
<a href="http://www.rejpal.cz/" title="Nejlepší fórum">Rejpal</a>

Ukázkový soubor HTML se všemi zde uvedenými příklady najdete zde. Pokud tyto techniky použijete na svém webu, budu rád, když se pochlubíte v diskuzi pod článkem.