Kombinator selektor pada CSS

Kombinator pada CSS digunakan untuk menghubungkan selektor dengan pemilih yang terhubung dengan kombi

Selektor kombinator

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

Ada empat kombinator berbeda dalam CSS:

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

Selektor keturunan

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

div p {
    background-color: orange;
}

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

Selektor anak

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

div > p {
    background-color: orange;
}

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

Selektor saudara kandung yang berdekataan

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

div + p {
    background-color: orange;
}

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

Selektor saudara umum

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

div ~ p {
    background-color: orange;
}

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