Specificity dan Inheritance di CSS
Sudah mengubah nilai di selector tapi tampilan web tidak berubah? Mungkin anda mengubah nilai pada selector yang salah. Disinilah anda perlu mempelajari Specificity dan Inheritance di CSS. Pada pembahasan sebelumnya kita telah mempelajari tentang Pseudo-Class dan Pseudo-Element di CSS. Silahkan pelajari terlebih dahulu jika belum memahaminya.
CSS (Cascading Style Sheets) adalah bahasa stylesheet yang digunakan untuk mengontrol tampilan halaman web. Ketika mengaplikasikan gaya pada elemen HTML, CSS mengikuti aturan tertentu untuk menentukan prioritas gaya yang akan diterapkan. Aturan tersebut dikenal dengan istilah cascade, inheritance, dan specificity.
Cascade sudah kita bahas pada materi awal tentang Pengenalan CSS. Maka kita akan membahas specificity dan inheritance.
Specificity di CSS
Specificity adalah metode yang digunakan oleh browser untuk menentukan aturan CSS mana yang akan diterapkan pada elemen HTML tertentu. Ini digunakan ketika ada beberapa aturan CSS yang berlaku untuk elemen yang sama, dan browser harus memutuskan aturan mana yang harus diterapkan.
Pengukuran Specificity
Specificity dihitung dengan mempertimbangkan 4 komponen: Inline Style, ID selector, Class/Atribut/Pseudo-class, elemen selector. Ini dihitung dalam format “A-B-C-D” yang terdiri dari 4 angka, di mana A adalah jumlah inline styles, B adalah jumlah id selectors, C adalah jumlah class selectors, attribute selectors, dan pseudo-classes lalu D adalah jumlah elemen selector.
- Inline styles (A): Ini adalah gaya yang didefinisikan langsung di elemen HTML menggunakan atribut “style”. Inline styles memiliki specificity tertinggi.
- ID selectors (B): Ini adalah selektor yang digunakan untuk mengidentifikasi elemen tertentu berdasarkan id-nya.
- Class selectors, attribute selectors, dan pseudo-classes (C): Ini adalah selektor yang digunakan untuk mengidentifikasi elemen berdasarkan kelas, atribut, atau kondisi tertentu (pseudo-class).
- Elemen selectors dan pseudo-elements (D): Ini memiliki specificity terendah. Elemen selectors adalah selektor yang mengidentifikasi elemen berdasarkan nama tag-nya, sementara pseudo-elements digunakan untuk mengatur bagian-bagian tertentu dari elemen.
Contoh Inline styles yang dipakai
CSS:
#myId { color: red; }
.myClass { color: green; }
p { color: yellow; }
HTML:
<p style="color: blue;">Hello, World!</p>
Penjelasan: Dalam contoh ini, elemen <p> memiliki style inline dengan nilai color: blue;. Karena inline styles memiliki specificity tertinggi (1,0,0,0), warna teks pada elemen tersebut akan menjadi biru.
Contoh ID selector yang dipakai
CSS:
#myId { color: blue; }
.myClass { color: green; }
p { color: yellow; }
HTML:
<p id="myId" class="myClass">Hello, World!</p>
Penjelasan: Dalam contoh ini, ID selector memiliki specificity tertinggi (0,1,0,0). Jadi, meskipun ada class selector dan type selector yang berlaku pada elemen yang sama, ID selector akan mengalahkan keduanya. Warna teks pada elemen tersebut akan menjadi biru.
Contoh Class selector yang dipakai
CSS:
.myClass { color: red; }
p { color: yellow; }
HTML:
<p class="myClass">Hello, World!</p>
Penjelasan: Di sini, class selector memiliki specificity lebih tinggi (0,0,1,0) dibandingkan dengan type selector (0,0,0,1). Jadi, meskipun ada type selector yang berlaku pada elemen yang sama, class selector akan mengalahkannya. Warna teks pada elemen tersebut akan menjadi merah.
Masih merasa sulit menghitungnya? Mari kita lihat contoh berikut:
Contoh pengukuran Specificity
<!DOCTYPE html>
<html>
<head>
<title>Contoh Kasus Spesifik CSS</title>
<style type="text/css">
span {
color: navy;
}
#idUnik span {
color: olive;
}
.classSpesial {
color: lime;
}
body div #idUnik {
color: maroon;
}
div span.classSpesial {
color: fuchsia;
}
</style>
</head>
<body>
<div>
<span id="idUnik" class="classSpesial">
Contoh Spesifik CSS
</span>
</div>
</body>
</html>
Berikut cara menghitungnya:
- Selector
span, hanya terdiri dari 1 tag selector, maka nilainya: 0,0,0,1 - Selector
#idUnik span, terdiri dari 1 ID selector dan 1 tag selector, maka nilainya: 0,1,0,1 - Selector
.classSpesial, terdiri dari 1 class selector, maka nilainya: 0,0,1,0 - Selector
body div #idUnik, terdiri dari 1 ID selector dan 3 tag selector, maka nilainya: 0,1,0,2 - Selector
div span.classSpesial, terdiri dari 1 class selector dan 2 tag selector, maka nilainya: 0,0,1,2
Maka yang diterapkan adalah warna maroon dengan hasil nilai 0,1,0,2 yang merupakan nilai tertinggi.
!important
!important adalah sebuah kualifikasi yang dapat ditambahkan pada deklarasi gaya CSS untuk memberikan keutamaan pada aturan tersebut dibandingkan dengan aturan lain yang mungkin berlaku pada elemen yang sama. Dengan kata lain, deklarasi yang memiliki !important akan diutamakan, meskipun aturan lain memiliki specificity yang lebih tinggi.
CSS:
.myClass {
color: red !important;
}
#myId {
color: blue;
}
HTML:
<p id="myId" class="myClass">Hello, World!</p>
Meskipun ID selector biasanya memiliki specificity yang lebih tinggi dibandingkan class selector, dalam kasus ini aturan .myClass akan mengalahkan aturan #myId karena memiliki !important. Hasilnya, warna teks pada elemen tersebut akan menjadi merah.
Namun, penggunaan !important harus dilakukan dengan hati-hati, karena dapat membuat kode CSS menjadi sulit dikelola dan membingungkan. Ini harus dihindari sebisa mungkin dan hanya digunakan sebagai solusi terakhir saat tidak ada cara lain untuk mengatasi konflik aturan CSS.
Inheritance di CSS
Inheritance (pewarisan) dalam CSS adalah suatu mekanisme yang memungkinkan sebuah elemen untuk mewarisi sifat atau style dari elemen induknya. Ini adalah salah satu fitur dasar CSS yang sangat berguna untuk memudahkan penulisan kode dan menjaga konsistensi gaya dalam desain web.
Dalam CSS, tidak semua properti dapat diwariskan. Beberapa properti yang biasanya diwariskan meliputi font-size, color, dan text-align, tetapi ada banyak properti lain yang juga dapat diwariskan.
Contoh Penggunaan Inheritance
Mari kita lihat contoh penggunaan pewarisan dalam CSS:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Inheritance CSS</title>
<style>
/* Elemen <body> memiliki gaya font-size dan color yang akan diwariskan ke elemen-elemen di dalamnya */
body {
font-size: 16px;
color: blue;
}
/* Elemen <div> secara otomatis akan mewarisi font-size dan color dari elemen <body> */
div {
/* Tanpa perlu mendefinisikan font-size dan color di sini */
}
/* Elemen <p> juga akan mewarisi font-size dan color dari elemen <body> */
p {
/* Tanpa perlu mendefinisikan font-size dan color di sini */
}
</style>
</head>
<body>
<div>
<p>Paragraf ini akan memiliki font-size 16px dan warna biru.</p>
</div>
</body>
</html>
Dalam contoh di atas, elemen <body> memiliki gaya font-size dan color yang didefinisikan di dalam CSS. Karena kedua properti ini dapat diwariskan, maka elemen-elemen di dalam <body>, seperti <div> dan <p>, akan otomatis mewarisi nilai font-size dan color tersebut tanpa perlu mendefinisikannya secara eksplisit.
Mengganti Gaya yang Diwariskan
Meskipun pewarisan dapat sangat membantu, terkadang Anda mungkin ingin mengganti gaya yang diwariskan untuk elemen-elemen tertentu. Anda dapat melakukannya dengan mendefinisikan gaya secara eksplisit pada elemen tersebut.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Inheritance CSS</title>
<style>
body {
font-size: 16px;
color: blue;
}
/* Mengganti gaya yang diwariskan pada elemen <p> */
p {
color: red;
}
</style>
</head>
<body>
<div>
<p>Paragraf ini akan memiliki warna merah.</p>
</div>
</body>
</html>
Dalam contoh di atas, elemen <p> akan memiliki warna merah, meskipun elemen induknya (elemen <body>) memiliki warna biru. Ini karena gaya yang didefinisikan secara eksplisit pada elemen <p> akan menggantikan gaya yang diwariskan.
inherit
Inherit dalam css adalah nilai yang digunakan untuk mengatur elemen agar mewarisi nilai dari elemen induknya secara paksa meskipun properti tersebut tidak bisa diwariskan.
Contoh penggunaan inherit
CSS:
.parent {
font-size: 24px;
color: red;
margin: 10px;
}
.child {
font-size: inherit;
margin: inherit;
}
HTML:
<div class="parent">
Ini teks induk
<p class="child">Ini teks anak</p>
</div>
Dalam contoh ini, elemen dengan kelas .child akan mewarisi nilai font-size dan margin dari elemen dengan kelas .parent. Hasilnya, teks dalam elemen .child akan memiliki ukuran font 24px dan margin 10px, yang sama dengan elemen .parent.
Secara umum, pewarisan dalam CSS adalah fitur yang berguna untuk memudahkan penulisan kode dan menjaga konsistensi gaya dalam desain web. Anda dapat mengandalkan pewarisan untuk mengatur properti yang umum di seluruh halaman web dan mendefinisikan gaya secara eksplisit untuk mengganti atau menyesuaikan gaya pada elemen-elemen tertentu.
Apa yang perlu dipelajari selanjutnya?
Setelah memahami Specificity dan Inheritance di CSS maka selanjutnya pelajari:
Mari lanjutkan!
