Több CSS szelektor egymás után
Ahhoz, hogy egy olyan elemet válasszunk ki, amely egyszerre több szelektor feltételének megfelel, ezeket a szelektorokat egymás után, szóköz nélkül kell írni.
Például a következő szelektor kiválasztja azt az elemet,
amelynek egyszerre van bbb osztálya és
zzz osztálya:
.bbb.zzz {
}
A következő szelektor pedig kiválasztja a h2 címsort,
amelynek egyszerre van bbb osztálya és
zzz osztálya:
h2.bbb.zzz {
}
Ez alapján tetszőleges szelektor-konstrukciókat hozhatunk létre. Az alkalmazott szelektorok sorrendje nem számít, kivéve azt a szabályt, hogy a tag szelektorokat legelöl kell elhelyezni.
Vagyis például a .bbb.zzz és a
.zzz.bbb szelektorok teljesen egyenértékűek.
Ezen kívül létrehozhatunk szelektorokat
id használatával is, például ilyeneket:
#elem.eee, vagy h2#elem.eee,
vagy h2.eee#elem, és így tovább.
Magyarázza el, mit választ ki az alábbi kódban található szelektor. Ezután írjon HTML kódot, amely megfelel ennek a szelektorának. Itt a szelektoros kód:
.bbb.zzz {
color: red;
}
Magyarázza el, mit választ ki az alábbi kódban található szelektor. Ezután írjon HTML kódot, amely megfelel ennek a szelektorának. Itt a szelektoros kód:
h2.bbb.zzz {
color: red;
}
Magyarázza el, mit választ ki az alábbi kódban található szelektor. Ezután írjon HTML kódot, amely megfelel ennek a szelektorának. Itt a szelektoros kód:
#elem.bbb {
color: red;
}
Magyarázza el, mit választ ki az alábbi kódban található szelektor. Ezután írjon HTML kódot, amely megfelel ennek a szelektorának. Itt a szelektoros kód:
#elem.bbb.zzz {
color: red;
}
Magyarázza el, mit választ ki az alábbi kódban található szelektor. Ezután írjon HTML kódot, amely megfelel ennek a szelektorának. Itt a szelektoros kód:
h2#elem.bbb {
color: red;
}
