1 |
Představte si, že máte stylovat následující elementy různě a k žádnému nechcete přidávat třídy:
<input type="text"> <input type="submit" value="submit"> <p class="title"> <p class="tit"> <a href="http://www.google.com"> <h2 lang="en"> <img src="a.jpg"> Normálně bychom například elementům input museli přidat třídy. CSS nám ale nabízí snadnější způsob jak oba elementy různě stylovat bez nutnosti přiřazení rozdílných tříd. |
2 |
Pokud chceme nastylovat pouze 1.element input (<input type="text">), použijeme následující selektor:
input[type=text]{ color: green; } Selektorem p[class~="tit"], vybereme pouze druhý element p, zatímco selektorem (hledá celá slova) p[class*="tit"] vybereme oba elementy. (nehledá celá slova = vyhovují oba) |
3 |
Pokud chceme nastylovat element jehož hodnota atributu začíná určitými slovy , použijeme následující selektor (vybereme ním element jehož hodnota atributu href začíná slovy: http://)
a[href^="http://"]{ color: green; } Vybereme všechny el. h2 s hodnotou atributu lang en: h2[lang|="en"]{ color: green; } Tímto selektorem vybereme všechny elementy img jejichž hodnota atributu href končí .jpg img[src$=".jpg"]{ margin: 30px; } |