CSS, pokročilé stylování: pseudo-třídy a selektory

 |  HTML, CSS, JavaScript  |  5 383x
CSS, pokročilé stylování: pseudo-třídy a selektory

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-letter a :first-line je sice téměř stoprocentní, avšak s ostatními je to už poněkud horší. Prázdné elementy nám pomocí třídy :empty dovolí 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. :checked je obdoba input[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 na a, *[class$="b"] zase všechny třídy jejichž název končí na b. 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

Facebook Twitter Google+

Komentáře k článku "CSS, pokročilé stylování: pseudo-třídy a selektory"

Gravatar
Barusak 29. 3 2008, 14:05
1/9 Sobota 29. Března 2008, 14:05  |  MSIE, Windows XP

Hlasj pro meprosim na tehle strance http://marrylife.blog.cz/ sem tam pod jmenem Barusak

Gravatar
Vasar 29. 3 2008, 15:26
2/9 Sobota 29. Března 2008, 15:26  |  Opera, Linux

[1] Barusak: Proboha proc?

Gravatar
Péťa 29. 3 2008, 17:06
3/9 Sobota 29. Března 2008, 17:06  |  Opera, Linux

Čau majku, testoval jsi CSS3 v jakých prohlížečích?
Já kdysi zkoušel průhlednosti a "kulaté rohy" ovšem pouze jenom FF (-:

Gravatar
Mike 29. 3 2008, 19:55
4/9 Sobota 29. Března 2008, 19:55  |  Opera, Windows XP

[3] Péťa: ahoj, co se týče kulatých rámečků (-moz-border-radius / -webkit-border-radius) tak tohle zobrazí pouze Firefox, Netscape a Safari 3

jinak vše, o čem jsem psal v článku jsem testoval v FF2, FF3, IE6, IE7, Netscape 9, Safari 3, Opera 9.26 a Opera 9.50. nejlíp z toho vyšel FF, Netscape a Opera 9.50

Gravatar
Josef Čech 1. 4 2008, 20:44
5/9 Úterý 1. Dubna 2008, 20:44  |  Firefox, Windows XP

V jaké verzi Safari 3 Ti :empty selektor chybuje? Verze 3.1 se mi zdá v pořádku (jak to bylo v 3.0.4 si teda již nepamatuji...).

Gravatar
Mike 1. 4 2008, 23:03
6/9 Úterý 1. Dubna 2008, 23:03  |  Opera, Windows XP

[5] Josef Čech: právě v 3.0.4 %0 při definování například p:empty se vlastnost aplikuje na všechny <p>

definovat obecně :empty jsem raděj nezkoušel, ještě by se z toho zhroutil internet %1

Gravatar
Josef Čech 2. 4 2008, 20:50
7/9 Středa 2. Dubna 2008, 20:50  |  Safari, Windows XP

[6] Mike: Tak to ano. Každopádně Safari 3.1 udělal poměrně velký krok dopředu co se týče CSS3 (viz prolinkovaný článek):

http://www.css3.info/safari-31-pushes-css3-support-forward/

Gravatar
Josef Čech 2. 4 2008, 20:55
8/9 Středa 2. Dubna 2008, 20:55  |  Safari, Windows XP

[7] *co se týče CSS3 selektorů

Gravatar
Mike 3. 4 2008, 00:49
9/9 Čtvrtek 3. Dubna 2008, 00:49  |  Opera, Windows XP

[8] Josef Čech: díky, vlastně bych ani nevěděl o existenci safari 3.1 %0 nainstaluju, vyzkouším.

Přidat komentář







Nevím, kolik to je
Parak simati, Muballit mitte, Nergal allatu mellamu mesaru, La tapallah Annuaki, Kettu Puluthu qillatua