Selector saudara umum

Pelajaran 10 dari 15 dalam kursus Selector CSS di Coddy.

Dalam pelajaran ini, kita akan membahas konsep selector saudara umum, cara ampuh untuk memilih dan memberi gaya pada elemen yang memiliki parent yang sama dan muncul setelah elemen tertentu.

Selector saudara umum memungkinkan kamu memilih elemen yang memiliki parent yang sama dan muncul setelah elemen tertentu. Selector ini ditandai dengan simbol tilde (~).

Sintaks:

element ~ target-element {
    /* Gaya yang diterapkan pada target-element */
}

Contoh:

HTML:

<div class="box"></div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<div class="highlight"></div>
<p>Paragraph 4</p>

CSS:

.box ~ p {
    color: gray;
}

Dalam contoh tersebut, semua elemen <p> yang muncul setelah elemen <div class="box"> akan memiliki warna teks abu-abu. Selector saudara umum (~) memilih dan memberi gaya pada elemen <p> berikutnya setelah elemen <div> yang ditentukan.

Tantangan

Mudah

Berdasarkan struktur HTML, terapkan warna latar belakang yang unik pada semua elemen <h3> yang muncul setelah elemen <h2>.

Coba sendiri


<html>
<head>
  <title>General Sibling Selector Exercise</title>
  <style>
    
  </style>
</head>
<body>
  <div class="content">
    <h2>Introduction</h2>
    <p>Content goes here...</p>
    <h3>Subsection 1</h3>
    <p>More content...</p>
    <h3>Subsection 2</h3>
    <p>Even more content...</p>
</div>
</body>
</html>

Semua pelajaran di Selector CSS

1Pengenalan CSS Selectors

Tujuan CSS Selectors Mengapa penting?

4Selector Atribut

Pengantar Selector Atribut Keberadaan dan Nilai Tepat Selector Nilai Atribut Selector Nilai Atribut II Selector Nilai Atribut III

2Selektor Sederhana

Selektor tipe Selektor class Selektor ID Selektor universal

3Selector Kombinator

Selector anak Selector keturunan Selector saudara berdekatanSelector saudara umum

Latihan sendiri: Playground Web