Muistiinpanoja

CSS-muistiinpanoja

CSS-tietoutta

CSS Specificity And Inheritance (Inayaili de Leon)

Stop Breaking Inheritance (Bobby Jack)

The Art and Zen of Writing CSS (Jim Jeffers)

CSS-sääntöjä

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