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

[sourcecode language=“css“]h1 {border-bottom: 1px solid red;}
p.black {color: black;}
div#red {background-color: red;}
[/sourcecode]

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

[sourcecode language=“css“]a[name] {color: green;}
a[href=“https://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;}[/sourcecode]

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

Líbil se vám článek? Sdílejte jej prosím: