Lahko govorimo o tako imenovanih otročjih elementih. To so tisti, ki so neposredno podrejeni drugim elementom. Sliši se abstraktno, ampak se lepo razloži na primeru.
<body> <p>Odstavek 1</p> <p>Odstavek 2</p> <p>Odstavek 3</p> </body>
Tukaj je body starševski element. Elementi p so vsakokrat otročji elementi od body. Na tej podlagi se lahko uporabi selektor za otročje elemente.
body>p {
color: blue;
}
Ta sintaksa določi vse odstavke, ki so neposredni otroci od body, v modro barvo.
Spodnji primer še enkrat prikazuje razlike med dvema navodiloma body p in body>p.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body>p {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
body p {
color:#0066FF;
}
</style>
</head>
<body>
<p>Odstavek 1</p>
<p>Odstavek 2</p>
<p>Odstavek 3</p>
<div>
<p>Odstavek 4</p>
</div>
</body>
</html>Prva tri določena odstavka p so neposredni otroci od body. Navodilo body p dodeli vsem odstavkom besedila modro pisavo. body>p pa vpliva le na prva tri odstavke besedila. Zato so ti odstavki prikazani tudi v večjem tisku.
Naslednje bom predstavil selektor za elemente, ki sledijo. Ta selektor označi element, ki takoj sledi drugemu elementu in ima skupni starševski element. Ponovno primer:
h1+p {
color: blue;
}
S to sintakso se barva besedila odstavka določi kot modra. Vendar to velja samo, če se odstavek neposredno nadaljuje za naslovom prve stopnje.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1+p {
color: blue;
}
</style>
</head>
<body>
<h1>Naslov</h1>
<p>Odstavek 1</p>
<h2>Naslov</h2>
<p>Odstavek 2</p>
<p>Odstavek 3</p>
<div>
<p>Odstavek 4</p>
</div>
</body>
</html>Poglej si rezultat v brskalniku.
Prvi odstavek je tukaj prikazan v modri pisavi. Ostali odstavki so črni. To je zato, ker ti elementi p ne sledijo za h1, ampak za h2.
V zvezi s sledilnimi elementi so v CSS3 uvedene dodatne možnosti. Zdaj je mogoče dostopati do vseh sledilnih elementov določenega elementa. Primer:
h1~p {
color: red;
}
S to sintakso so priklicani vsi odstavki, ki sledijo za h1.
Ni mogoče govoriti le o neposrednih elementih. Možen je tudi dostop prek atributov elementov.
Tukaj je nekaj teh selektorjev:
• [att] – Element mora vsebovati samo atribut. Ali ima tudi vrednost, ni pomembno.
• a[href] – Označeni so vsi hiperpovezave (<a href=…>). Na definicije sidrišč (<a name=…>) to ne velja.
• [align=left] – Označi vse elemente, katerih atribut align ima vrednost left.
• [attr~=val] – Označi vse elemente, kjer je val vključen v seznam vrednosti, ločen s presledki.
• [attr|=val] – Označi element, če je navedena vrednost na začetku s pomišljajem ločenega niza znotraj atributa.
• img[width="200"] – Tukaj so označene vse slike, ki imajo širino 200 pikslov.
Seveda se postavlja vprašanje, kdaj bi morda potrebovali takšne selektorje atributov. Na primer pomislite na obrazec in definirane potrditvene polja v njem. Potrditvena polja - ki jih zdaj že veste - so določena prek elementa za vnos. Težava je v tem: Element za vnos se uporablja tudi za definicijo običajnih besedilnih polj za vnos. Zato prek elementa za vnos ni mogoče izvesti različne oblikovanja za potrditvena polja in besedilna polja za vnos. Tukaj pravzaprav pridejo do izraza selektorji atributov. Za boljše razumevanje si oglejte naslednji primer:
<body> Ime: <input type="text" id="ime" /> <br /> Moški: <input type="checkbox" name="spol" id="spol" /> <br /> Ženska: <input type="checkbox" name="spol" id="spol" /> </body>
Tukaj so bila določena različna obrazčna polja.
• polje za vnos besedila
• dve potrditveni polji
Te polja je treba oblikovati.
input {
border:3px solid #000;
width: 10em;
}Pred polji sta dodeljeni obroba in širina.
Težava: Določena širina naj bi se dejansko uporabila samo na polje za vnos besedila, ne pa tudi na potrditvena polja. Zaradi selektorja elementov ni mogoče razlikovati med različnimi tipi polj. Da bi to delovalo, so uporabljeni atributni selektorji. Tukaj je primer, kako lahko to zgleda:
input[type="checkbox"] {
width: auto;
}
Z uporabljenim selektorjem se dejansko uporablja samo na takšna vnosna polja, ki imajo kombinacijo atributa vrednosti type="checkbox".
Ponavljanja
CSS sedaj končno omogoča tudi nagovarjanje ponavljanj. Seveda se postavi vprašanje, v čem bi lahko bilo to koristno. Te selektorje je na primer smiselno uporabiti, kadar želimo obarvati vsako drugo vrstico tabele drugače. Preden predstavim razpoložljive selektorje, najprej tipičen primer:
<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>
Gre za običajen seznam. S pomočjo CSS naj bi dobila vsaka tretja postavka seznama dodeljeno barvo ozadja.
Za to je uporabljen selektor nth-child(). Prek tega selektorja se nagovori vsak n-ti element otroka.
#sprachen li:nth-child(3n) {
background-color: red;
}
Na voljo so naslednji selektorji:
• :root – Prek selektorja :root se lahko naslovi koren dokumenta.
• :nth-child(n) – Nadzira vsak n-ti element znotraj starševskega elementa. Ta selektor je še posebej koristen, ko želimo različno oblikovati več elementov. Pri n gre za določeno ključno besedo, na katero se lahko uporabijo aritmetične operacije. n je mogoče enačiti z vrednostjo 1.
• :nth-last-child(n) – Nadzira vsak n-ti element v elementu, pri čemer se otroci obračajo od zadaj.
• :nth-of-type(n)– Nadzira vsak n-ti element istega HTML-tipa na isti ravni.
• :nth-last-of-type(n) – Nadzira vsak n-ti element na isti ravni, pri čemer se elementi obračajo od zadaj.
• :first-child – Nadzira prvi otrok znotraj elementa.
• :last-child – Nadzira zadnji otrok v elementu.
• :first-of-type – Nadzira prvi element istega tipa HTML znotraj starševskega elementa.
• :last-of-type – Nadzira zadnji element istega tipa HTML znotraj starševskega elementa.
• :only-child – Nadzira element, ki nima sestrskih elementov in predstavlja edini otrok v nadrejenem elementu.
• :only-of-type – Nadzira element, ki nima sestrskih elementov istega HTML-tipa in predstavlja edini otrok te vrste v nadrejenem elementu.
• :empty – Nadzira prazne elemente.
Predstavljeni selektorji olajšajo delo z HTML, saj so zapletene definicije razredov preteklost.
