Stylování html elementů na základě atributů

Pokud potřebujete stylovat pomocí css elementy html a neexistuje jiné rozlišení elementů než např. jejich popis (title), můžete použít výběr na základě atributů.

Výběr na základě hodnoty

HTML

<input type="button" value="Button 1">
<input type="button" value="Button 2">
<input type="button" value="Button 3">

Bez CSS

Nyní pomocí výběru na základě atributu hodnota (value) ostylujeme první input a druhý odstraníme.

input[value="Button 1"] {
  background-color: #D46A6A;
  padding: 10px;
}

input[value="Button 2"] {
  display: none;
}

Výsledek

Výběr na základě popisu

Nyní ostylujeme elementy <div> dle jejich popisu (atribut title)

HTML

<div>Nějaký div</div>
<div title="Popis">Toto je popis.</div>
<div title="Vysvetleni">Toto je vysvětlení</div>

CSS

div[title="Popis"] {
  color: #116611;
  font-weight: 600;
}

div[title="Vysvetleni"] {
  color: #AA6C39;
}

Vysledek