Flere selektorer skrevet sammen i CSS
For at vælge et element, som samtidig opfylder flere selektorer, skal du skrive disse selektorer sammen, uden mellemrum.
For eksempel vil følgende selektor vælge et element,
som samtidig har klassen bbb og klassen
zzz:
.bbb.zzz {
}
Og følgende selektor vil vælge overskriften h2,
som samtidig har klassen bbb og klassen
zzz:
h2.bbb.zzz {
}
På denne måde kan du konstruere vilkårlige kombinationer af selektorer. Rækkefølgen af de anvendte selektorer er ligegyldig, bortset fra reglen om, at tag-selektorer skal stå allerførst.
Det vil sige, at for eksempel selektorerne .bbb.zzz
og .zzz.bbb er fuldstændig ækvivalente.
Derudover kan du danne selektorer med
brugen af id, for eksempel sådanne:
#elem.eee, eller h2#elem.eee,
eller h2.eee#elem og så videre.
Forklar, hvad selektoren i nedenstående kode vælger. Skriv derefter HTML-kode, som passer til denne selektor. Her er koden med selektoren:
.bbb.zzz {
color: red;
}
Forklar, hvad selektoren i nedenstående kode vælger. Skriv derefter HTML-kode, som passer til denne selektor. Her er koden med selektoren:
h2.bbb.zzz {
color: red;
}
Forklar, hvad selektoren i nedenstående kode vælger. Skriv derefter HTML-kode, som passer til denne selektor. Her er koden med selektoren:
#elem.bbb {
color: red;
}
Forklar, hvad selektoren i nedenstående kode vælger. Skriv derefter HTML-kode, som passer til denne selektor. Her er koden med selektoren:
#elem.bbb.zzz {
color: red;
}
Forklar, hvad selektoren i nedenstående kode vælger. Skriv derefter HTML-kode, som passer til denne selektor. Her er koden med selektoren:
h2#elem.bbb {
color: red;
}
