Tutorial CSS

RUMAH CSS Pengenalan CSS Sintaks CSS Pemilih CSS CSS Bagaimana caranya? Komentar CSS Warna CSS Latar Belakang CSS Batas CSS Margin CSS Lapisan CSS Tinggi/Lebar CSS Model Kotak CSS Garis Besar CSS Teks CSS Font CSS Ikon CSS Tautan CSS Daftar CSS Tabel CSS Tampilan CSS CSS Max-lebar Posisi CSS indeks Z CSS CSS Meluap CSS Float CSS Inline-blok Perataan CSS Penggabung CSS Kelas Pseudo CSS CSS Pseudo-elemen Opasitas CSS Bilah Navigasi CSS Dropdown CSS Galeri Gambar CSS Sprite Gambar CSS Pemilih Attr CSS Formulir CSS Penghitung CSS Tata Letak Situs Web CSS Unit CSS Kekhususan CSS CSS !penting Fungsi Matematika CSS

CSS Lanjutan

Sudut Bulat CSS Gambar Perbatasan CSS Latar Belakang CSS Warna CSS Kata Kunci Warna CSS Gradien CSS Bayangan CSS Efek Teks CSS Font Web CSS Transformasi 2D CSS Transformasi 3D CSS Transisi CSS Animasi CSS Tips Alat CSS Gambar Gaya CSS Refleksi Gambar CSS Kesesuaian objek CSS Posisi objek CSS Penyamaran CSS Tombol CSS Paginasi CSS CSS Beberapa Kolom Antarmuka Pengguna CSS Variabel CSS Ukuran Kotak CSS Kueri Media CSS Contoh MQ CSS CSS Flexbox

CSS Responsif

Perkenalan RWD Area Pandang RWD Tampilan Kotak RWD Kueri Media RWD Gambar RWD Video RWD Kerangka RWD Template RWD

Kotak CSS

Pengenalan kisi-kisi Wadah Kotak Item Kotak

CSS SASS

Tutorial SASS

Contoh CSS

Template CSS Contoh CSS kuis css Latihan CSS Sertifikat CSS

Referensi CSS

Referensi CSS Pemilih CSS Fungsi CSS Referensi CSS Aural Font Aman Web CSS CSS Animasi Unit CSS Konverter CSS PX-EM Warna CSS Nilai Warna CSS Nilai Default CSS Dukungan Peramban CSS

Penggabung CSS


Penggabung CSS

Sebuah kombinator adalah sesuatu yang menjelaskan hubungan antara penyeleksi.

Sebuah pemilih CSS dapat berisi lebih dari satu pemilih sederhana. Di antara pemilih sederhana, kita dapat menyertakan kombinator.

Ada empat kombinator berbeda di CSS:

  • pemilih turunan (spasi)
  • pemilih anak (>)
  • pemilih saudara yang berdekatan (+)
  • pemilih saudara umum (~)

Pemilih Keturunan

Pemilih turunan cocok dengan semua elemen yang merupakan turunan dari elemen tertentu.

Contoh berikut memilih semua elemen <p> di dalam elemen <div>: 

Contoh

div p {
  background-color: yellow;
}

Pemilih Anak (>)

Selektor anak memilih semua elemen yang merupakan anak dari elemen tertentu.

Contoh berikut memilih semua elemen <p> yang merupakan anak dari elemen <div>:

Contoh

div > p {
  background-color: yellow;
}


Pemilih Saudara Berdekatan (+)

Selektor saudara yang berdekatan digunakan untuk memilih elemen yang secara langsung setelah elemen tertentu lainnya.

Elemen saudara harus memiliki elemen induk yang sama, dan "berdekatan" berarti "segera mengikuti".

Contoh berikut memilih elemen <p> pertama yang ditempatkan segera setelah elemen <div>:

Contoh

div + p {
  background-color: yellow;
}

Pemilih Saudara Umum (~)

Selektor saudara umum memilih semua elemen yang merupakan saudara kandung berikutnya dari elemen tertentu.

Contoh berikut memilih semua elemen <p> yang merupakan saudara kandung berikutnya dari elemen <div>: 

Contoh

div ~ p {
  background-color: yellow;
}

Uji Diri Anda Dengan Latihan

Olahraga:

Ubah warna semua elemen <p>, yang merupakan turunan dari elemen <div>, menjadi "merah".

<style>
 {
  color: red;
}
</style>

<body>

<div>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</div>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>


Semua Pemilih Kombinasi CSS

Selector Example Example description
element element div p Selects all <p> elements inside <div> elements
element>element div > p Selects all <p> elements where the parent is a <div> element
element+element div + p Selects the first <p> element that are placed immediately after <div> elements
element1~element2 p ~ ul Selects every <ul> element that are preceded by a <p> element