CSS Specificity And Inheritance (Inayaili de Leon)
Stop Breaking Inheritance (Bobby Jack)
The Art and Zen of Writing CSS (Jim Jeffers)
KAIKKI E-ELEMENTIT SAAVAT SÄÄNNÖN: e { } p { } * * *
KAIKKI E1- JA E2-ELEMENTIT: e1, e2 { } h1, h2 { } * * *
KAIKKI C-LUOKKAAN KUULUVAT: .c { } .punainen { } <p class="punainen"></p> * * *
VAIN YHDELLE TIETYLLE ID-TUNNUKSISELLE E-ELEMENTILLE ON TARKOITETTU SÄÄNTÖ: #e { } #vainmina { } <p id="vainmina"></p> * * *
KAIKKI E2-ELEMENTIT E1-ELEMENTIN JÄLKEEN, KUNHAN E1 JA E2 OVAT SAMAN ISÄN SISÄLLÄ: e1~e2 { } p~ul { } <p>Tämä vaikuttaa.</p> <ul> <li>tänne</li> </ul> <h2>otsikko</h2> <ul> <li>ja tänne</li> </ul> * * *
HETI SEURAAVA MAHDOLLINEN E2-ELEMENTTI E1-ELEMENTIN _JÄLKEEN_: e1+e2 { } div+p { } <div> <h2>harhautus</h2> </div> <p>tämä</p> * * *
MIKÄ TAHANSA E2-ELEMENTTI E1-ELEMENTIN _SISÄLLÄ_ SAA SÄÄNNÖN: e1 e2 { } ul li { } * * *
KAIKKI E2-ELEMENTIT E1-ELEMENTIN _SISÄLLÄ_: e1 > e2 { } * * *
ENSIMMÄINEN E-ELEMENTTI JONKIN ISÄN SISÄLLÄ: e:first-of-type { } p:first-of-type { } <p>tämä</p> <p>ei tämä</p> <p>ei tämä</p> <p>ei tämä</p> * * *
N:S E-ELEMENTTI JONKIN ISÄN SISÄLLÄ: e:nth-of-type(n) { } p:nth-of-type(2) { } <p>ei tämä</p> <p>tämä</p> <p>ei tämä</p> <p>ei tämä</p> * * *
VIIMEINEN E-ELEMENTTI JONKIN ISÄN SISÄLLÄ: e:last-child { } p:last-child { } <p>ei tämä</p> <p>ei tämä</p> <p>ei tämä</p> <p>tämä</p> * * *
E-ELEMENTILLÄ MIKÄ TAHANSA A-ATTRIBUUTTI: e[a] { } p[dir] { } * * *
E-ELEMENTIN A-ATTRIBUUTILLA TASAN B-ARVO: e[a=b] { } p[dir=rtl] { } * * *
E-ELEMENTIN A-ATTRIBUUTISSA S-SANA: e[a~=s] { } [title~=kukka] { } <img src="abc.jpg" title="tuo kukka">tämä <img src="def.jpg" title="kukkanen">ei tämä * * *
E-ELEMENTIN A-ATTRIBUUTTI _ALKAA_ B-ARVOLLA: e[a|="b"] { } [lang|=en] { } * * *
E-ELEMENTIN A-ATTRIBUUTTI _PÄÄTTYY_ B-ARVOLLA: e[a$="b"] { } div[class$="nen"] { } <div class="punainen">tämä</div> <div class="keltainen">tämä</div> * * *
C-LUOKKAAN KUULUVAT E-ELEMENTIT SAAVAT SÄÄNNÖN: e.c { } h1.punainen { } * * *
YHDISTELMÄ SÄÄNNÖILLE "E1 E2" JA "E.LUOKKA": e1 e2.c { } div p.punainen { } * * *
KUMOA E-ELEMENTILLE EDELLISIÄ SÄÄNTÖJÄ: e { sääntö; !important } p { font-size: large; !important }
Muutettu viimeksi: 10. huhtikuuta 2015
Tekijä: Tomi Häsä (tomi.hasa@gmail.com)
URL: http://sites.google.com/site/tomihasa/css-muistiinpanoja