1. Jenis-Jenis Selektor Dasar CSS menawarkan berbagai jenis selektor untuk menargetkan elemen HTML:
Selektor Elemen: Mengacu pada elemen HTML secara langsung.
p {
color: black;
}Selektor Kelas: Menggunakan tanda titik (.) untuk menargetkan elemen dengan atribut class tertentu..
.highlight {
background-color: yellow;
}Selektor ID: Menggunakan tanda pagar (#) untuk menargetkan elemen dengan atribut id tertentu.
#main-header {
font-size: 24px;
}2. Pseudo-Class dan Pseudo-Elements
Pseudo-Class: Menargetkan elemen berdasarkan keadaan tertentu, seperti hover atau elemen pertama dalam grup.
a:hover {
color: red;
}Pseudo-Elements: Menargetkan bagian spesifik dari elemen, seperti huruf pertama.
p::first-letter {
font-size: 2em;
}3. Prioritas dan Spesifisitas CSS Ketika beberapa aturan CSS berlaku pada elemen yang sama, browser menentukan aturan mana yang diterapkan berdasarkan spesifisitas:
- Inline CSS memiliki prioritas tertinggi.
- Selektor ID memiliki spesifisitas lebih tinggi daripada kelas atau elemen.
Urutan Spesifisitas:
- Inline styles (
style=""). - ID selektor (
#id). - Kelas, atribut, dan pseudo-class selektor (
.class,[attribute],:hover). - Selektor elemen dan pseudo-elemen (
p,::before).
4. Contoh Praktis: Menggunakan Selektor HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selektor CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="main-header">Judul Utama</h1>
<p class="highlight">Paragraf penting.</p>
<p>Paragraf biasa.</p>
<a href="#">Tautan</a>
</body>
</html>CSS (style.css):
#main-header {
color: navy;
}
.highlight {
background-color: yellow;
}
p {
font-size: 16px;
}
a:hover {
text-decoration: underline;
}Hasil: Judul utama akan berwarna biru gelap, paragraf dengan kelas highlight akan memiliki latar kuning, dan tautan akan digarisbawahi saat dihover.
Kesimpulan: Pada artikel ini, Anda telah mempelajari berbagai jenis selektor CSS dan bagaimana spesifisitas memengaruhi gaya yang diterapkan. Di artikel berikutnya, kita akan menjelajahi tata letak menggunakan box model dan properti display!
Tinggalkan komentar: