Selektorer: CSS pseudoklasser, pseudoelementer og attributselektorer
CSS for viderekomne kunne jeg også have brugt som overskrift for artiklerne i denne sektion.
Artiklerne dykker ned under overfladen inden for et emne der har at gøre med, hvorledes vi matcher vore formregler til websidens indhold.
Efter en kortfattet indledning gennemgår denne artikel følgende selektorer:
For at klare begreberne vil jeg starte med noget grundlæggende terminologi.
En formdeklaration er en komplet CSS-erklæring, der omfatter én eller flere selektorer og en formregelblok, der omfatter et antal formregler:
h3 {
font-size:1.1em;
line-height:100%;
margin:0.2em auto 0.5em auto;
color:maroon;
background-color:transparent;}
I ovenstående er h3 selektoren. Formregelblokken indeholder
fem formregler for fem forskellige egenskaber, jeg ønsker at påtrykke
ethvert h3-element.
h3, h4 {
font-size:1.1em;
line-height:100%;
margin:0.2em auto 0.5em auto;
color:maroon;
background-color:transparent;}
I ovenstående er både h3 og h4 selektorer og
påtrykkes de samme egenskaber.
Egenskaber, der ikke er sat i en sådan formdeklaration, arves. Er
der en egenskab, der ikke er defineret i dit stylesheet, bestemmer browseren
værdien af denne egenskab. Det er meget tydeligt for så vidt angår font-family.
Du kan sætte en font-family for body, der arves af alle
websidens elementer. Eller
du kan helt undlade at bestemme en font-family, hvorefter de
fleste browser vil vise
en Times New Roman i medium størrelse, svarende til ca. 16 pixel.
Indsætter jeg i mit stylesheet efterfølgende ovenstående en ny formdeklaration:
h4 {color:black;}
vil alle h4-elementer fortsat få de egenskaber, der er sat i den
foregående formdeklaration, men elementets farven vil blive sort.
Ønsker du at give et antal elementer nogle egenskaber, der afviger fra de egenskaber de pågældende elementer normalt skal have, bruger du klassenavne:
<h3 class="mellemrubrik">
Formdeklarationen, der formaterer netop disse h3-elementer, er:
h3.mellemrubrik {overline underline;}
Ønsker du at kunne give et vilkårligt element disse egenskaber, udformes formdeklarationen på følgende måde:
.mellemrubrik {overline underline;}
I ovenstående er class en attribut, og mellemrubrik er attributtens værdi.
De lettest forståelige og mest anvendte selektorer er blandt andet dem, der er nævnt ovenfor. Jeg gennemgår dem lige for en ordens skyld:
* {margin:0;padding:0;}
Denne formdeklaration matcher alle elementer, og eksempel anviser en metode til
sikre at alle elementers margin og padding nulstilles.
Efterfølgende må du så oprette formdeklarationer vedrørende disse egenskaber
for de elementer, du anvender på dine websider.
div#nav * {
font-family:arial,helvetica, sans-serif;
font-size:.9em;}
Denne formdeklaration vil vise alle tekstelementer i en div med
en id="nav" med
en sans-serif skrift i størrelsen 0,9 gange den normale skriftstørrelse.
Bemærk især for så vidt angår lister (og HTML-tabeller) at det er et voveligt foretagende at sætte skriftsstørrelser i andele eller procenter ved hjælp af universalselektoren. En skriftstørrelse på for eksempel 90% nedarves fra forædrelementet, så du får progressivt minder skrift i de indlejrede lister.
img {border:none;}
h1 {font-size:1.5em; color:#555;}
p {margin: 0 auto 0.5em auto;}
class.
Eksempler:
.right { text-align:right;}
img.right {
float:right;
margin:0.3em 0 0.3em 0.5em;}
p.advarsel {
background:yellow;
padding:0.3em .5em;
border:1px solid black;}
.sansserif {
font-family:arial, helvetica, sans-serif;
font-size:90%;}
.sserif {font-family:arial;}
.obs {
background:yellow;
padding:0.3em .5em;
border:1px solid black;}
.obs.sserif {
text-transform:uppercase;
font-size:90%;}
Disse eksempler vil tegne følgende afsnitselementer:
Undlad venligst at klikke på Send-knappen mere en én gang. Behandlingen af de indsendte data kan tage et antal sekunder.
Ovenstående skal vise standardskriften på gul bagrund og med en
sort rammekant omkring. class="obs".
Undlad venligst at klikke på Send-knappen mere en én gang. Behandlingen af de indsendte data kan tage et antal sekunder.
Ovenstående skal vise et almindeligt tekstafsnit med Arial eller anden sans-serif skrift.
class="sserif".
Undlad venligst at klikke på Send-knappen mere en én gang. Behandlingen af de indsendte data kan tage et antal sekunder
Ovenstående skal vise et tekstafsnit med gul baggrund, sort rammekant og
med versalskrift (store bogstaver). class="obs sserif".
div#nav {
float:right;
width:200px;
padding-left:20px;
border-left:3px solid #555;}
Bemærk, at en webside kan omfatte et vilkårligt antal klassenavne, men kun ét (1) element med en given id.
Således betegner vi flere selektorer, der virker i sammenhæng med hinanden.
p em {font-style:normal; font-variant:small-caps;}
ul.zmenu li {font-variant:small-caps;}
Den første formdeklaration matcher alle em-elementer, der er afkom af
et p-element, men ikke em-elementer, der er afkom af
for eksempel li-elementer eller td-elementer.li-elementer, der er afkom af en
ul med klassenavnet zmenu.
HTML-eksempel:
<ul class="zmenu"> <li>Menupunkt 1</li> <li>Menupunkt 2 <ol> <li>Menupunkt 2.1</li> <li>Menupunkt 2.2</li> <li>Menupunkt 2.3</li> </ol> </li> <li>Menupunkt 3</li> <li>Menupunkt 4</li> <li>Menupunkt 5</li> </ul>
HTML-koden herover tegner følgende liste:
Det er tydeligt i eksemplet, at alle listepunkterne tegnes med den samme skrifttype. Alle listepunkterne har samme fælles forældreelement.
ul.zmenu * li {formregelblok}
Ovenstående vil matche alle elementer, der er afkom af af en li
i ul.zemenu, det vil sige alle li'er i den indlejrede
liste, men ikke første-generations-li'erne. For at matche
første-generations-li'erne og kun dem er vi nødt til at ibrugtage
forældre-barn-selektoren:
ul.ymenu>li {formregelblok}
Ovenstående vil matche alle li'erne i en uordnet liste med klassenavnet
ymenu, men ikke li'er i lister, der er indlejret i denne
ul.
Et advarende ord er her på sin plads: Hvis du ikke i dit
globale stylesheet har en formdeklaration, der eksplicit sætter skriftfarven
på lister, vil den indlejrede ol arve farven fra den overordnede liste,
selvom den gengivne formdeklaration eksplicit kun matcher de li-elementer,
der er direkte afkom af ul'en.
Listen herover er formateret med følgende formregel:
ul#ymenu > li {color:teal;}
Hvis du studerer andre websidekonstruktørers stylesheets vil du af og til se
denne selektor anvendt på følgende måde: html>body div#box. Det er
et såkaldt stylesheet hack, der er en metode til at passere forskellige formregler
til forskellige browsere.
Lad være med det! Det er i den grad gået af mode. Nærmere forklaring i artiklen Internet Explorer 7 og webstandarderne.
h1 + p {font-weight:bold;}
Eksemplet vil vise det første tekstafsnit efter et h1-element med
fed skrift.
h1 ~ p {margin-left:1em; text-indent:-1em;}
Eksemplet vil vise alle tekstafsnit, der følger efter
en h1-overskrift, med hængende indrykning.
Kombinationsselektorer eksempelside.
Som det fremgår af ovenstående, er valget af selektor afgørende for dine muligheder for at give specifikke elementer nogle særlige egenskaber. Heldigvis er paletten noget bredere end de foregående eksempler.
Pseudoklasser svarer til almindelige klasser, som blot ikke er defineret i HTML-koden. Det kan formuleres sådan, at en pseudoklasse matcher en bestemt tilstand for et HTML-element der optræder i kildekoden.
Alle, der bare har snuset en lille smule til websidekonstruktion kender til begrebet, selv om de måske ikke har tænkt så meget på, hvad tingen hedder.
Pseudoklasser giver os mulighed for at formatere bestemte tilstande eller instanser af elementerne. Du kender det udmærket fra links. Et link på en webside kan have de fem tilstande, der er beskrevet i tabellen herunder:
| Selektor | Beskrivelse |
|---|---|
| a:link | Refererer til et link |
| a:visited | Refererer til et link, der har været besøgt |
| :focus | Refererer til et element, der aktuelt har input fokus, det vil sige elementet kan aktiveres |
| :hover | Refererer til et element, hvor musemarkøren befinder sig over linket |
| :active | Refererer til et element, hvor venstre musetast er trykket ned |
Modsætningsvis er pseudoelementer virtuelle elementer, der ikke eksplicit er oprettet i kildekoden. Om disse kan du læse i artiklen CSS pseudoelementer
De pseudoklasser, der er nævnt i denne artikel, finder primært anvendelse i forbindelse med formatering af links. Dette emne er tilpas bredt til, at jeg har skrevet en separat artikel om det: Formatering af links
Desuden findes der en del flere pseudoklasser med meget interessante anvendelsesmuligheder. Disse fortæller jeg om i artiklen CSS pseudoklasser.
November 2009