Te saate viidata nn alamelementidele. Need on sellised, mis on otse teiste elementide allorduvad. See kõlab tunnistatavalt pisut abstraktselt, kuid seda saab kenasti selgitada näite abil.
<body> <p>Lõik 1</p> <p>Lõik 2</p> <p>Lõik 3</p> </body>
Siin on body ülemelement. p-elemente on kõik alamelementidena body-st. Sellele teadmisele toetudes saab rakendada alamelemendi valijat.
body>p {
värv: sinine;
}
Selle süntaksiga seatakse kõik lõigud, mis on otse body alamelemendid, siniseks.
Järgmine näide näitab veelkord erinevusi kahe juhendi body p ja body>p vahel.
<!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>Lõik 1</p>
<p>Lõik 2</p>
<p>Lõik 3</p>
<div>
<p>Lõik 4</p>
</div>
</body>
</html>Esimesed kolm määratletud p-tekstlõiku on otse body alamehed. Juhis body p määrab kõikidele tekstlõikudele sinise kirja. body>p aga mõjutab ainult esimesi kolme tekstlõiku. Seetõttu kuvatakse need lõigud suurema kirjaga.
Järgmisena sooviksin teile tutvustada järgneva elemendi valijat. See valija määrab elemendi, mis tuleb kohe pärast teist elementi ja jagab selle elemendiga sama ülemelementi. Ka siin on näide:
h1+p {
värv: sinine;
}
Selle süntaksiga seatakse lõigu tekstivärv siniseks. See kehtib aga ainult siis, kui lõik järgneb otse esimese taseme pealkirjale.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1+p {
värv: sinine;
}
</style>
</head>
<body>
<h1>Pealkiri</h1>
<p>Lõik 1</p>
<h2>Pealkiri</h2>
<p>Lõik 2</p>
<p>Lõik 3</p>
<div>
<p>Lõik 4</p>
</div>
</body>
</html>Vaatage tulemust brauseris.
Ainult esimene lõik kuvatakse siin sinisel kirjal. Teised lõigud on mustad. Selle põhjuseks on see, et need p-elemendid ei järgne h1-le, vaid h2-le.
Ülejäänud elementide järgimise osas tutvustati CSS3-s veelgi rohkem võimalusi. Nii on nüüd võimalik pääseda juurde kõikidele teatud elemendi järgnevatele elementidele. Näide:
h1~p {
värv: punane;
}
Selle süntaksiga viidatakse kõigile lõikudele, mis järgnevad h1-le.
Muide, võimalik on mitte ainult elemente otse adressida. Samuti on võimalik juurdepääs atribuutidele. Siin on mõned nendest valijatest:
• [att] – Element peab sisaldama ainult atribuuti. Kas antakse ka väärtus, pole tähtis.
• a[href] – Kõik lingid (<a href=…>) on märgitud. Ankrute määratlustele (<a name=…>) see ei kehti.
• [align=vasakul] – Märgib kõik elemendid, mille aligni atribuut sisaldab vasak (left) väärtust.
• [attr~=väärtus] – Märgitakse kõik elemendid, kus väärtus on sisaldatud tühikuga eraldatud väärtuste loendis.
• [attr|=väärtus] – Märgib elemendi, kui määratud väärtus on sidekriipsuga eraldatud stringi alguses atribuudis.
• img[laius="200"] – Siin märgitakse kõik pildid, mille laius on 200 pikslit.
Muidugi tekib küsimus, millal võiks selliseid atribuudi valijaid tegelikult vaja minna. Mõelge näiteks vormile ja seal määratletud linnukestele. Lindid määratletakse – nagu nüüdseks juba teate – input-elemendi kaudu. Probleem seisneb selles, et input-elementi kasutatakse ka tavaliste tekstisisestusväljade määratlemiseks. Seetõttu ei saa inputi kaudu teha erinevaid vorminguid linnukeste ja tekstisisestusväljade jaoks. Just siinkohal tulevad appi atribuudi valijad. Parema arusaamise saamiseks vaadake järgmist näidet:
<body> Nimi: <input type="text" id="nimi" /> <br /> Mees: <input type="checkbox" name="sugupool" id="sugupool" /> <br /> Naine: <input type="checkbox" name="sugupool" id="sugupool" /> </body>
Siin on defineeritud erinevad vormielemendid.
• tekstisisestusväli
• kaks linnukest
Need väljad tuleb vormindada.
input {
border:3px solid #000;
width: 10em;
}Väljale määratakse raam ja laius.
Probleem seisneb selles, et määratud laius peaks tegelikult kehtima ainult tekstisisestusväljale, mitte märkeruutudele. Elemendivalijaga pole aga võimalik eristada erinevaid väljatüüpe. Selleks, et selline eristamine toimiks, kasutatakse atribuudivalijaid. Siin on üks näide sellest, kuidas see võiks välja näha:
input[type="checkbox"] {
width: auto;
}
Kordused
CSS pakub nüüd lõpuks võimalust korduseid käsitleda. Muidugi tekkib küsimus, milleks see hea olla saab. Need valijad on mõistlikud näiteks siis, kui soovitakse iga teist tabeli rida erineva värviga kujundada. Enne kui tutvustan saadaolevaid valijaid, üks klassikaline näide:
<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>
Siin on tegemist tavalise loendiga. CSS-i abil peaks nüüd igale kolmandale loendiüksusele määratama taustavärv.
Selleks kasutatakse valijat nth-child(). Selle valija abil pöördutakse iga n-nda lapseelemendi poole.
#sprachen li:nth-child(3n) {
background-color: red;
}
Järgmised valijad on saadaval:
• :root – Valija :root abil saab käsitleda dokumendi juurt.
• :nth-child(n) – Juhib iga n-dat elementi elemendi sees. See valija on eriti kasulik, kui mitmeid elemente tuleb erinevalt kujundada. N on kindel võtmesõna, millele saab rakendada arvutusoperatsioone. N-i saab võrdsustada väärtusega 1.
• :nth-last-child(n) – Juhib iga n-dat elementi elemendis, kus lapsendelemendid liigutatakse tagantpoolt.
• :nth-of-type(n)– Juhib iga n-dat sama HTML-tüübi elementi samal tasemel.
• :nth-last-of-type(n) – Juhib iga n-dat elementi samal tasemel, kus elemendid liiguvad tagantpoolt.
• :first-child – Juhib esimest lapsendelementi elemendis.
• :last-child – Juhib viimast lapsendelementi elemendis.
• :first-of-type – Juhib sama HTML-tüübi esimest elementi elemendis.
• :last-of-type – Juhib sama HTML-tüübi viimast elementi elemendis.
• :only-child – Juhib elementi, mis ei oma ühtegi õdesid elemente ja esindab ainukest lapsendelementi ülemises elemendis.
• :only-of-type – Juhib elementi, mis ei oma sama HTML-tüübi õdesid elemente ja esindab sellise elemendi ainsat liiki ülemises elemendis.
• :empty – Juhib tühje elemente.
Tutvustatud valijad teevad HTML-i töötlemise oluliselt lihtsamaks, kuna keerulised klassimääratlused kuuluvad minevikku.
