CSS2 Selectorok :: ie-css2selector.htc 0.1.3

Cél

A cél a CSS2-ben definiált selectorok megértetése IE-vel (IE5.0, IE5.5, IE6.0). Tehát NEM foglalkozik a tulajdonságok helyes értékeivel.

A hivatkozások a http://www.w3.org/TR/CSS2/-n elérhető specifikációra utalnak.

Támogatás

Támogatottak:

Nem támogatottak:

Bug (0.1.3)

Demó

Példa CSS: css/demo.css

5.2.1 csoportosítás
HTML > BODY DL B, HTML > BODY DL STRONG { color: blue; }
b, strong
5.3 univerzális szelektor
DT[title="5.3"] + DD + DD * { color: red; }
span, em, strong
5.4 típus-szelektorok
HTML > BODY DL VAR { color: navy; }
var
5.5 leszármazott szelektorok
HTML > BODY *[title="5.5"] + DD + DD * { color: maroon; }
span, em, strong
5.6 gyermek-szelektorok
HTML > BODY > DL > DT[title="5.6"] + DD + DD > Q { color: olive; }
span, em, strong, q
5.7 szomszédos testvér-szelektorok
HTML > BODY > DL > DT[title="5.7"] + DD + DD > SPAN + EM { color: yellow; font-weight: bold; }
span, em, strong, q
5.8 attribútum szelektorok
*[title="5.8"] + DD + DD > Q[title="era"] { color: green; }
span, em, strong, q[title="era"]
5.8.1 attribútumok és attribútum értékek egyezésének számítása (defined, equal, includes, dashmatch)
*[title="5.8.1"] + DD + DD *[lang] { font-weight: bold;}
*[title="5.8.1"] + DD + DD *[lang|=en] { color: purple; }
*[title="5.8.1"] + DD + DD *[lang|=en][class~=mari][class~=en][name="mal-lal"] { color: teal; }
*[title="5.8.1"] + DD + DD *[title|="strong"] { font-weight: normal; }
span[lang="hu"], em[lang="en-us" class="en mari jozsi" name="mal-lal"], strong[title="strong"], q[lang="en"]
5.8.3 osztály szelektorok
*[title="5.8.3"] + DD + DD > .elso { background: green; }
*[title="5.8.3"] + DD + DD > .elso.masodik { background: maroon; color: white; }
*[title="5.8.3"] + DD + DD > .elso.masodik.harmadik { background: white; color: red; }
span[class="elso"], em[class="elso masodik"], strong[class="elso masodik harmadik"]
5.9 ID szelektorok
HTML > BODY > DL > DD#id59 > B { color: fuchsia; }
HTML > BODY > DL > #id59 > STRONG { background: fuchsia; }
b, strong
4.1.1 közök figyelembe vétele
*[title = "4.1.1"] + DD + DD > SPAN[ lang = hu ]{ background: teal; }
span[lang="hu"], span
4.1.9 megjegyzések
*[title="4.1.9"] + DD + DD > *{ color: teal; /* XxX */ font-weight /**/: bold; /* */ text-transform /*LKL*/:/*Z*/ uppercase /* Y*/; }
span, em
6.4.3 egyediség figyelembe vétele (algoritmus)
HTML > BODY #id643 > B { color: yellow; } /* 103 */
HTML > BODY *[title="6.4.3"] + DD + DD[id=id643] > B { color: red; } /* 26 */
b
6.3 az @import utasítás
/* maga ez a példa: import.css > demo.css */

Használat

BODY {
   	behavior: url(js/ie-css2selector.htc);
  	-ie-css2selector-id : [id]; /* opcionális beállítás: csak ennak az ID-nek az utolsó importját olvassa be */
   	-ie-css2selector-ie5hide : true; /* opcionlis beállítás: IE5.0-ban elrejti az eredeti CSS-ket; lásd BUG */
}

Forrás

js/ie-css2selector.htc

További vegyes példák:

HTML > HEAD + BODY DIV P>SPAN+B
P[title] 
SPAN[title="title"]
SPAN[class~=class2][class~=class1]
LI[title~= "macika"][name~="zaza"]
LI[title|= "macika"]
DIV P + SPAN 
BODY > #x34y
DIV > UL > LI.elso
DIV > UL > LI.elso.masodik
DIV > UL > LI.elso.masodik.harmadik

Bekezdés

Bekezdés span után b és span után b

title class1 class2 class1&class2

x34y