Selector saudara berdekatan

Pelajaran 9 dari 15 dalam kursus Selector CSS di Coddy.

Mari kita bahas selector sibling berdekatan. Selector ini menargetkan elemen yang memiliki parent yang sama dan langsung muncul setelah elemen yang dipilih. Selector sibling berdekatan adalah selector CSS yang memilih semua elemen yang merupakan sibling dari elemen tertentu dan berada tepat setelahnya. Selector sibling berdekatan ditandai dengan tanda tambah (+) di antara dua selector.

Sintaks

former_element + target_element {
  /* property gaya */
}

Misalkan kita memiliki struktur HTML berikut:

<div class="container">
   <p>First paragraph</p>
   <span>Adjacent span</span>
   <p>Second paragraph</p>
</div>

Untuk memberi gaya pada <span> yang langsung mengikuti paragraf, gunakan selector sibling berdekatan:

p + span {
   font-weight: bold;
}

Dalam contoh ini, "Adjacent span" akan memiliki ketebalan font tebal.

Tantangan

Mudah

Buat halaman web dengan elemen p dan elemen span.
Gunakan selector saudara berdekatan untuk memberi border merah pada elemen span yang tepat bersebelahan dengan elemen p.

Coba sendiri

<html>
<head>
    <title>Adjacent Sibling Selector Exercise</title>
    <style>
        /* CSS Code goes here */
    </style>
</head>
<body>
    
</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 keturunanSelector saudara berdekatanSelector saudara umum

Latihan sendiri: Playground Web