5 snabba om CSS selectors och pseudoklasser

Av Andreas Johansson

Oftast så utnyttjar man inte CSS till 100%. Det finns många knep som kan göra ditt HTML-dokument mindre men ändå bättre styrt från CSS-mallen. För att komma åt just “det där elementet i det här fallet” så kan man använda sig av antingen selectors eller pseudoklasser i CSS.

1. x + y

Här har vi ett guldkorn som ofta blir bortglömt, det betyder att gör detta om x elementet kommer före y elementet. Speciellt användbart när man gör rubriknivåer: h1 + h2 { margin-top: -15px; } tar bort 15px från h2s top så att elementen linjerar bättre.

2. x > y

Har du en till exempel en div med flera strong i så kanske du enkelt vill komma åt strong taggarna.

Exempel:

<div> lite <strong>text</strong> med flera <strong>strong</strong> taggar</div>

Använd:

div > strong { }

Det finns vissa bevis som säger att istället för div > strong så renderas div strong snabbare i webbläsaren, båda fungerar lika bra.

3. x#y/x.y

När man sätter id=”y” eller class=”y” så ger man elementet ett “namn” som senare kan anropas från CSS-mallen. Det här är väldigt grundläggande men skriver man ut elementnamnet innan klassen som h1.red så letas enabrt alla h1-taggar som har class=”red” upp. h2/h3 eller p med klassen red ignoreras.

div#headline kan man skriva istället för enbart #headline. # representerar ett ID och till skillnad från class (punkt) får ett id bara återkomma en gång i dokumentet. Fördelen att skriva div#headline är att du alltid vet vilket element som representerar #headline.

4. x:y

Pseudoelement och pseudoklasser är en annan grupp som är bra att kunna. Vi kan bland annat sätta olika regler beroende vilket språk dokumentet är på via :lang taggen, eller bara komma åt första raden eller tecknet i en tagg.

• x:lang(sv) sätter regler på element x, men enbart ifall dokumentets språk är på Svenska.
• x:first-line Om man vill ha en ingress eller något speciellt som ska hända den första raden i varje paragraf (till exempel) så kan man använda :first-line.
• x:first-letter fungerar på smama sätt som :first-line men ändrar enbart det första tecknet.
• x:before används för att lägga in matrial innan ett element
• x:after fungerar som :before men lägger in efter ett element

5. x[rel~=y]

De säger att CSS är magiskt och att möjligheterna är oändliga, den här taggen representerar en stor del av den magin i så fall.

Exempel:

<div>
<a href="#">internt</a>
<a href="http://google.se" rel="external">google</a>
</div>

Hur ska jag nu komma åt enbart den externa länken? Enkelt, använd a[rel~=external] { }. Detta kan användas i fler syften, till exempel om du vill komma åt olika sorters knappar eller input element i ett formulär:

input[type=button]

Det finns olika sätt att komma åt informationen på:

• x[rel] kommer åt x elementet som har rel satt.
• x[rel=foo] kommer enbart åt x element som har foo som exakt värde i rel.
• x[rel~=foo] kommer åt element x som har foo som en del av värdet i rel.