Tutorial CSS

RUMAH CSS Pengenalan CSS Sintaks CSS Pemilih CSS CSS Bagaimana caranya? Komentar CSS Warna CSS Latar Belakang CSS Batas CSS Margin CSS Lapisan CSS Tinggi/Lebar CSS Model Kotak CSS Garis Besar CSS Teks CSS Font CSS Ikon CSS Tautan CSS Daftar CSS Tabel CSS Tampilan CSS CSS Max-lebar Posisi CSS indeks Z CSS CSS Meluap CSS Float CSS Inline-blok Perataan CSS Penggabung CSS Kelas Pseudo CSS CSS Pseudo-elemen Opasitas CSS Bilah Navigasi CSS Dropdown CSS Galeri Gambar CSS Sprite Gambar CSS Pemilih Attr CSS Formulir CSS Penghitung CSS Tata Letak Situs Web CSS Unit CSS Kekhususan CSS CSS !penting Fungsi Matematika CSS

CSS Lanjutan

Sudut Bulat CSS Gambar Perbatasan CSS Latar Belakang CSS Warna CSS Kata Kunci Warna CSS Gradien CSS Bayangan CSS Efek Teks CSS Font Web CSS Transformasi 2D CSS Transformasi 3D CSS Transisi CSS Animasi CSS Tips Alat CSS Gambar Gaya CSS Refleksi Gambar CSS Kesesuaian objek CSS Posisi objek CSS Penyamaran CSS Tombol CSS Paginasi CSS CSS Beberapa Kolom Antarmuka Pengguna CSS Variabel CSS Ukuran Kotak CSS Kueri Media CSS Contoh MQ CSS CSS Flexbox

CSS Responsif

Perkenalan RWD Area Pandang RWD Tampilan Kotak RWD Kueri Media RWD Gambar RWD Video RWD Kerangka RWD Template RWD

Kotak CSS

Pengenalan kisi-kisi Wadah Kotak Item Kotak

CSS SASS

Tutorial SASS

Contoh CSS

Template CSS Contoh CSS kuis css Latihan CSS Sertifikat CSS

Referensi CSS

Referensi CSS Pemilih CSS Fungsi CSS Referensi CSS Aural Font Aman Web CSS CSS Animasi Unit CSS Konverter CSS PX-EM Warna CSS Nilai Warna CSS Nilai Default CSS Dukungan Peramban CSS

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!