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 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...

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 avkomlingar-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, åtskiljda 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.

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 underelementet. 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.