Tutorial Belajar CSS Part 2 -Seleksi yang Tepat: Memahami Selektor dalam CSS
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;
}
Selektor Pseudo Class
Pseudokelas :first-child
Digunakan untuk memilih elemen yang menjadi elemen pertama dalam elemen lain.
ul li:first-child {
color: red;
}
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.
