Kombinationer av selektorer

Vi ska nu titta på lite fler selektorer, samt hur man kan kombinera selektorerna på olika vis. Det finns lite olika sätt på vilket vi kan påverka flera olika saker 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 rätt långsam, så man bör undvika den så långt som möjligt! Men i vissa fall kan den vara bra att ha. T.ex. om man vill ändra "box model" i ett helt dokument. Mer om detta senare...

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 ha, åtskilda med kommatecken, i vår regel. T.ex. så här:

.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 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, t.ex.

p i {
  font-weight: bolder;
}

Alla i-element som finns inuti p-element 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 många 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 många fler selektorer. Men dessa bör räcka långt, men vi återkommer till selektorer i ett senare avsnitt.

Nästa aktivitet

Pseudoklasser och pseudoelement