Základní zápis selektorů v css je všeobecně známý.  Možná na úvod by bylo vhodné si je lehce připomenout:

h1 {border-bottom: 1px solid red;}
p.black {color: black;}
div#red {background-color: red;}

Toto je úplný základ, který snad ovládají všichni. Pojďme se ale podívat na vyšší level zápisu. Následující zápisy nejčastěji využijete tehdy, když stylujete html dokument, který nemáte možnost ovlivnit. Jestliže ji totiž máte, nic vám nebrání si k jakémukoli prvku dopsat nějakou tu třídu, nebo identifikátor.

Selektory s atributy

a[name] {color: green;}
a[href="http://www.timesoft.cz"] {color: green;}
a[title~="Foto"] {color: green;}
a[title*="Foto"] {color: green;}
a[title^="Foto"] {color: green;}
a[title$="Foto"] {color: green;}

1. vybere veškeré odkazy, které obsahují atribut name
2. obdobně jako 1., jen přesnější zápis
3. vybere veškeré odkazy, které v atributu title obsahují text Foto
4. vybere všechny prvky (odkaz) s atributem title, jejichž hodnota obsahuje řetězec „Foto“.
5. vybere všechny prvky (odkaz) s atributem title, jejichž hodnota začíná na „Foto“.
6. vybere všechny prvky (odkaz) s atributem title, jejichž hodnota končí na „Foto“.

Upozorňuji, že záleží na velikosti písmen.

Ukázka – Selektory v CSS

Zaujal Vás článek? Informujte ostatní