Selector keturunan
Pelajaran 8 dari 15 dalam kursus Selector CSS di Coddy.
Pada topik sebelumnya, kita mempelajari kombinator anak, yang menargetkan anak langsung dari sebuah elemen. Sekarang, mari kita pelajari selector turunan, yang ditandai dengan spasi. Selector turunan memungkinkan kamu menargetkan elemen yang bersarang di dalam elemen lain pada tingkat apa pun, bukan hanya anak langsung.
Sintaks
selector1 selector2 {
/* deklarasi property */
}Contohnya,
<html>
<head>
<title>Combinator</title>
<style>
div p {
color: red;
font-size: 2em;
}
</style>
</head>
<body>
<div>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>Aturan CSS di atas akan memberi warna merah pada kedua paragraf dan menetapkan ukuran font 2em.
Apa hubungannya dengan selector anak?
Selector turunan lebih umum daripada selector anak. Artinya, selector turunan akan mencocokkan semua elemen yang merupakan turunan dari elemen yang ditentukan, sedangkan selector anak hanya akan mencocokkan elemen yang merupakan turunan langsung dari elemen yang ditentukan.
Contohnya, selector div p akan mencocokkan semua elemen p yang merupakan turunan dari elemen div, termasuk elemen p yang bersarang di dalam elemen p lainnya. Selector div > p hanya akan mencocokkan elemen p yang merupakan turunan langsung dari elemen div.
Tantangan
MudahMelanjutkan latihan sebelumnya, mari gunakan struktur HTML yang sama. Tulis aturan CSS menggunakan selector keturunan untuk memberi gaya pada semua paragraf di dalam elemen .list, terlepas dari tingkat penyarangannya. Beri paragraf tersebut warna, ukuran, dan font baru sesuai keinginanmu
Coba sendiri
<html>
<head>
<title>Descendant Selector Exercise</title>
<style>
/* CSS Code goes here */
</style>
</head>
<body>
<div>
<p>This paragraph is not inside a list</p>
<ul class="list">
<li>
<p>This is a paragraph inside a list item.</p>
</li>
<li>
<div>
<p>This is a paragraph inside a nested div within a list item.</p>
</div>
</li>
</ul>
</div>
</body>
</html>
Semua pelajaran di Selector CSS
Latihan sendiri: Playground Web