Selector spesifikasi pada css

belajar css

CSS spesifikasi

Terkadang seseorang menulis code CSS sama persis entah itu disengaja atau tidak, keduanya bertentangan dan mengarah ke unsur yang sama. Browser tidak akan memproses keduanya, tetapi hanya satu dan menentukan mana yang paling spesifik untuk digunakan.

Susunan css spesifikasi

Setiap selector memiliki tempat dalam susunan atau hirarki yang lebih spesifik. Didalam css sendiri ada empat kategory yang menentukan tingkat spesifik dalam sebuah selector, Berikut list nya:

  • Style inline – Mencampurkan HTML dengan CSS secara langsung pada elemen. Sebagi contoh: <h1 style=”color: red;”></h1>
  • Id – Sebuah atribut identifikasi unik untuk elemen. Sebagai contoh: #footer
  • Class, atribut dan pseudo-classes – Kategori ini meliputi .classes, [atribut] dan pseudo-classes. Sebagai contoh: hover, : fokus dll
  • Elemen dan pseudo-elemen – Kategori ini meliputi nama elemen dan pseudo-elemen. Sebagai contoh: h1, span ::before, ::after dll

Cara perhitungan css spesifikasi

Agar Anda bisa mengetahui selector yang lebih spesifikasi itu yang mana, maka Anda harus menghitungnya. Berikut cara menghitungnya:

Semuanya dimulai dari 0
Untuk atribut style maka bertambah jadi 1000
Untuk setiap atribut id maka bertambah jadi 100
Untuk setiap atribut, class atau pseudo-classes maka bertambah jadi 10
Untuk setiap nama elemen atau pseudo-elemen maka bertambah jadi 1

Perhatikan tiga fragmen kode ini:

Contoh kode fragmen sederhana

A: h1
B: #content h1
C: <h1 style=”color: #ffffff”>Heading</h1>

Spesifikasi dari A adalah 1 (didapat dari nama elemen) 
Spesifikasi dari B adalah 101 (didapat dari ID dan dari nama elemen) 
Spesifikasi dari C adalah 1000 (didapat dari atribut style)

Sejak 1 < 101 < 1000, aturan ketiga (C) memiliki tingkat yang lebih besar dari spesifikasi, dan karena itu akan diterapkan.

Aturan dalam css spesifikasi

Jika sebuah kode ditulis dua kali didalam css dan mengarah ke unsur yang sama, maka kode yang lebih baru yang akan diterapkan.

Contoh:

Editor Online
  1. h1 {
  2. background-color: red;
  3. background-color: orange;
  4. }

Selector Id memiliki spesifikasi yang lebih tinggi dari pada selector atribut.

Contoh:

Editor Online
  1. div#box {
  2. background-color: red;
  3. }
  4. #box {
  5. background-color: blue;
  6. }
  7. div[id=”box”] {
  8. background-color: yellow;
  9. }

Selector class memiliki spesifikasi yang lebih tinggi dari pada selector nama elemen.

Contoh:

Editor Online
  1. .judul {
  2. background-color: yellow;
  3. }
  4. h1 {
  5. background-color: blue;
  6. }

Leave a Reply

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