CSS Specificity

Kembali ke skillance.my.id Bursa Freelance

Skillance Academy (Materi Belajar Skillance Academy) Masuk Akun

HTML CSS JavaScript PHP & MySQL SQL jQuery Python Java C++ Vue Flutter UI/UX ROADMAP KIT PROYEK KEMITRAAN KAMPUS CEK SERTIFIKAT

CSS Specificity

« Sebelumnya Berikutnya »

Kekhususan (Specificity) adalah algoritma yang digunakan browser untuk menentukan deklarasi CSS mana yang paling relevan bagi suatu elemen.

Hierarki Bobot Kekhususan:

Inline Style (Tertinggi: misal style="color: red;").
ID Selector (misal #menu).
Class, Pseudo-class, Attribute Selector (misal .btn, :hover).
Element & Pseudo-element Selector (Terendah: misal p, h1).

Contoh Persaingan Specificity:

<!DOCTYPE html>
<html>
<head>
    <style>
        #teksKhusus { color: #fca311; } /* ID: Bobot 100 */
        .teks-biru { color: #3b82f6; }   /* Class: Bobot 10 */
        p { color: #334155; }            /* Element: Bobot 1 */
    </style>
</head>
<body>

    <p id="teksKhusus" class="teks-biru">Teks ini akan berwarna EMAS (#fca311) karena ID lebih kuat dari Class!</p>

</body>
</html>

Coba Sendiri (Try it Yourself) »

Selector ID selalu mengalahkan selector class, dan selector class selalu mengalahkan selector tag elemen.

Selesaikan Topik Ini

Tandai modul selesai untuk mencatat progres akun Anda.

« Sebelumnya Berikutnya »

Hierarki Bobot Kekhususan:

Selesaikan Topik Ini

CSS Tutorial