HTML/CSS ģimene – bērni un mazbērni…

CSS un HTML terminos “bērns” un “vecāks” attiecas uz elementu attiecībām dokumenta kokā. Elements tiek uzskatīts par “vecāku”, ja tas satur citus elementus, kuri tiek saukti par tā “bērniem”.

Piemēram, aplūkojiet šādu HTML kodu:

<div>
<p>Šis ir paragraphs.</p>
<ul>
<li>Vienība 1</li>
<li>Vienība 2</li>
</ul>
</div>

Šajā piemērā div elements ir p un ul elementu vecāks, kuri ir tā bērni. ul elements ir li elementu vecāks, kuri ir tā bērni.

CSS izmantojot “bērnu” un “vecāku” attiecības, var izvēlēties un stilizēt noteiktus elementus. Piemēram, var izmantot > simbolu, lai izvēlētos tikai tiešos elementu bērnus:

div > p {
font-weight: bold;
}

Tādējādi visi p elementi, kas ir div elementu tiešie bērni, kļūs par tekstu treknrakstā.

Var arī izmantot pseido-klašu :first-child un :last-child, lai izvēlētos elementa pirmo vai pēdējo bērnu atbilstoši. Piemēram:

li:first-child {
color: red;
}

li:last-child {
color: blue;
}

Tādējādi pirmais li elements kļūs #ff0000;”>sarkans, bet pēdējais li elements kļūs #0000ff;”>zils.

Šeit būs vēl kāds skaidrojošāks un sarežģītāks piemērs:

/* Izvēlas visus p elementus, kas ir div elementu bērni */
div > p {
font-size: 16px;
}

/* Izvēlas visus li elementus, kas ir ul elementu bērni */
ul > li {
list-style-type: square;
}

/* Izvēlas visus span elementus, kas ir div elementu bērni, bet tikai ja tie ir pirmie bērni */
div > span:first-child {
font-weight: bold;
}

/* Izvēlas visus span elementus, kas ir div elementu bērni, bet tikai ja tie ir pēdējie bērni */
div > span:last-child {
text-decoration: underline;
}

/* Izvēlas visus p elementus, kas ir mazbērni (t.i. bērni no bērniem) div elementiem */
div > * > p {
color: green;
}

Apskatīsim katru no šiem selektoriem sīkāk:

1. Pirmais selektors, div > p, izvēlas visus p elementus, kas ir tieši div elementu bērni. Tātad p elementi jāiekļauj tieši div elementā, tā: <div><p>...</p></div>.
2. Otrais selektors, ul > li, izvēlas visus li elementus, kas ir tieši ul elementu bērni. Tātad li elementi jāiekļauj tieši ul elementā, tā: <ul><li>...</li></ul>.
3. Trešais selektors, div > span:first-child, izvēlas visus span elementus, kas ir div elementa pirmie bērni. Piemēram, šim selektoram piemērotais elements būtu šāds: <div><span>...</span></div>, bet ne šāds: <div><p>...</p><span>...</span></div>.
4. Ceturtais selektors, div > span:last-child, izvēlas visus span elementus, kas ir div elementa pēdējie bērni. Piemēram, šim selektoram piemērotais elements būtu šāds: <div><span>...</span></div>, bet ne šāds: <div><span>...</span><p>...</p></div>. u.t.t…