A gyermekelemeknek nevezzük azokat az elemeket, amelyek közvetlenül más elemek alá vannak rendezve. Ez valóban kissé absztrakt hangzik, de egy példán keresztül könnyen érthetővé válik.
<test> <p>Bekezdés 1</p> <p>Bekezdés 2</p> <p>Bekezdés 3</p> </test>
Itt a test az őselem. A p-elemek mindegyike test gyermek eleme. Ennek alapján alkalmazható a gyermek elem szelektor.
test>p {
color: kék;
}
Ez a szintaxis az összes bekezdést, amelyek közvetlen gyerekei a testnek, kék színűvé teszi.
A következő példa még egyszer megmutatja a különbségeket a body p és body>p két utasítás között.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
test>p {
betűtípus:"Courier New", Courier, egyszerű;
betűméret: 200%;
}
test p {
szín:#0066FF;
}
</style>
</head>
<test>
<p>Bekezdés 1</p>
<p>Bekezdés 2</p>
<p>Bekezdés 3</p>
<div>
<p>Bekezdés 4</p>
</div>
</test>
</html>Az első három definiált p-szövegbekezdés közvetlenül a test gyerekei. A test p utasítás minden szövegbekezdésnek kék színt rendel. test>p pedig csak az első három szövegbekezdésre hat. Ezért ezek a bekezdések nagyobb méretben jelennek meg.
Következő lépésként bemutatom a következőelem szelektort. Ez a szelektor egy olyan elemet jelöl meg, amely közvetlenül másik eleme követ és ugyanazt az őselemet birtokolja. Erről ismét egy példa:
cím1+p {
szín: kék;
}
Ez a szintaxis beállítja egy bekezdés szövegszínét kék színűre. Azonban ez csak akkor érvényes, ha a bekezdés az első szintű címmel közvetlenül kapcsolódik.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1+p {
szín: kék;
}
</style>
</head>
<test>
<h1>Cím</h1>
<p>Bekezdés 1</p>
<h2>Cím</h2>
<p>Bekezdés 2</p>
<p>Bekezdés 3</p>
<div>
<p>Bekezdés 4</p>
</div>
</test>
</html>Tekintsétek meg az eredményt a böngészőben.
Csak az első bekezdés lesz itt kék színű. A többi bekezdés fekete. Ennek az az oka, hogy ezek a p elemek nem a h1, hanem az h2 után következnek.
Ami a következő elemeket illeti, a CSS3-ban további lehetőségek lettek bevezetve. Mostantól lehetséges az adott elem összes következő eleméhez való hozzáférés. Egy példa:
cím1~p {
szín: piros;
}
Ezen szintaxis alapján az összes cím1 után következő bekezdést megjelöli.
Egyébként nem csak a közvetlen elemeket lehet ansprechen. Az elemek attribútumainak is lehet hozzáférni.
Néhány ilyen szelektor:
• [att] - Az elemnek csak tartalmaznia kell az attribútumot. Hogy értéket is megadnak-e, az lényegtelen.
• a[href] - Az összes hiperhivatkozást (<a href=…>) jelöli meg. Az elejnèv-helyekre (<a name=…>) ez nem vonatkozik.
• [align=left] - Az align attribútummal rendelkező összes elemet jelöli meg bal értelemben.
• [attr~=wert] - Azon elemeket jelöli meg, amelyekben az érték megtalálható egy szóközzel elválasztott értéklistában.
• [attr|=wert] - Jelöli az elemet, ha az általános a megadott érték egy kötőjellel elválasztott karakterláncban van az attribútumon belül.
• img[szélesség="200"] - Ez az összes képet jelöli meg, amelyeknek 200 pixel szélességűek.
Persze felmerül a kérdés, hogy mikor lehet hasznos az attribútum-szelektorok alkalmazása. Például egy űrlapra és az abban definiált jelölőnégyzetekre gondolva. A jelölőnégyzeteket - amit már tudtok - az input elem definiálja. Az a probléma azonban, hogy az input elemet a normál szövegbeviteli mezők definiálására is használják. Így az input segítségével nem lehet különböző formázást végrehajtani a jelölőnégyzetek és szövegbeviteli mezők között. Éppen itt jönnek be az attribútum-szelektorok. Jobb megértés érdekében tekintsétek meg a következő példát:
<test> Név: <input type="text" id="név" /> <br /> Férfi: <input type="checkbox" name="nem" id="nem" /> <br /> Nő: <input type="checkbox" name="nem" id="nem" /> </test>
Egyes különböző űrlapelemeket definiáltunk.
• egy szövegbeviteli mező
• két jelölőnégyzet
Ezeknek az mezőknek kell formázni.
input {
border:3px solid #000;
width: 10em;
}A mezőkhöz keret és szélesség lesz hozzárendelve.
A probléma az, hogy a meghatározott szélességet valójában csak a szövegbeviteli mezőre kellene alkalmazni, nem pedig a jelölőnégyzetekre. Az elem szelektorral azonban nincs lehetőség különbségtételre az egyes mezőtípusok között. Hogy egy ilyen megkülönböztetés működjön, attribútum szelektorokra lesz szükség. Íme egy példa arra, hogy milyen módon lehet ilyet csinálni:
input[type="checkbox"] {
width: auto;
}
A megadott szelektor ténylegesen csak azokra az input elemekre vonatkozik, amelyeknél az attributes:type="checkbox" kombináció található.
Ismétlések
A CSS most végül végre lehetőséget biztosít az ismétlések kezelésére. Persze felmerül a kérdés, hogy ez mire jó. Ezek a szelektorok például hasznosak lehetnek, ha egy táblázat minden második sorát más színnel szeretnénk formázni. Mielőtt bemutatnám a rendelkezésre álló szelektorokat, itt van egy nagyon tipikus példa:
<ol id="sprachen">
<li>HTML</li>
<li>HTML5</li>
<li>CSS</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>JScript</li>
<li>Java</li>
<li>PHP</li>
<li>Python</li>
</ol>
Ez egy hagyományos felsorolás. CSS segítségével most minden harmadik listaelem kap háttérszínt.
Ehhez a nth-child() szelektort használjuk. Ennek a szelektornak azon elemek vannak hatással, amelyek az n-edik gyerek elemek.
#sprachen li:nth-child(3n) {
background-color: red;
}
A következő szelektorok állnak rendelkezésre:
• :root – A :root szelektorral egy dokumentum gyökérét lehet hivatkozni.
• :nth-child(n) – Kezeli az n-edik elemet egy szülőelemen belül. Ezt a szelestort különösen akkor használják, amikor több elemet különbözően kell formázni. Az n egy fix kulcsszó, amire számítások alkalmazhatók. Az n értéke egyenlőíthető az 1 értékkel.
• :nth-last-child(n) – Kezeli az n-edik elemet egy elemen belül, amelyeket hátulról kezd veszít.
• :nth-of-type(n)– Kezeli az n-edik elemet ugyanazon HTML típusú azonos szinten.
• :nth-last-of-type(n) – Kezeli az n-edik elemet ugyanazon szinten, melyeket hátulról kezd veszít.
• :first-child – Kezeli az első gyerek elemet egy elemen belül.
• :last-child – Kezeli az utolsó gyerek elemet egy elemen belül.
• :first-of-type – Kezeli az első elemét ugyanannak az HTML elem típusnak egy elemen belül.
• :last-of-type – Kezeli az utolsó elemét ugyanannak az HTML elem típusnak egy elemen belül.
• :only-child – Kezeli az olyan elemet, amelynek nincs testvéreleme és ezen elem az egyetlen gyerek az őselemen belül.
• :only-of-type – Kezeli az olyan elemet, amely nem azonos HTML típusú testvérelemekkel rendelkezik és ezen elem az egyetlen elem ezekből a típusokból az őselemen belül.
• :empty – Kezeli a üres elemek.
A bemutatott szelektorok segítségével az HTML-el való munka sokkal könnyebbé válik, mivel az időigényes osztálydefiníciók a múlté.
