Memahami Cascading dan Specificity

by

Cascading pada CSS adalah, multiple rule dapat di apply pada satu element. Sementara specificity adalah cara CSS menyelesaikan conflict dari multiple rule tersebut dengan menggunakan urutan prioritas.

Berikut urutan prioritas selector:

  • inline style
  • #id selector
  • .class, :pseudo-class dan [attribute]
  • <Tag> dan ::pseudo-element selector

Urutan prioritas dapat dilihat dari chrome developer tools (shortcut Ctrl + Shift + I).

Tag h1 dengan class .section-title menerima 2 rule (cascading), yaitu

.section-title{
    color: teal;
}

h1{
    color: white;
    font-family: 'Roboto', sans-serif;
}

Namun terjadi conflict rule antara h1 color: white dan .section-title color: teal; Karena prioritas class diatas tag selector, maka akan digunakan warna teal.

Memahami cascading dan prioritas selector sangat penting karena dapat mencegah kebingungan dikemudian dikemudian hari.

Contoh kasus diatas masih menggunakan file index.html dan style.css dari modul sebelumnya, yaitu seperti berikut.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SkillPlus - Tutorial Tekno</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">    
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main>
        <section id="product-title">
            <h1 id="plans">Tutorial Teknologi Informatika di SkillPlus</h1>
        </section>
        <section>
            <h1 class="section-title">Pilih paket langganan</h1>
        </section>        
    </main>
</body>
</html>
#product-title{
    background-color: red;
}

.section-title{
    color: teal;
}

h1{
    color: white;
    font-family: 'Roboto', sans-serif;
}
Sharing is caring:

Leave a Comment