Tutorial CSS untuk Pemula: Prioritas Selector CSS atau CSS Specificity



Halo gan. Di postingan sebelumnya, kita sudah membahas prioritas sumber kode CSS, mana yang lebih diutamakan, dan ternyata inline style-lah yang paling utama.

Kali ini, kita akan bahas prioritas juga tapi dilihat dari kode CSS tepatnya pada selectornya. Mana yang paling kuat pengaruhnya ke halaman web.

prioritas selector css

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:
  1. Setiap elemen/tag bernilai 0001
  2. Setiap class, psuedo-class, atribute bernilai 0010
  3. Setiap id bernilai 0100
  4. 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>
    <style>
      @import url(spesifik.css);
    </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.

css specificity


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.

css specificity

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?

css specificity

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.




Tag : Tutorial CSS
0 Komentar untuk "Tutorial CSS untuk Pemula: Prioritas Selector CSS atau CSS Specificity"