Sebelumnya kita sudah membahas prioritas CSS. Sekarang kita akan membahas sedikit yang mirip yaitu prioritas selector CSS. Bagaimana maksudnya dan penggunaannya? Silakan simak panduan AneIqbal berikut sampai akhir.
Kali ini, kita akan bahas prioritas juga tapi dilihat dari kode CSS tepatnya pada selectornya. Mana yang paling kuat pengaruhnya ke halaman web.
Urutan prioritas selector css atau CSS Specificity
Pendesainan tampilan web dengan kode CSS, sering kali property value (style) selector saling menimpa satu sama lain, maka yang terjadi adalah tampilan web nggak sesuai sama yang kita koding di CSSnya.
..kok sama aja ya?
..kok nggak berubah ya?
..kok nggak ngefek ya?
Seperti itulah pertanyaan-pertanyaan yang sering muncul. Ane juga sering ngalamin begitu.
Ternyata, ada urutan prioritas selector pada CSS. Style yang tampil di halaman web berarti selector itulah yang paling kuat.
Ukuran prioritas ini dihitung dengan angka 4 digit, yakni: 0,0,0,0. Agar lebih mudah kita hilangkan komanya: 0000.
Tiap selector, punya angka tersendiri. Angka ini dapat dijumlahkan jika selectornya lebih dari 1.
Berikut angka tiap-tiap selector:
- Setiap elemen/tag bernilai 0001.
- Setiap class, psuedo-class, atribute bernilai 0010.
- Setiap id bernilai 0100.
- Setiap inline style bernilai 1000.
Supaya lebih enak lagi, dan lebih dapet, yuk kita praktikkan.
Misal, ada file spesifik.html, isi kode HTMLnya:
<!DOCTYPE html>
<html>
<head>
<title>CSS Specificity</title>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%40import%20url(spesifik.css)%3B%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
</head>
<body>
<h1 id="judul">Ini adalah judul</h1>
</body>
</html>
Lalu file spesifik.css, isi kode CSSnya:
h1 {
color: blue;
}
#judul {
color: green;
}
Warna apakah yang akan tampil di halaman web? birukah? hijaukah?
..jeng jeng.
..dan ternyata, hijau!
Coba kita hitung jumlah angka selectornya.
- Selector h1, adalah sebuah elemen/tag, maka jumlahnya: 0001.
- Selector #judul, adalah sebuah id, maka jumlahnya: 0100.
Lebih besar yang id kan? Dialah pemenangnya, maka style itulah yang bakal tampil di halaman web.
Sekarang, kita coba tambahkan selector lagi di kode CSSnya, seperti ini:
h1 {
color: blue;
}
#judul {
color: green;
}
h1#judul {
color: red;
}
Apakah masih berwarna hijau? mari kita lihat.
Ternyata berubah menjadi merah, sesuai dengan selector yang baru kita tambahkan tadi. Mari kita berhitung.
- Selector h1, adalah sebuah elemen/tag, maka jumlahnya: 0001.
- Selector #judul, adalah sebuah id, maka jumlahnya: 0100.
- Selector h1#judul, adalah sebuah elemen/tag dan sebuah id, maka jumlahnya: 0101.
Maka selector h1#judul yang jadi pemenangnya.
Coba kita tambahkan 1 selector lagi di kode CSSnya:
h1 {
color: blue;
}
#judul {
color: green;
}
h1#judul {
color: red;
}
body h1#judul {
color: aqua;
}
Warna apakah yang akan tampil?
Warna yang muncul adalah warna aqua, karena jumlah angkanya lebih besar.
Coba kita hitung:
- Selector h1, adalah sebuah elemen/tag, maka jumlahnya: 0001.
- Selector #judul, adalah sebuah id, maka jumlahnya: 0100.
- Selector h1#judul, adalah sebuah elemen/tag dan sebuah id, maka jumlahnya: 0101.
- Selector body h1#judul, adalah 2 elemen/tag dan sebuah id, maka jumlahnya: 0102.
Maka selector body h1#judul yang jadi pemenangnya.
Contoh lainnya:
div#bungkus p.paragraf1
Jumlah angkanya: 0112, karena ada 1 id, 1 class, dan 2 elemen/tag.
<h1 style=”color:aqua”>Ini adalah judul</h1>
Jumlah angkanya: 1000, karena inline style.
Sampai sini selesai sudah pembahasan kita kali ini tentang prioritas selector CSS atau CSS Specificity. Silakan bereksplorasi lebih jauh supaya lebih lebih lebih jago lagi.
Selanjutnya, kita akan bahas fungsi important pada CSS.
