Návštěva odborného weblogu reinholdweber.com a otestování Diagnostického CSS skriptu mě inspirovalo k napsání dalšího článku na tematiku kaskádových stylů, tentokrát trochu podrobněji o pseudo~třídách a selektorech. Text se týká částečně i CSS3, hlavně ale porovnání interpretace nejrozšířenějšími prohlížeči. 

Který z nich na tom skončil nejhůř snad ani uvádět nemusím… Nejdříve tedy k takzvaným pseudo~třídám. Třídy jako :hover či :first-letter byste měli snad všichni znát, existuje však i spousta dalších. Uvádět zde všechny nemá smysl, pohovořím jen o těch, jejichž použití se nám mnohdy samo nabízí.

/* Vsechny testovane prohlizece, vcetne IE6 */

/* prvni pismeno odstavce */
p:first-letter { color: red; }

/* prvni radek odstavce */
p:first-line { color: blue; }

Podpora tříd:first-lettera:first-lineje sice téměř stoprocentní, avšak s ostatními je to už poněkud horší. Prázdné elementy nám pomocí třídy:emptydovolí ostylovat pouze Firefox, Opera 9.50 a částečně i Safari 3, které ovšem chybně přiřadí definované vlastnosti všem elementům daného jména.

/* Firefox 2,3, Netscape 9, Opera 9.5, Safari 3 chybne */

/* prazdny element, napr. <p></p> */
p:empty {
  background: lime;
  padding: 5px;
}

Další pseudo~třídy nám dovolují stylovat formulářové prvky.:checkedje obdobainput[type="checkbox"][checked="checked"]. Podporuje ji Firefox, Netscape, Opera a Safari, pokud ovšem chceme docílit například rámečku okolo, vstříc nám vyjde pouze Opera :

/* firefox 2,3, netscape 9, opera 9+, safari 3, ramecek pouze opera */

/* zaskrtly checkbox */
input:checked {
  border: 1px solid red;
  margin-top: 50px;
}

Další způsob, známý například ze stylování právě formulářových prvků jsou definice pro elementy s konkrétními html atributy či dokonce omezení na přesné hodnoty jejich atributů. Funguje ve Firefoxu, Netscapu, Opeře, Safari a IE7 :

/* firefox 2,3, netscape 9, opera 9+, safari 3, IE7 */

/* vsechny tagy majici atribut align */
*[align] { font-style: italic; }

/* prazdne odkazy */
a[href=""], a[href="#"] { font-weight: bold; }

CSS3 nám v podobných zápisech dovoluje dokonce i základy použití regulárních výrazů.*[class^="a"]ovlivní všechny třídy všech elementů začínajících naa,*[class$="b"]zase všechny třídy jejichž název končí nab. Podpora v prohlížečích je stejná jako v předchozím příkladu :

/* každý div, jehož název třídy začíná na left */
div[class^="left"] { background: #ccc; }

/* každý div, jehož název třídy končí na t */
div[class$="t"] { font-style: italic; }

Na závěr si dovolím ještě krátkou zmínku o selektorech+a~mající vliv na některé následující elementy podle definice. Při definici podobné následující se bude pravidlo vztahovat pouze na první odstavec následující za nadpisem h2, a to pouze pod podmínkou, že odstavec následuje bezprostředně za nadpisem :

h2 + p { color: green; }

Spojíme-li nadpis s odstavcem tildou, ovlivněn bude každý další odstavec následující za nadpisem. Podpora v prohlížečích je stejná jako v předchozích dvou příkladech, a to Firefox, Netscape, Opera, Safari a IE7.

h2 ~ p:first-letter {
  font-size: 130%;
  color: red;
}

Zdroje