Jūs varat piekļūt tā sauktajiem bērnu elementiem. Tie ir elementi, kas tieši pakļauti citiem elementiem. Tas skan diezgan abstrakti, bet var labi izskaidrot, izmantojot piemēru.
<body> <p>Kārtas pirmkods</p> <p>Kārtas otrais</p> <p>Kārtas trešais</p> </body>
Šeit body ir vecākelements. p elementi ir katrs body bērnu elementi. Balstoties uz šiem zināšanaiem, var izmantot bērnu elementu atlasītāju.
body>p {
krāsa: zila;
}
Šī sintakse iestata visus kārtas, kas ir tiešie body bērni, zilā krāsā.
Nākamais piemērs vēlreiz parāda atšķirības starp divām instrukcijām: body p un 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>Kārtas pirmkods</p>
<p>Kārtas otrais</p>
<p>Kārtas trešais</p>
<div>
<p>Kārtas ceturtais</p>
</div>
</body>
</html>Pirmie trīs definētie p teksta bloki ir tieši body bērni. Instrukcija body p piešķir zilu krāsu visiem teksta blokiem. body>p atkal ietekmē tikai pirmos trīs teksta blokus. Tāpēc šie bloki tiek parādīti lielākā fontānā.
Nākamajā lappusē es vēlos jums iepazīstināt ar sekosanto elementu atlasītāju. Šis atlasītājs norāda uz elementu, kas tūlīt pēc cita elementa un kopīgs vecākelements ar to. Arī tam ir piemērs:
h1+p {
krāsa: zila;
}
Šīs sintakses rezultātā teksta bloka krāsa ir iestatīta uz zilu. Tomēr tas attiecas tikai tad, ja teksta bloks tieši seko pirmās kārtas virsrakstam.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1+p {
krāsa: zila;
}
</style>
</head>
<body>
<h1>Virsraksts</h1>
<p>Kārtas pirmkods</p>
<h2>Virsraksts</h2>
<p>Kārtas otrais</p>
<p>Kārtas trešais</p>
<div>
<p>Kārtas ceturtais</p>
</div>
</body>
</html>Pārskatiet rezultātu pārlūkprogrammā.
Tikai pirmais teksts šeit tiek parādīts zilā krāsā. Pārējie teksti ir melni. Tas ir tāpēc, ka šie p elementi neseko h1, bet gan h2.
Attiecībā uz nākamajiem elementiem CSS3 ir ieviesis papildu iespējas. Tagad ir iespējams piekļūt visiem konkrēta elementa sekojošajiem elementiem. Piemērs:
h1~p {
krāsa: sarkana;
}
Šīs sintakses rezultātā tiek piekļauti visi p teksta bloki, kas seko pirmās kārtas virsrakstam.
Starpmjūtīgi nav iespējams pieprasīt tikai elementus tieši. Ir iespējams piekļūt arī elementu atribūtiem.
Šeit ir daži šādi atlasītāji:
• [att] - Elementam jāiekļauj tikai atribūts. Vai vērts tiek nodots, nav svarīgi.
• a[href] - Visi saites (<a href=...>) tiek atzīmētas. Tomēr tas neattiecas uz saites definīcijām (<a name=...>).
• [align=left] - Atzīmē visus elementus, kuru align atribūts satur kreiso vērtību.
• [attr~=wert] - Atzīmē visus elementus, kuros wert ir iekļauts atdalītā vērtību sarakstā ar atstarpēm.
• [attr|=wert] - Atzīmē elementu, ja norādītā vērtība atrodas atribūtā un sākas ar domuzīmi saistītā virkne.
• img[width="200"] - Šeit tiek atzīmētas visas grafikas ar platumu 200 pikseļiem.
Rodas jautājums, kad šādus atribūta atlasītājus ir patiesībā nepieciešams izmantot. Atradīšanu piemēram formālu un tajā definēti izvēles rūtiņas. Izvēles rūtiņas - kā jūs jau zināt - tiek definētas, izmantojot input elementu. Problēma ir tajā, ka input elements tiek izmantots arī normālu teksta ievades lauku definēšanai. Tādēļ, izmantojot input, nav iespējams nodrošināt atšķirīgu formatējumu izvēles rūtiņām un teksta ievades laukiem. Tieši šajā punktā ir izmantoti atribūtu atlasi. Lai labāk saprastu tos, skatieties šādu piemēru:
<body> Vārds: <input type="text" id="name" /> <br /> Vīrietis: <input type="checkbox" name="geschlecht" id="geschlecht" /> <br /> Sieviete: <input type="checkbox" name="geschlecht" id="geschlecht" /> </body>
Šeit tika definēti dažādi formu elementi.
• tekstveida ievades lauks
• divas izvēles rūtiņas
Šos laukus vajadzētu formatēt.
input {
border:3px solid #000;
width: 10em;
}Laukumiem tiek piešķirts apmales rāmis un platums.
Problēma ir tāda, ka noteiktajam platumam vajadzētu attiekties tikai uz teksta ievades lauku, nevis uz izvēles rūtiņām. Tomēr, izmantojot elementa atlasītāju, nav iespējams atšķirt dažādos lauku tipus. Lai šāda atšķirība notiktu, tiek izmantoti atribūtu atlasītāji. Šeit ir piemērs tam, kā tas varētu izskatīties:
input[type="checkbox"] {
width: auto;
}
Ar šo atlasi patiešām tiek piekļūts tikai tādiem input elementiem, kas ir ar atribūtu-vērtības kombināciju type="checkbox".
Atkārtojumi
CSS tagad beidzot piedāvā iespēju apstrādāt atkārtojumus. Protams, rodas jautājums, ko varētu izdarīt. Šādi atlases veidi var būt noderīgi, ja, piemēram, vēlaties noformēt katru otro tabulas rindu ar citu krāsu. Pirms es iepazīstināšu ar pieejamajiem atlasītājiem, šeit ir ļoti tipisks piemērs:
<ol id="valodas">
<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>
Šis ir parasts numurēto sarakstu. Ar CSS tagad tiks piešķirta fona krāsa katram trešajam saraksta ierakstam.
Tiek izmantots atlases veids nth-child(). Ar šo atlasi tiek pievērsta uzmanība katram n-tajam bērniem.
#valodas li:nth-child(3n) {
background-color: red;
}
Ir pieejami šādi atlase veidi:
• :root – Ar šo atlasītāju varat piekļūt dokumenta saknei.
• :nth-child(n) – Pārvalda katru elementu n-tajā vietā vecākā elementa ietvaros. Šis atlasītājs ir noderīgs galvenokārt tad, ja vairākiem elementiem jābūt atšķirīgi noformētiem. n ir fiksēts atslēgvārds, uz ko var piemērot matemātiskās operācijas. n var aizstāt ar vērtību 1.
• :nth-last-child(n) – Pārvalda katru n-tajā vietā ierakstu elementā, pamatojoties uz bērnu elementiem, kas tiek pārvietoti no gala.
• :nth-of-type(n)– Pārvalda katru n-tajam elementam no tāda paša HTML tipa uz vienādas hierarhijas līmeņa.
• :nth-last-of-type(n) – Pārvalda katru n-tajam elementam uz vienādas līmenis, pamatojoties uz elementiem, kas tiek pārvietoti no gala.
• :first-child – Pārvalda pirmo bērnības elementu iekšā elementā.
• :last-child – Pārvalda pēdējo bērnības elementu iekšā elementā.
• :first-of-type – Pārvalda pirmo elementu no tāda paša HTML elementa tipa iekšā vecākam elementam.
• :last-of-type – Pārvalda pēdējo elementu no tāda paša HTML elementa tipa iekšā vecākam elementam.
• :only-child – Pārvalda elementu, kas nav bērna elementu un vienīgais bērnības elements vecākā elementa ietvaros.
• :only-of-type – Pārvalda elementu, kas nav tāda paša HTML tipa bērna elementu un vienīgais šāda veida bērnības elements vecākā elementa ietvaros.
• :empty – Pārvalda tukšus elementus.
Iepriekš minētie atlases veidi padara darbu ar HTML ievērojami vienkāršāku, jo pagātnes sarežģītie klases definējumi nav vajadzīgi.
