Kombinationer av selektorer
Vi ska nu titta på lite fler selektorer, samt hur man kan kombinera selektorerna på olika vis. Det finns många sätt på vilket vi kan påverka olika element med våra selektorer. Den enklaste multi-selektorn är *-selektorn.
*
Om man någon gång vill påverka alla element i ett dokument så kan man använda sig av ”*”-tecknet. En sådan regel skulle se ut så här:
* {
text-align: left;
}
Det skulle göra att all text, i alla element skulle skjutas åt vänster. Ja, förutom de element som eventuellt påverkas av någon annan regel, som är mer specifik än denna och som sätter ”text-align” till något annat.
Stjärn-selektorn är väldigt generell och matchar ofta alltför mycket. Den kan vara långsam att använda i de fall som man anger många egenskaper i den. Vanligtvis brukar man undvika den så långt som möjligt, men i vissa fall kan den vara bra att ha. Ett exempel på detta kan vara om man vill ändra "box model" för allt i ett helt dokument.
Flera selektorer, en regel
Ibland vill man att en regel ska triggas igång av flera olika selektorer. Det vill säga vi vill att flera olika typer av element ska påverkas av en och samma regel. Det är lätt att åstadkomma. Vi kombinerar helt enkelt alla selektorer vi vill på en rad och sätter dem åtskilda med kommatecken. Så här kan det se ut:
.topp, p, h2 {
background-color: yellow;
}
Ovanstående exempel skulle sätta gul bakgrundsfärg på alla element som har klassen .topp, alla p-element och alla h2-element.
Avkomling-selektorn (descendant)
Nu ska vi börja titta på lite kraftfullare kombinationer av selektorer. Låt säga att du vill att alla i-element som finns inuti ett p-element ska påverkas. Man brukar kalla element som ligger inuti andra element för underelement, nästlade element eller avkomlings-element (från engelskans descendant). För att komma åt dessa element, skapar man en regel där man sätter samman flera selektorer som en enda selektor, åtskilda av ett mellanslag (eller annan "white space", såsom tab och ny rad). Ett exempel på detta:
p i {
font-weight: bolder;
}
Här väljer vi ut alla i-element som finns nästlade inuti p-element och dessa skulle nu få fetare textstil. Det går förstås att kombinera med andra selektorer än element-selektorerna.
Du kan även använda stjärn-selektorn. Om du skulle vilja ändra alla element som finns inuti p-element, skulle du kunna göra så här:
p * {
font-weight: bolder;
}
I de flesta fall är det dock inte nödvändigt att göra detta. Väldigt många av föräldra-elementens egenskaper ärvs av underelementen. Så om du ändrar något såsom text-färgen, kommer underelementen att ärva samma färg. Vissa egenskaper ärvs dock inte. Om det inte fungerar som du vill, kolla i listan över CSS-egenskaper och se om egenskaperna ärvs eller ej.
Det finns mer...
Det finns många fler selektorer. Men dessa bör räcka för tillfället...