Kekhususan CSS
Apa itu Spesifisitas?
Jika ada dua atau lebih aturan CSS yang mengarah ke elemen yang sama, pemilih dengan nilai spesifisitas tertinggi akan "menang", dan deklarasi gayanya akan diterapkan ke elemen HTML tersebut.
Pikirkan kekhususan sebagai skor/peringkat yang menentukan deklarasi gaya mana yang pada akhirnya diterapkan pada suatu elemen.
Perhatikan contoh berikut:
Contoh 1
Dalam contoh ini, kami telah menggunakan elemen "p" sebagai pemilih, dan menentukan warna merah untuk elemen ini. Teks akan berwarna merah:
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Sekarang, lihat contoh 2:
Contoh 2
Dalam contoh ini, kami telah menambahkan pemilih kelas (bernama "test"), dan menentukan warna hijau untuk kelas ini. Teks sekarang akan menjadi hijau (walaupun kita telah menetapkan warna merah untuk elemen pemilih "p". Ini karena pemilih kelas diberikan prioritas yang lebih tinggi:
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
Sekarang, lihat contoh 3:
Contoh 3
Dalam contoh ini, kami telah menambahkan pemilih id (bernama "demo"). Teks sekarang akan berwarna biru, karena pemilih id diberi prioritas lebih tinggi:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test">Hello
World!</p>
</body>
</html>
Sekarang, lihat contoh 4:
Contoh 4
Dalam contoh ini, kami telah menambahkan gaya sebaris untuk elemen "p". Teks sekarang akan menjadi merah muda, karena gaya sebaris diberi prioritas tertinggi:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test"
style="color: pink;">Hello World!</p>
</body>
</html>
Hirarki Spesifisitas
Setiap pemilih CSS memiliki tempatnya dalam hierarki kekhususan.
Ada empat kategori yang menentukan tingkat spesifisitas pemilih:
- Gaya sebaris - Contoh: <h1 style="color: pink;">
- ID - Contoh: #navbar
- Kelas, kelas semu, penyeleksi atribut - Contoh: .test, :hover, [href]
- Elemen dan elemen semu - Contoh: h1, :sebelum
Bagaimana Menghitung Spesifisitas?
Hafalkan cara menghitung spesifisitas!
Mulai dari 0, tambahkan 100 untuk setiap nilai ID, tambahkan 10 untuk setiap nilai kelas (atau kelas semu atau pemilih atribut), tambahkan 1 untuk setiap pemilih elemen atau elemen semu.
Catatan: Gaya sebaris mendapat nilai kekhususan 1000, dan selalu diberikan prioritas tertinggi!
Catatan 2: Ada satu pengecualian untuk aturan ini: jika Anda menggunakan !important
aturan, itu bahkan akan menimpa gaya sebaris!
Tabel di bawah ini menunjukkan beberapa contoh tentang cara menghitung nilai spesifisitas:
Selector | Specificity Value | Calculation |
---|---|---|
p | 1 | 1 |
p.test | 11 | 1 + 10 |
p#demo | 101 | 1 + 100 |
<p style="color: pink;"> | 1000 | 1000 |
#demo | 100 | 100 |
.test | 10 | 10 |
p.test1.test2 | 21 | 1 + 10 + 10 |
#navbar p#demo | 201 | 100 + 1 + 100 |
* | 0 | 0 (the universal selector is ignored) |
Pemilih dengan nilai spesifisitas tertinggi akan menang dan berlaku!
Pertimbangkan tiga fragmen kode ini:
Contoh
A: h1
B: h1#content
C: <h1 id="content" style="color:
pink;">Heading</h1>
Spesifisitas A adalah 1 (satu pemilih elemen) Spesifisitas
B adalah 101 (satu referensi ID + satu pemilih elemen) Spesifisitas
C adalah 1000 (gaya sebaris)
Karena aturan ketiga (C) memiliki nilai spesifisitas tertinggi (1000), deklarasi gaya ini akan diterapkan.
Contoh Aturan Kekhususan Lainnya
Spesifisitas yang sama: aturan terbaru menang - Jika aturan yang sama ditulis dua kali ke dalam lembar gaya eksternal, maka aturan terbaru menang:
Contoh
h1 {background-color: yellow;}
h1 {background-color: red;}
Pemilih ID memiliki spesifisitas yang lebih tinggi daripada pemilih atribut - Perhatikan tiga baris kode berikut:
Contoh
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
aturan pertama lebih spesifik daripada dua lainnya, dan karena itu akan diterapkan.
Selektor kontekstual lebih spesifik daripada pemilih elemen tunggal - Lembar gaya yang disematkan lebih dekat ke elemen yang akan ditata. Jadi dalam situasi berikut
Contoh
From external CSS file:
#content h1 {background-color: red;}
In HTML file:
<style>
#content h1 {background-color:
yellow;}
</style>
aturan terakhir akan diterapkan.
Sebuah pemilih kelas mengalahkan sejumlah pemilih elemen - pemilih kelas seperti .intro mengalahkan h1, p, div, dll:
Contoh
.intro {background-color: yellow;}
h1 {background-color:
red;}
Selektor universal (*) dan nilai yang diwariskan memiliki spesifisitas 0 - Selektor universal (*) dan nilai yang diwariskan diabaikan!