Tutorial Belajar CSS Part 2 -Seleksi yang Tepat: Memahami Selektor dalam CSS

Rama.

June 3, 2025

Tutorial Belajar CSS Part 2: Seleksi yang Tepat — Memahami Selektor
dalam CSS

Memahami selektor CSS adalah kunci dalam menargetkan dan mengubah
gaya elemen HTML. Selektor memungkinkan kita untuk menentukan elemen
mana yang akan diberi gaya.

Selektor Dasar CSS

Selektor Elemen

Selektor elemen memilih elemen spesifik di halaman web.

p {
color: blue;
}

Selektor Kelas

Selektor kelas memilih elemen berdasarkan kelas tertentu.

.namaKelas {
    font-size: 18px;
}

Selektor ID

Selektor ID memilih elemen berdasarkan ID unik.

#idUnik {
background-color: #f2f2f2;
}

Selektor Lanjutan CSS

Selektor Anak (Descendant Selector)

Selektor anak memilih elemen yang merupakan anak dari elemen lain.

div p {
font-weight: bold;
}

Selektor Elemen Langsung (Child Selector)

Selektor elemen langsung memilih elemen yang menjadi anak langsung dari elemen lain.

ul > li {
list-style-type: square;
}

Selektor Kelas Elemen (Class Selector)

Selektor kelas elemen memilih elemen yang memiliki kelas tertentu di dalam elemen lain.

.container .namaKelas {
border: 1px solid #999;
}

Selektor Pseudoelemen

Pseudoelemen :hover

Digunakan untuk memberikan gaya pada elemen saat mouse berada di
atasnya.

a:hover {
    text-decoration: underline;
}

Kombinasi Selektor

Anda dapat menggabungkan beberapa selektor untuk menargetkan elemen
yang sangat spesifik.

header nav ul li a {
color: blue;
}

Selektor dan Keutamaan (Specificity)

Setiap selektor memiliki tingkat keutamaan. Semakin spesifik suatu selektor,
semakin tinggi keutamaannya.

kesimpulan

Memahami berbagai macam selektor dalam CSS memungkinkan Anda untuk mengatur tata letak dan tampilan elemen HTML secara tepat. Dengan menguasai selektor, Anda dapat menentukan elemen mana yang ingin diubah gayanya dan memperoleh kontrol yang lebih besar dalam desain halaman web Anda.

Rama.