Macam macam selektor pada CSS

Selektor digunakan untuk memilih elemen HTML mana yang akan digunakan untuk diberikan style. Anda bis

Kegunaan selektor

Pada CSS selektor sangat penting, selektor digunakan untuk memilih elemen HTML mana yang akan digunakan untuk diberikan style. Anda bisa menentukan selektor dengan berbagai macam cara, seperti: dengan elemen HTML, atribut id, atribut class, universal dan yang lainnya.

Selektor dengan elemen HTML

Anda bisa menggunakan selektor dengan memilih nama elemen HTML secara langsung untuk memberikan style pada elemen HTML tersebut.

h1 {
    background-color: yellow;
    color: red;
}
p {
    color: blue;
}

Anda akan belajar seputar properti color dan background-color lebih dalam pada bab berikutnya.

Selektor dengan atribut id

Anda bisa menggunakan selektor dengan memilih nama atribut id untuk memberikan style pada elemen HTML yang diberi nama atribut id tersebut. Atribut id bersifat single atau tunggal. Nama atribut id bebas asalkan dimulai dengan huruf.

#tunggal {
    background-color: green;
    color: yellow;
}

Anda akan belajar seputar properti color dan background-color lebih dalam pada bab berikutnya.

Selektor dengan atribut class

Anda bisa menggunakan selektor dengan memilih nama atribut class untuk memberikan style pada elemen HTML yang diberi nama atribut class tersebut. Atribut class bersifat kelompok atau lebih dari satu. Nama atribut class bebas asalkan dimulai dengan huruf.

.kelompok {
    background-color: black;
    color: white;
}

Anda akan belajar seputar properti color dan background-color lebih dalam pada bab berikutnya.

Selektor dengan universal

Selektor universal merupan pemilihan secara global atau umum, yang ditulis sebagai * tanda bintang atau simbol bintang. Selektor ini sering digunakan untuk mengatur margin dan padding menjadi 0 (nol). Dengan tujuan agar setiap elemen mempunyai style margin dan padding menjadi nol, sehingga untuk mengukur layout lebih mudah.

* {
    padding: 0;
    margin: 0;
}

Anda akan belajar seputar properti padding dan margin lebih dalam pada bab berikutnya.

Pengelompokan selektor

Mungkin Anda pernah beberapa selektor dalam CSS mempunyai style yang sama. Anda dapat mengelompokkan selektor yang dipilih dengan memisahkannya dengan koma, dengan tujuan untuk meminilkan sebuah code, dan ini juga mencegah Anda mengulangi aturan style yang sama berulang-ulang.

h1 {
    background: green;
    color: yellow;
}
h2 {
    background: blue;
    color: yellow;
}
p {
    background: black;
    color: yellow;
}

Seperti yang Anda lihat pada contoh di atas, aturan style yang sama color: yellow; dibagi oleh selektor h1, h2 dan p. Jadi, ini dapat dikelompokkan dalam daftar yang dipisahkan koma, seperti contoh dibawah ini:

h1, h2, p {
    color: yellow;
}
h1 {
    background: green;
}
h2 {
    background-color: blue;
}
p {
    background-color: black;
}

Anda akan belajar seputar properti color dan background-color lebih dalam pada bab berikutnya.

Daftar macam-macam selektor

SelektorContohDeskripsi
elemenpMemilih semua elemen html <p>
atribut id#tunggalMemilih semua elemen dengan atribut id=”tunggal”
atribut class.kelompokMemilih semua elemen dengan atribut class=”kelompok”
universal*Memilih semua elemen