CSS kijelölők - A dokumentumfa
A dokumentumfa a HTML dokumentumszerkezet faszerkezetben történő ábrázolását jeleni. Úgy néz ki, mint egy családfa, az elemek hierarchikus viszonyban állnak egymással.
Készítettem egy egyszerű HTML oldalt, ami segíteni fog a CSS működésének megértésében. A weboldal itt érhető el.
Ez nem egy új MLM-hálózat tagjait ábrázolja, hanem a fenti weboldal faszerkezetét.
Gyermek - szülő
Ebben a faszerkezetben szülőnek nevezzük az olyan elemet, ami alatt egy szinttel áll még legalább egy másik elem. A gyermek pedig olyan elem, ami felett egy szinttel egy szülő áll.
A jelölt div elem szülője a h2 és az ul elemeknek. Ezért a h2 és az ul elemek a div elem gyermekei. Azonban az ezek alatt álló li és a elemek már nem gyermekei a div elemenk.
Hasonlóan a jelölt ul elem az alatta lévő két li elem szülője, a két li elem pedig az ul gyeremekei. Ha ezen li elemek alatt állna még másik elem is, akkor azok sem lennének már az ul gyermekei.
Ősök, leszármazottak
A jelölt elemek mind a div elem leszármazottai. A leszármazottakba beletartoznak a gyermekek és az unokák is. A div elem az összes jelölt leszármazott őse.
A html elem minden más elem őse, és minden elem a html elem leszármazotta. A html elemnek csak egy gyermeke van, a body, az ábrán csak a body elemet tüntettem fel.
Testvérek
Testvérek azok az elemek, amelyek ugyanazon a szinten helyezkednek el, és ugyanazon a szülőn osztoznak.
Formázzuk a h1-es címsorokat! Legyenek zöld hátterűek! Ezt az alábbi stíluslappal tudjuk elérni:
background: lime;
}
A formázott weboldal itt tekinthető meg. A dokumentumfával szemléltetve, a fenti stíluslap ezeket az elemeket formázta:
Csoportosítás
Egy meghatározásblokkot egynél több címkére is alkalmazhatjuk, ha vesszővel elválasztva felsoroljuk a formázandó címkéket.
background: lime;
}
A formázott weboldal itt tekinthető meg. A dokumentumfával szemléltetve, a fenti stíluslap ezeket az elemeket formázta:
Osztálykijelölők
Az előzőekben az összes h1, h2 címre vonatkozott a stílus. Ha nem akarunk ilyen egységes megjelenést, akkor a class attribútummal minden címkére külön szabályozhatjuk, hogy melyik stílus vonatkozzon rá, és melyik ne. A class attribútumot szinte bármelyik címkébe beleírhatjuk, így:
<h1 class="osztalykijelolo1">h1 címsor</h1>
<h2 class="osztalykijelolo2">h2 címsor</h2>Ekkor a stíluslapban így tudjuk különválasztani a h1 kétféle megjelenését:
background: lime;
}
h1.center, h2.center {
background: maroon;
}
A stíluslap első fele ugyanaz, mint eddig. A második fele újdonság. Ez a rész azokra a h1 és h2 címsorokra vonatkozik, amelyeknek a center nevű osztálykijelölőt adtuk meg a fenti deklarációval. Láthatjuk, hogy a background tulajdonság kétszer szerepel a stíluslapban; kérdés, hogy milyen színűek lesznek a center osztálykijelölővel ellátott címsorok? A válasz, hogy gesztenyebarnák, mert mindig a pontosabb stílus végzi a formázást. Először általánosságban adtuk csak meg, hogy minden h1, h2 legyen piros, de utána már pontosabban: minden, center osztálykijelölővel ellátott h1, h2 legyen gesztenyebarna. Ezért felülíródik a színre vonatkozó utastítás.
A formázott weboldal itt tekinthető meg. A dokumentumfával szemléltetve, a fenti stíluslap ezeket az elemeket formázta:
Egy bizonyos osztálykijelölőre vonatkozó stílust használhatunk rövidítve is. Az alábbi példa az összes olyan elemet gesztenyebarnára színezi, amelynek center nevű osztálykijelölője van.
background: maroon;
}
A formázott weboldal itt tekinthető meg. A dokumentumfával szemléltetve, a fenti stíluslap ezeket az elemeket formázta:
Azonosítókijelölők
Azonos nevű class attribútumból akármennyi lehet, de id attribútumból csak egyfajta érték fordulhat elő egy HTML dokumentumon belül.
Az id attribútum arra való, hogy egyértelműen azonosítson egy címkét, ezért két id ugyanolyan értékkel nem fordulhat elő egy oldalon belül. Az id-nek Javascriptben több jelentősége van, ott ennek segítségével tudunk egy elemre hivatkozni. Valójában az id attribútum ugyanarra kell, mint a class attribútum: ezekkel jelölhetünk meg egy-egy címkét.
Így kell megadni a HTML kódban:
<h1 id="piros">Piros színű címsor</h1>
<h1 id="kek">Kék színű címsor</h1>A stíluslapban pedig így tudunk bizonyos nevű id-ra stílust alkalmazni:
color: red;
}
h2#kek {
color: blue;
}
Ez ugyanaz, mintha az alábbi kódot írtuk volna. Ugyanis ez a két meghatározás az összes piros és kek id értékkel ellátott elemre hivatkozik, de csak egy-egy olyan elem van, amely ennek megfelel. Ugyanis az id két azonos értékkel nem fordulhat elő egy HTML oldalon belül.
color: red;
}
#kek {
color: blue;
}
Kijelölés attribútum alapján
Egy formázandó elemet az alapján is kijelölhetünk, hogy milyen attribútumot adtunk meg hozzá.
A példánkban két olyan link, azaz a címke van, amelyekhez megadtuk a title attribútumot (értéke az a szöveg, ami akkor jelenik meg, ha az egérmutató pihentetjük az adott linken). Az alábbi stíluslap az összes olyan linkre vonatkozik, amelynek van title attribútuma, bármi legyen is az értéke.
background: lime;
}
A formázott weboldal itt tekinthető meg.
Egy formázandó elemet az attribútuma értéke alapján is kiválaszthatunk. A most következő stíluslap az összes olyan linket kiválasztja, amelynek van title attribútuma, és az értéke pontosan title="A".
background: lime;
}
A formázott weboldal itt tekinthető meg.
Testvérek kijelölése
Az alábbi stílus csak az olyan h2-es címsorra vonatkozik, amelyik közvetlenül egy h1-es címsor után következik, és egymás testvérei. Ez olyankor hasznos, amikor a főcím és az alcím között nagyobb sorközt kívánunk megadni.
background: lime;
}
A formázott weboldal itt tekinthető meg.
Ezt lehet kombinálni akár az osztálykijelölővel, és akár három elem egymáshoz képesti helyzete alapján is formázhatunk:
background: lime;
}
Gyermekek kijelölése
A body > h2 kijelölő az összes olyan h2 elemre vonatkozik, amelyek gyermekei a body elemnek. Ha egy h2 elem csak leszármazotta, de nem gyermeke a body elemnek, akkor nem vonatkozik rá a stílus.
background: lime;
}
A formázott weboldal itt tekinthető meg.
A kijelölés attribútum alapján, a gyermekek és testvérek kijelölése szabályok sajnos nem működnek Internet Explorer 6 alatt, de Internet Explorer 7 és más böngészők alatt viszont már igen.
Öröklődés
Ha beállítunk egy tulajdonságot egy ős elemre, akkor ez a tulajdonság öröklődhet a leszármazottkra is.
Példánkban két div elem van. Ha ezekre beállítunk egy tulajdonságot, akkor a leszármazottai is öröklik a beállított tulajdonságot.
background: lime;
}
Az összes div leszármazotta zöld hátterű lesz, mert ez a tulajdonság öröklődik.
A formázott weboldal itt tekinthető meg. A dokumentumfával szemléltetve, a fenti stíluslap ezeket az elemeket formázta:
Néha ez a kijelölés túl általános nekünk. Ehelyett például megadhatjuk, hogy az egymásba ágyazott listáink hogyan jelenjenek meg. Az alábbi stíluslap pontosan arra a listára vonatkozik, ami maga is egy listában van benne, azaz beágyazott lista. Figyeljük meg, hogy szóköz van a két kijelölő között! Ha vesszőt teszünk, az mást jelent, lásd fent.
background: lime;
}
A formázott weboldal itt tekinthető meg. A dokumentumfával szemléltetve, a fenti stíluslap ezeket az elemeket formázta:
Ezt a jelölést is kombinálhatjuk az azonosító- és osztálykijelölőkkel, és tetszőleges mélységig választhatunk ki elemeket. Erre következik egy példa.
background: lime;
}
A formázott weboldal itt tekinthető meg. A dokumentumfával szemléltetve, a fenti stíluslap ezeket az elemeket formázta:
Ajánlott linkek
Kijelölők a CSS-ben, angolul: http://www.w3.org/TR/CSS21/selector.html