Atributy v CSS selektorech

Pomocí hranatých závorek můžete v selektorech pracovat s atributy a jejich hodnotami. Nejjednodušší variantou je uvést v hranatých závorkách název atributu. Selektoru vyhoví všechny prvky, které obsahují uvedený atribut.

Například bychom chtěli všechny prvky, jimž byl v HTML kódu přidělen identifikátor (atribut id), obarvit hnědě. Zajistí to pravidlo:

[id] {
    color: brown;
}

Požadavek na selektor lze kombinovat s dalšími, nejčastěji asi s názvem prvku. Řekněme, že hnědě mají být obarveny jen nadpisy kategorie <h2>, které mají přiřazen identifikátor:

p[id] {
    color: brown;
}

Kromě prosté přítomnosti můžete testovat i hodnotu atributu. Možností je celá řada, shrnuje je následující tabulka:

Například když budete důsledně dodržovat, že odkazy v rámci webu budou relativní, lze externí odkazy poznat podle toho, že jejich href začíná http:. Takže je pak třeba můžete barevně odlišit:

a[href^="http:"]   {
    color: red;
}

Nebo lze k odkazům na PDF soubory automaticky připojovat upozornění, že se jedná o PDF:

a[href$=".pdf"]:after {
    content: " (PDF)";
    color: gray;
}