Du kan adressere såkaldte børneelementer. Disse er dem, der direkte er underordnede andre elementer. Det lyder givetvis lidt abstrakt, men det kan forklares pænt ved hjælp af et eksempel.
<body> <p>Afsnit 1</p> <p>Afsnit 2</p> <p>Afsnit 3</p> </body>
Her er body forældreelementet. p-elementerne er hver især børneelementer af body. På baggrund af denne viden kan børneelement-selektoren anvendes.
body>p {
color: blue;
}
Denne syntaks ændrer farven på alle afsnit, der er direkte børn af body, til blå.
Næste eksempel viser forskellene mellem de to instruktioner 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>Afsnit 1</p>
<p>Afsnit 2</p>
<p>Afsnit 3</p>
<div>
<p>Afsnit 4</p>
</div>
</body>
</html>De første tre definerede p-tekstafsnit er direkte børn af body. Instruktionen body p tildeler alle tekstafsnit en blå skrifttype. body>p påvirker kun de første tre tekstafsnit. Derfor vises disse afsnit også i en større skrifttype.
Næste vil jeg gerne præsentere for jer følgeelement-selektoren. Denne selektor markerer et element, der umiddelbart følger efter et andet element og deler samme forældreelement. Her er et eksempel:
h1+p {
color: blue;
}
Ved denne syntaks ændres tekstfarven på et afsnit til blå. Dette gælder dog kun, hvis afsnittet følger direkte efter en overskrift af første orden.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1+p {
color: blue;
}
</style>
</head>
<body>
<h1>Overskrift</h1>
<p>Afsnit 1</p>
<h2>Overskrift</h2>
<p>Afsnit 2</p>
<p>Afsnit 3</p>
<div>
<p>Afsnit 4</p>
</div>
</body>
</html>Se resultatet i browseren.
Kun det første afsnit vises her i blå skrift. De andre afsnit er sorte. Dette skyldes, at disse p-elementer ikke følger efter h1, men efter h2.
I CSS3 er der faktisk blevet introduceret flere muligheder for følgeelementer. Det er nu muligt at tilgå alle følgeelementer til et bestemt element. Et eksempel:
h1~p {
color: red;
}
Ved denne syntaks påvirkes alle afsnit, der følger efter h1.
Man kan i øvrigt ikke kun adressere elementer direkte. Det er også muligt at tilgå elementernes attributter. Her er nogle eksempler på sådanne selektorer:
• [att] – Elementet skal kun indeholde attributten. Om der også overføres en værdi, er ligegyldigt.
• a[href] – Alle hyperlinks (<a href=…>) markeres. Dette gælder dog ikke for ankerafsætning (<a name=…>).
• [align=left] – Markerer alle elementer, hvor attributten align har værdien left.
• [attr~=value] – Alle elementer markeres, hvor værdien er indeholdt i en værdiliste adskilt af mellemrum.
• [attr|=value] – Markerer et element, hvis den angivne værdi står i starten af en bindestregsadskilt streng inden for attributten.
• img[width="200"] – Alle billeder markeres her, som har en bredde på 200 pixels.
Spørgsmålet er naturligvis, hvornår man egentlig kunne have brug for disse attribut-selektorer. Tænk f.eks. på et formular og de definerede afkrydsningsfelter deri. Afkrydsningsfelter defineres – som I ved på dette tidspunkt – gennem input-elementet. Problemet her er: input-elementet bruges også til at definere normale tekstindtastningsfelter. Derved kan man ikke gennem input-elementet angive en forskellig formatering for afkrydsningsfelterne og tekstindtastningsfelterne. Netop her kommer attribut-selektorerne ind i billedet. For at forstå dem bedre, så kig på følgende eksempel:
<body> Navn: <input type="text" id="name" /> <br /> Mand: <input type="checkbox" name="geschlecht" id="geschlecht" /> <br /> Kvinde: <input type="checkbox" name="geschlecht" id="geschlecht" /> </body>
Forskellige formularfelter er blevet defineret her.
• En tekstindtastningsfelt
• To afkrydsningsfelter
Disse felter skal formateres.
input {
border:3px solid #000;
width: 10em;
}Tilføj en ramme og en bredde til felterne.
Problemet her er, at den definerede bredde faktisk kun skal anvendes på tekstfeltet, ikke på afkrydsningsfelterne. Ved hjælp af elementselektoren er der imidlertid ingen forskel mellem de forskellige felttyper mulig. For at gøre en sådan forskel mulig, bruges attributselektorer. Her er et eksempel på, hvordan det kan se ud:
input[type="checkbox"] {
width: auto;
}
Ved hjælp af den viste selektor tilgår man faktisk kun de input-elementer, der har attributværdikombinationen type="checkbox".
Gentagelser
CSS tilbyder nu endelig også muligheden for at adressere gentagelser. Det er selvfølgelig spørgsmålet, hvad sådan noget kan være godt til. Disse selektorer er fornuftige, f.eks. når man vil give hver anden række i en tabel en forskellig farve. Før jeg præsenterer de tilgængelige selektorer, et helt 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 normal oversigtsliste. Med CSS skal hver tredje post have tildelt en baggrundsfarve.
Dertil bruges selektoren nth-child(). Med denne selektor tales hvert n'te barn-element til.
#sprachen li:nth-child(3n) {
background-color: red;
}
Følgende selektorer er tilgængelige:
• :root – Ved hjælp af selektoren :root kan rodafsnittet i et dokument adresseres.
• :nth-child(n) – Styrer hvert n'te element inden for en forælder. Denne selektor er specielt hjælpsom, når flere elementer skal stiles forskelligt. Nøgleordet n er et fast nøgleord, hvor der kan udføres beregninger. n kan sættes lig med værdien 1.
• :nth-last-child(n) – Styrer hvert n'te element i et element, hvor børnene gennemløbes bagfra.
• :nth-of-type(n)– Styrer hvert n'te element af samme HTML-type på samme niveau.
• :nth-last-of-type(n) – Styrer hvert n'te element på samme niveau, hvor elementerne gennemløbes bagfra.
• :first-child – Styrer det første barn i et element.
• :last-child – Styrer det sidste barn i et element.
• :first-of-type – Styrer det første element af samme HTML-elementtype i en forælder.
• :last-of-type – Styrer det sidste element af samme HTML-elementtype i en forælder.
• :only-child – Styrer et element, der ikke har søskendeelementer og præsenterer det eneste barn i overordnet element.
• :only-of-type – Styrer et element, der ikke har søskendeelementer af samme HTML-type og dermed repræsenterer den eneste post af denne type i overordnet element.
• :empty – Styrer tomme elementer.
De præsenterede selektorer gør arbejdet med HTML meget lettere, da de komplekse klassedefinitioner hører fortiden til.
