Måske ikke ukendte men om ikke andet alt for ubrugte. Der findes et hav af CSS 2 selectors og den kommende CSS 3 tilføjer endnu flere til samlingen. Du kender (forhåbentligt) allerede class-selectoren (.classname), id-selectoren (#id) og tag-selectoren (div , p osv). Nogle du derimod måske ikke kender, er child-selectoren (div > p f.eks.), tag-specificering af class- & id-selectorene (div#id, div.classname f.eks.) og attribute-selectoren (input[checked="checked"]). Af den årsag har jeg besluttet mig for, at jeg i denne guide vil beskrive hvad de gør, hvordan de bruges, og hvad de kan bruges til.
Child-selectoren
Til at vise brugen af denne selector har jeg sammensat følgende HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test-dokument</title>
</head>
<body>
<div id="content" class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend, ligula nec suscipit faucibus, lectus odio facilisis metus, ac adipiscing augue turpis vel risus. Mauris sit amet malesuada odio. Praesent lacinia sem non elit varius vestibulum. Donec id lorem nec urna egestas molestie ut eget felis.</p>
<div id="fakta-box">
<p> Morbi porttitor sapien vitae mi adipiscing cursus. Donec sed lorem metus. Aliquam quis accumsan diam. Nam ac leo augue. In cursus facilisis ante semper lacinia. Integer porta vehicula odio, nec aliquet purus hendrerit sed. Fusce quis pharetra quam. Donec dolor sem, tempor eget laoreet sit amet, ullamcorper ut ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque justo orci, porttitor eget tempus id, consectetur in arcu. Morbi facilisis nulla ut nisi dapibus bibendum. Proin ac diam id est auctor porta vitae nec arcu. Praesent vitae ante a enim tincidunt congue et in odio. Nunc eget sapien sit amet risus varius iaculis. </p>
</div>
</div>
</body>
</html>
Lad os sige at vi ønsker at vores tekst i selve content skal være blå, men vi ikke vil have, at vores tekst i fakta-boksen bliver blå. Den vil vi forsat have sort. Den mest lige til (og nok mest brugte) er den her:
#content p{
color: #00F;
}
#fakta-box p{
color: #000;
}
Child-selectoren gør dog, at vi kun skal bruge halvt så meget CSS og får en langt pænere kode med sammen resultat:
#content > p{
color: #00F;
}
Det child-selectoren gør, er at den siger: “Alle p-tags der direkte children af #content skal have color: #00F“. Det betyder, at hvis der ligger et div eller andet ‘imellem’ #content og p-tagget, bliver CSSen ikke ‘lagt på’.
Tag-specificering af class- & id-selectorene
Til at vise hvordan denne specificering kan være brugbar, har jeg skrevet følgende HTML (der ligner den forrige meget):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test-dokument</title>
</head>
<body>
<div id="content" class="container">
<p class="blaa">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a class="blaa" href="en-hjemmeside">Nullam eleifend</a>, ligula nec suscipit faucibus, lectus odio facilisis metus, ac adipiscing augue turpis vel risus. Mauris sit amet malesuada odio. Praesent lacinia sem non elit varius vestibulum. Donec id lorem nec urna egestas molestie ut eget felis.</p>
</div>
</body>
</html>
Lad os sige at vi vil have både vores p-tag og vores a-tag til at være blå. Det er derfor logisk at give dem begge to classen ‘blaa’, men vi ønsker at der skal være en farveforskel, så vores besøgende kan se forskel på tekst og links. Typisk ville man give dem hver sin class f.eks. “blaa-tekst” og “blaa-link”. Det kan dog sagtens gøres uden på følgende måde:
p.blaa{
color: #009;
}
a.blaa{
color: #00F;
}
Det der kort sagt sker her, er at vi siger “Alle p-tags med classen blaa skal have color: #oo9. Alle a-tags med classen blaa skal derimod have color: #00F“. I mange tilfælde kan det være en fordel, for at gøre CSSen lettere at læse, at give dem hver sin class men i nogle tilfælde, kan denne denne metode virke mere praktisk. I koden oven for kan ‘.’ erstattes med ‘#’, i tilfælde af der er tales om ID’er og ikke classes. Syntax’en er den sammen.
Attribute-selectoren
Til at vise denne selector har jeg lavet en lidt anderledes HTML end til de to andre:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test-dokument</title>
</head>
<body>
<div id="content" class="container">
<form id="test-form">
Unchecked: <input type="checkbox" /><br />
Checked: <input type="checkbox" checked="checked" />
</form>
</div>
</body>
</html>
I det her tilfælde er det vi vil opnå, at når en checkbox bliver checked (f.eks. via javascript), skal der skiftes cursor til når musen kører over. Dette kan, så vidt jeg ved, kun opnås med denne selector og det gøres med denne simple måde:
#test-form input[checked="checked"]{
cursor: wait;
}
Det vi gør er, at vi siger “Alle input elementer hvor attributen checked = checked vil vi have ændret cursoren til wait-cursoren”. Denne metode kan også bruges på alle andre attributes så som title, href osv. Der er dog også langt flere muligheder med denne selector end bare at sammenligne værdier. De flere muligheder agter jeg ikke at drøfte her, da det ikke er formålet med guiden. I tilfælde af du vil lærer mere er de beskrevet i CSS 2 specifikationerne.
Afrunding
Dette var alt for denne omgang omkring CSS 2 selectors. Jeg håber i har lært nogle nye tricks, som kan gøre arbejdet lidt lettere og om måske koden lidt pænere.
See ya’ around
Christian H. Selch
