Kombinerade väljare i CSS
Hittills har ni ju arbetat med tre typer av väljare i era CSS:er:
- Vanliga väljare, typväljare
- När du helt enkelt använder ett HTML-element som väljare, till exempel
p{color:red;} - Klasser som väljare
- När du använder ett klassnamn som väljare, med en punkt före, till exempel
.minklass{color:green;} - ID som väljare
- När du använder ett unikt ID som väljare, med ett nummertecken (#) före, till exempel
#mittid{color:blue;}
Varianterna ovan kan också kombineras på olika sätt för att uppnå en mer noggrann kontroll. Du kan ange regler som ska gälla för alla p som är barn till .minklass eller någonting annat.
De vanligaste varianterna är:
element element- två väljare efter varandra innebär att regeln gäller för alla av det senare elementet som ingår i det första. Exempel:
div p {color: red;}innebär att regeln gäller för alla<p>som ingår i en<div> element, element- Två väljare med ett komma mellan innebär att regeln gäller för båda elementen, oberoende av deras inbördes förhållande. Exempel:
h2, p {color: green;}innebär att alla<h2>och<p>blir röda, oavsett deras inbördes förhållande. Praktiskt när man vill korta ned sin kod. element > element- Ett större-än-tecken mellan väljarna innebär att regeln gäller för den sista väljaren om denna är barn till den föregående. Exempel:
div>p {color: blue;}betyder att alla<p>som är barn till en<div>blir blå.
Du kan kombinera dessa med ., # och annat. Du kan också haka på många olika väljare i en kedja. ul>li>.klassnamn innebär alltså alla element med klassnamnet klassnamn, som är barn till en <li>, som är barn till en <ul>.
De ovan nämnda är de absolut vanligaste, men det finns flera andra varianter som kan förekomma. Du kan till exempel göra en väljare som utgår från ett attribut som väljare snarare än ett element. Du kan använda ett värde som väljare och olika kombinationer av dessa.