Ni kan nå så kallade barnkomponenter. Det är sådana som direkt är underordnade andra element. Det låter onekligen något abstrakt, men kan förklaras tydligt med hjälp av ett exempel.
<body> <p>Stycke 1</p> <p>Stycke 2</p> <p>Stycke 3</p> </body>
Här är body överelementet. p-elementen är var och en barnkomponenter till body. Med denna kunskap kan barnkomponentväljaren användas.
body>p {
color: blå;
}
Denna syntax sätter alla stycken, som är direkt barn till body, i blå färg.
<!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>Stycke 1</p>
<p>Stycke 2</p>
<p>Stycke 3</p>
<div>
<p>Stycke 4</p>
</div>
</body>
</html>De första tre definierade p-textstyckena är direkta barn till body. Anvisningen body p tilldelar alla textstycken en blå skrift. body>p påverkar endast de första tre textstyckena. Därför visas dessa stycken också i en större skrift.
Nästa skulle jag vilja presentera för er det Följandelement-väljaren. Denna väljare markerar ett element som omedelbart följer på ett annat element och har samma överordnade element som detta. Även här ett exempel:
h1+p {
color: blå;
}
Denna syntax sätter färgen på ett stycke till Blått. Detta gäller dock endast om stycket direkt följer på en överrubrik av första ordningen.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1+p {
color: blå;
}
</style>
</head>
<body>
<h1>Rubrik</h1>
<p>Stycke 1</p>
<h2>Rubrik</h2>
<p>Stycke 2</p>
<p>Stycke 3</p>
<div>
<p>Stycke 4</p>
</div>
</body>
</html>Se resultatet i webbläsaren.
Vi kan förresten inte bara nå element direkt. Även åtkomst via elementens attribut är möjlig.
<body> Namn: <input type="text" id="namn" /> <br /> Man: <input type="checkbox" name="kön" id="kön" /> <br /> Kvinna: <input type="checkbox" name="kön" id="kön" /> </body>
Här har olika formulärelement definierats.
• ett textinmatningsfält
• två kryssrutor
Dessa fält ska formateras.
input[type="checkbox"] {
width: auto;
}
Genom att använda den presenterade selektorn, hämtas faktiskt bara sådana input-element som har attributvärdeskombinationen type="checkbox".
Upprepningar
CSS erbjuder nu äntligen möjligheten att adressera upprepningar. Naturligtvis uppstår frågan, vad sådant kan vara bra för. Dessa selektorer är användbara till exempel när man vill styla varannan rad i en tabell olika färgad. Innan jag presenterar de tillgängliga selektorerna, ett mycket typiskt exempel:
<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>
Detta är en vanlig listning. Med hjälp av CSS ska var tredje listelement tilldelas en bakgrundsfärg.
För detta används selektorn nth-child(). Med denna selektor tas varje n-te barnobjekt.
#sprachen li:nth-child(3n) {
background-color: red;
}
Följande selektorer är tillgängliga:
• :root - Med selektorn :root kan roten av ett dokument adresseras.
• :nth-child(n) - Kontrollerar varje n-te element inuti ett föräldreelement. Denna selektor är särskilt användbar när flera element ska stylas olika. Med n avses nyckelordet som kan användas för att utföra beräkningar. n kan motsvaras av värdet 1.
• :nth-last-child(n) - Kontrollerar varje n-te element i ett element, där barnobjekten körs bakifrån.
• :nth-of-type(n) – Kontrollerar varje n-te element av samma HTML-typ på samma nivå.
• :nth-last-of-type(n) - Kontrollerar varje n-te element på samma nivå, där elementen körs bakifrån.
• :first-child - Kontrollerar det första barnobjektet inuti ett element.
• :last-child - Kontrollerar det sista barnobjektet inuti ett element.
• :first-of-type - Kontrollerar det första elementet av samma HTML-typ inuti ett föräldreelement.
• :last-of-type - Kontrollerar det sista elementet av samma HTML-typ inuti ett föräldreelement.
• :only-child - Kontrollerar ett element som inte har syskonobjekt och presenterar det enda barnobjektet i det överordnade elementet.
• :only-of-type - Kontrollerar ett element som inte har syskonobjekt av samma HTML-typ och representerar det enda elementet av den här sorten i det överordnade elementet.
• :empty - Kontrollerar tomma element.
De presenterade selektorerna underlättar arbetet med HTML avsevärt, eftersom komplicerade klassdefinitioner tillhör historien.
