Belajar css kombinator selector

belajar css

CSS selector kombinator

Selector kombinator pada CSS digunakan untuk menghubungkan selector dengan pemilih, dan selector kombinator bisa berupa pemilih sederhana atau pemilih yang kompleks yang terdiri dari lebih dari satu pemilih yang terhubungan dengan menggunakan kombinator. Anda bisa memilih selector lebih dari satu pilihan dengan dipisahkan dengan koma.

Ada empat kombinator berbeda dalam CSS:

  • selector keturunan (spasi)
  • selector anak (>)
  • selector saudara kandung yang berdekatan (+)
  • selector saudara umum (~)

Selector keturunan

Selector keturunan digunakan untuk memilih semua elemen keturunan dari tag HTML yang dipilih. Combinator ini untuk menghubungkannya menggunakan spasi.

Contoh:

Editor Online
  1. div p {
  2. background-color: orange;
  3. }

Contoh diatas memilih semua elemen <p> yang didalam elemen <div> 

Selector anak

Selector anak digunakan untuk memilih elemen yang merupakan anak langsung dari tag HTML yang dipilih. Combinator ini untuk menghubungkannya menggunakan lebih besar (>).

Contoh:

Editor Online
  1. div > p {
  2. background-color: orange;
  3. }

Contoh diatas memilih elemen <p> yang merupakan anak langsung dari elemen <div>

Selector saudara kandung yang berdekatan

Selector saudara digunakan untuk memilih elemen yang merupakan saudara kandung yang berdekatan dari tag HTML yang dipilih, selector saudara harus memilih elemen induk yang bersebelahan dan berdekatan hampir secara langsung. Combinator ini untuk menghubungkannya menggunakan tambah (+).

Contoh:

Editor Online
  1. div + p {
  2. background-color: orange;
  3. }

Contoh diatas memilih elemen <p> yang berdekatan dengan elemen <div>

Selector saudara umum

Selector saudara umum digunakan untuk memilih semua elemen yang merupakan saudara kandung yang berdekatan dari tag HTML yang dipilih, selector saudara umum harus memilih elemen induk yang bersebelahan dan berdekatan hampir secara langsung. Combinator ini untuk menghubungkannya menggunakan tilde (~).

Contoh:

Editor Online
  1. div ~ p {
  2. background-color: orange;
  3. }

Contoh diatas memilih semua elemen <p> yang berdekatan dengan elemen <div>

Leave a Reply

Your email address will not be published. Required fields are marked *