Kombinationer av selektorer: Skillnad mellan sidversioner
PGJ (diskussion | bidrag) Ingen redigeringssammanfattning |
PGJ (diskussion | bidrag) Ingen redigeringssammanfattning |
||
| Rad 3: | Rad 3: | ||
Om man någon gång vill påverka alla [[element]] i ett dokument så kan man använda sig av ”<code>*</code>”-tecknet. En sådan regel skulle se ut så här: | Om man någon gång vill påverka alla [[element]] i ett dokument så kan man använda sig av ”<code>*</code>”-tecknet. En sådan regel skulle se ut så här: | ||
<syntaxhighlight lang="html5"> | <syntaxhighlight lang="html5"> | ||
* { | * { | ||
| Rad 9: | Rad 8: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
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 ”<code>text-align</code>” till något annat. | 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 ”<code>text-align</code>” till något annat. | ||
| Rad 18: | Rad 16: | ||
Ibland vill man att en regel ska triggas igång av flera olika [[selektor]]er. 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 [[selektor]]er vi vill på en rad och sätter dem åtskilda med kommatecken. Så här kan det se ut: | Ibland vill man att en regel ska triggas igång av flera olika [[selektor]]er. 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 [[selektor]]er vi vill på en rad och sätter dem åtskilda med kommatecken. Så här kan det se ut: | ||
<syntaxhighlight lang="html5"> | <syntaxhighlight lang="html5"> | ||
.topp, p, h2 { | .topp, p, h2 { | ||
| Rad 24: | Rad 21: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Ovanstående exempel skulle sätta gul bakgrundsfärg på alla [[element]] som har [[klass]]en <code>.topp</code>, alla <code>[[p]]</code>-element och alla <code>[[hx|h2]]</code>-element. | Ovanstående exempel skulle sätta gul bakgrundsfärg på alla [[element]] som har [[klass]]en <code>.topp</code>, alla <code>[[p]]</code>-element och alla <code>[[hx|h2]]</code>-element. | ||
| Rad 31: | Rad 27: | ||
Nu ska vi börja titta på lite kraftfullare kombinationer av [[selektor]]er. Låt säga att du vill att alla <code>[[i]]</code>-element som finns inuti ett <code>[[p]]</code>-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 [[selektor]]er som en enda [[selektor]], åtskilda av ett mellanslag (eller annan "white space", såsom tab och ny rad). Ett exempel på detta: | Nu ska vi börja titta på lite kraftfullare kombinationer av [[selektor]]er. Låt säga att du vill att alla <code>[[i]]</code>-element som finns inuti ett <code>[[p]]</code>-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 [[selektor]]er som en enda [[selektor]], åtskilda av ett mellanslag (eller annan "white space", såsom tab och ny rad). Ett exempel på detta: | ||
<syntaxhighlight lang="html5"> | <syntaxhighlight lang="html5"> | ||
p i { | p i { | ||
| Rad 37: | Rad 32: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Här väljer vi ut alla <code>[[i]]</code>-element som finns nästlade inuti <code>[[p]]</code>-element och dessa skulle nu få fetare textstil. Det går förstås att kombinera med andra [[selektor]]er än element-selektorerna. | Här väljer vi ut alla <code>[[i]]</code>-element som finns nästlade inuti <code>[[p]]</code>-element och dessa skulle nu få fetare textstil. Det går förstås att kombinera med andra [[selektor]]er än element-selektorerna. | ||
| Rad 43: | Rad 37: | ||
Du kan även använda stjärn-selektorn. Om du skulle vilja ändra ''alla'' [[element]] som finns inuti <code>[[p]]</code>-element, skulle du kunna göra så här: | Du kan även använda stjärn-selektorn. Om du skulle vilja ändra ''alla'' [[element]] som finns inuti <code>[[p]]</code>-element, skulle du kunna göra så här: | ||
<syntaxhighlight lang="html5"> | <syntaxhighlight lang="html5"> | ||
p * { | p * { | ||
| Rad 49: | Rad 42: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
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. | 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. | ||
Nuvarande version från 31 oktober 2020 kl. 15.09
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...