⊗mkPmSlDSCC 61 of 250 menu

Kombinasi Kompleks Selektor Keturunan dan Kelas dalam CSS

Misalkan sekarang kita memiliki kode berikut:

<div class="block"> <h2 class="header">Judul h2</h2> <p> teks </p> <h3 class="header">Judul h3</h3> <p> teks </p> <p> teks </p> </div> <div class="block"> <h2 class="header">Judul h2</h2> <p> teks </p> <h3 class="header">Judul h3</h3> <p> teks </p> <p> teks </p> </div>

Mari kita temukan semua elemen dengan kelas header, yang berada di dalam elemen dengan kelas block, dan atur font mereka menjadi Arial:

.block .header { font-family: Arial; }

Seperti yang terlihat dalam kode HTML, di dalam elemen dengan kelas block, elemen dengan kelas header bisa berupa judul h2, maupun judul h3. Mari kita tulis selektor yang membedakan judul-judul ini, dan lakukan sesuatu pada judul-judul tersebut.

Mari kita pilih semua h2 dengan kelas header, yang berada di dalam elemen dengan kelas block:

.block h2.header { font-size: 30px; color: red; }

Dan sekarang mari kita pilih semua h3 dengan kelas header, yang berada di dalam elemen dengan kelas block:

.block h3.header { font-size: 20px; color: green; }

Mari kita gabungkan semua CSS kita:

.block .header { font-family: Arial; } .block h2.header { font-size: 30px; color: red; } .block h3.header { font-size: 20px; color: green; }

Terapkan ke kode HTML kita:

Jelaskan apa yang dipilih oleh selektor dalam kode di bawah ini. Kemudian tulis kode HTML yang sesuai dengan selektor ini. Berikut kode dengan selektor:

.eee .bbb { color: red; }

Jelaskan apa yang dipilih oleh selektor dalam kode di bawah ini. Kemudian tulis kode HTML yang sesuai dengan selektor ini. Berikut kode dengan selektor:

.eee h2 { color: red; }

Jelaskan apa yang dipilih oleh selektor dalam kode di bawah ini. Kemudian tulis kode HTML yang sesuai dengan selektor ini. Berikut kode dengan selektor:

.eee h2.bbb { color: red; }

Jelaskan apa yang dipilih oleh selektor dalam kode di bawah ini. Kemudian tulis kode HTML yang sesuai dengan selektor ini. Berikut kode dengan selektor:

.eee h3.bbb { color: red; }

Jelaskan apa yang dipilih oleh selektor dalam kode di bawah ini. Kemudian tulis kode HTML yang sesuai dengan selektor ini. Berikut kode dengan selektor:

.eee p.bbb { color: red; }

Jelaskan apa yang dipilih oleh selektor dalam kode di bawah ini. Kemudian tulis kode HTML yang sesuai dengan selektor ini. Berikut kode dengan selektor:

.eee .bbb .kkk { color: red; }
Indonesia
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Kami menggunakan cookie untuk operasi situs, analitik, dan personalisasi. Pemrosesan data dilakukan sesuai dengan Kebijakan Privasi.
terima semua atur tolak