Dere kan referere såkalte barnelementer. Dette er de som er direkte underordnede andre elementer. Det høres innrømmelig litt abstrakt ut, men kan enkelt forklares ved hjelp av et eksempel.
<body> <p>Avsnitt 1</p> <p>Avsnitt 2</p> <p>Avsnitt 3</p> </body>
Her er body overelementet. p-elementene er hver for seg barnelementer av body. Basert på denne kunnskapen, kan barnelementselektoren brukes.
body>p {
color: blå;
}
Dette syntaksen setter alle avsnitt, som direkte er barn av body, til blå farge.
Det følgende eksempelet viser igjen forskjellene mellom de to instruksjonene body p og 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>Avsnitt 1</p>
<p>Avsnitt 2</p>
<p>Avsnitt 3</p>
<div>
<p>Avsnitt 4</p>
</div>
</body>
</html>De tre første definerte p-tekstavsnittene er direkte barn av body. Instruksjonen body p tildeler alle tekstavsnittene en blå skrift. body>p på sin side påvirker utelukkende de tre første tekstavsnittene. Derfor vises disse avsnittene også i en større skriftstørrelse.
Neste ønsker jeg å introdusere dere for påfølgende elementselektoren. Denne selektoren markerer et element som umiddelbart følger etter et annet element og har samme overordnede element. Også her et eksempel:
h1+p {
color: blå;
}
Denne syntaksen setter tekstfargen til et avsnitt til blå. Dette gjelder imidlertid bare hvis avsnittet direkte følger etter en førstegangs overskrift.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1+p {
color: blå;
}
</style>
</head>
<body>
<h1>Overskrift</h1>
<p>Avsnitt 1</p>
<h2>Overskrift</h2>
<p>Avsnitt 2</p>
<p>Avsnitt 3</p>
<div>
<p>Avsnitt 4</p>
</div>
</body>
</html>Se resultatet i nettleseren.
Bare det første avsnittet vises her i blå skrift. De andre avsnittene er svarte. Dette kommer av at disse p-elementene ikke følger etter h1, men etter h2.
Når det gjelder påfølgende elementer, ble det for øvrig introdusert flere muligheter i CSS3. Så fra nå av er det mulig å få tilgang til alle etterfølgende elementer av et bestemt element. Et eksempel:
h1~p {
color: rød;
}
Gjennom denne syntaksen er alle avsnitt som følger etter h1 adressert.
For øvrig kan man ikke bare addressere elementer direkte. Det er også mulig å få tilgang via elementenes attributter.
Her er noen slike selektorer:
• [att] – Elementet må bare inneholde attributtet. Om en verdi også blir overført, er ikke relevant.
• a[href] – Alle hyperkoblinger (<a href=…>) merkes. Dette gjelder imidlertid ikke for ankerdefinisjoner (<a name=…>).
• [align=venstre] – Merker alle elementer hvis attributtet align har verdien venstre.
• [attr~=verdi] – Alle elementer hvor verdien er inkludert i en avstandsdelt verdieliste blir merket.
• [attr|=verdi] – Merker et element hvis den angitte verdien står i begynnelsen av en bindestreksdelt streng innenfor attributtet.
• img[bredde="200"] – Her merkes alle bilder som har en bredde på 200 piksler.
Når man tenker på når man faktisk kunne trenge slike attributtselektorer, tenk for eksempel på et skjema og avkrysningsbokser definert der. Avkrysningsbokser blir - som dere nå vet - definert via input-elementet. Problemet her: input-elementet blir også brukt for å definere vanlige tekstinnleggsfelt. Dermed kan man ikke formatere forskjellig for avkrysningsbokser og tekstfelt via input. Akkurat her kommer attributtselektorene inn. For å bedre forstå hvordan disse fungerer, se på følgende eksempel:
<body> Navn: <input type="text" id="navn" /> <br /> Mann: <input type="checkbox" name="kjønn" id="kjønn" /> <br /> Kvinne: <input type="checkbox" name="kjønn" id="kjønn" /> </body>
Forskjellige skjemaelementer ble definert her.
• et tekstinnleggsfelt
• to avkrysningsbokser
Disse feltene skal formateres.
input {
border:3px solid #000;
width: 10em;
}Feltene blir tildelt en ramme og en bredde.
Problemet her er: Den definerte bredden skal egentlig bare gjelde for tekstboksen, ikke for avmerkingsboksene. På grunn av elementvelgeren er imidlertid ikke noe skille mulig mellom de ulike felttypene. For at en slik sondring skal fungere, bruker vi attributtvelgere. Her er et eksempel på hvordan det kan se ut:
input[type="checkbox"] {
width: auto;
}
Ved den viste velgeren blir det faktisk bare valgt på slike inndataelementer som har attributtverdkombinasjonen type="checkbox".
Gjentakelser
CSS gir endelig også muligheten til å adressere gjentakelser. Det er naturligvis spørsmålet om hva noe slikt kan være nyttig for. Disse velgerne er fornuftige, for eksempel når man vil gi en annen farge til hver annen rad i en tabell. Før jeg presenterer de tilgjengelige velgerne, her er et veldig typisk eksempel:
<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>
Dette er en vanlig oppramslsitte. Med CSS skal nå hver tredje listeelement bli tildelt en bakgrunnsfarge.
Det brukes velgeren nth-child(). Ved hjelp av denne velgeren blir hvert n-te barneelement adressert.
#sprachen li:nth-child(3n) {
background-color: red;
}
Følgende velgere er tilgjengelige:
• :root – Ved hjelp av velgeren :root kan roten til et dokument adresseres.
• :nth-child(n) – Styrer hvert n-te element innenfor et foreldreelement. Denne velgeren er spesielt nyttig når flere elementer skal styles annerledes. Når det gjelder n, er det et fast nøkkelord som kan brukes til å utføre regneoperasjoner. n kan settes lik verdien 1.
• :nth-last-child(n) – Styrer hvert n-te element i et element, der barna blir gått gjennom bakfra.
• :nth-of-type(n)– Styrer hvert n-te element av samme HTML-type på samme nivå.
• :nth-last-of-type(n) – Styrer hvert n-te element på samme nivå, der elementene blir gått gjennom bakfra.
• :first-child – Styrer det første barneelementet innenfor et element.
• :last-child – Styrer det siste barneelementet innenfor et element.
• :first-of-type – Styrer det første elementet av samme HTML-elementtype innenfor et foreldreelement.
• :last-of-type – Styrer det siste elementet av samme HTML-elementtype innenfor et foreldreelement.
• :only-child – Styrer et element som ikke har noen søsken og representerer det eneste barneelementet i det overordnede elementet.
• :only-of-type – Styrer et element som ikke har søsken av samme HTML-type og dermed representerer det eneste elementet av denne typen i det overordnede elementet.
• :empty – Styrer tomme elementer.
De presenterte velgerne gjør arbeidet med HTML mye enklere, da omfattende klassedefinisjoner tilhører fortiden.
