Selektor CSS
Selektor merupakan topik penting yang perlu kita pahami dengan baik saat belajar CSS.
Dengan memahami selektor, kita bisa memberikan gaya CSS ke elemen HTML yang spesifik.
Misalnya, kita tentu tidak ingin gaya teks menu atau tombol digunakan oleh paragraf di artikel.
Untuk melakukan hal tersebut kita membutuhkan selektor agar gaya CSS yang kita buat hanya diterapkan ke elemen HTML yang spesifik.
Sebetulnya ada banyak jenis selektor yang bisa kita gunakan, untuk saat ini mari pelajari selektor dasar yang umum digunakan.
Berikut 5 macam selektor CSS:
1. Selektor Universal
Selektor universal (*) berfungsi untuk memilih semua elemen HTML, ini biasanya digunakan untuk me-reset atau menghapus gaya CSS default yang diberikan oleh browser.
Perlu diketahui, sebagian besar elemen HTML diberi gaya default oleh browser.
Agar kita bisa menulis CSS yang konsisten, gaya yang diberikan oleh browser biasanya ditimpa.
Misalnya, browser secara otomatis memberikan margin dan padding ke hampir semua elemen HTML.
Agar elemen-elemen tersebut tidak memiliki margin dan padding kita bisa menimpanya menggunakan selektor universal.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
</style>
<body>
<h1>Belajar CSS</h1>
<p>Saya sedang belajar CSS di Kodealgo.</p>
</body>
</html>
Hasil:
Kode CSS di atas berarti kita meminta browser menerapkan properti CSS margin dan padding dengan nilai 0 ke semua elemen HTML.
Apakah nanti margin dan padding bisa kita ubah? tentu saja, kita bisa mengubahnya dengan nilai yang berbeda untuk elemen yang spesifik.
2. Selektor Tag
Selektor tag atau type selector berfungsi untuk menyeleksi elemen berdasarkan tag.
Contoh berikut menerapkan ukuran huruf 20px dan warna teks hijau ke semua elemen HTML dengan tag <p>:
<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS</title>
</head>
<style>
p {
font-size: 20px;
color: green;
}
</style>
<body>
<h1>Belajar CSS</h1>
<p>Saya sedang belajar CSS di Kodealgo.</p>
<p>
Kodealgo memiliki ratusan artikel belajar web developer termasuk HTML,CSS,
dan JavaScript.
</p>
</body>
</html>
Hasil:
3. Selektor Class
Selektor class berfungsi untuk menyeleksi elemen HTML berdasarkan class. Selektor ditulis dengan tanda titik diikuti nama kelas (.namaKelas).
Contoh berikut akan menerapkan warna teks hijau ke semua elemen HTML yang memiliki kelas red:
<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS</title>
</head>
<style>
.red {
color: red;
}
</style>
<body>
<h1 class="red">Belajar CSS</h1>
<p>Saya sedang belajar CSS di Kodealgo.</p>
<p class="red">
Kodealgo memiliki ratusan artikel belajar web developer termasuk HTML,
CSS, dan JavaScript.
</p>
</body>
</html>
Hasil:
4. Selektor Id
Selektor id berfungsi untuk menyeleksi elemen HTML berdasarkan id.
Umumnya, dalam satu halaman HTML tidak boleh ada elemen yang menggunakan id sama, ini bukan kewajiban tapi kebiasaan, tapi kita disarankan mengikutinya.
Karena kita direkomendasikan untuk tidak menggunakan id yang sama di lebih dari satu elemen HTML, tentunya CSS yang kita buat dengan selektor ini hanya akan mempengaruhi satu elemen yang hanya menggunakan id tertentu saja.
Tapi, jika ada lebih dari satu elemen yang menggunakan id yang sama, maka elemen tersebut juga akan terpengaruh, sama seperti class.
Selektor id ditulis dengan tanda pagar diikuti nama id (#id).
Contoh berikut menerapkan warna latar belakang, padding, dan warna teks ke elemen HTML yang menggunakan id article.
<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS</title>
</head>
<style>
#article {
background-color: darkolivegreen;
padding: 10px;
color: white;
}
</style>
<body>
<div id="article">
<h1>Belajar CSS</h1>
<p>
Kodealgo memiliki ratusan artikel belajar web developer termasuk HTML,
CSS, dan JavaScript.
</p>
</div>
<div id="footer">
<p>hello world</p>
</div>
</body>
</html>
Hasil:
5. Selektor Atribut
Selektor atribut berfungsi untuk menyeleksi elemen HTML berdasarkan atribut.
Metode ini biasanya digunakan ketika kita ingin menerapkan CSS ke elemen yang tidak dimungkinkan untuk diseleksi menggunakan selektor yang sudah kita bahas sebelumnya.
Selektor atribut ditulis dengan nama tag, diikuti nama atribut dan nilainya dibungkus dengan kurung siku (tag[atribut='nilai']).
Contoh berikut menerapkan CSS ke elemen dengan tag <input> yang memiliki atribut type dengan nilai email:
<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS</title>
</head>
<style>
input[type='email'] {
border-radius: 5px;
border: 2px solid green;
padding: 10px;
}
</style>
<body>
<input type="text" placeholder="reza" />
<input type="email" placeholder="reza@kodealgo.com" />
</body>
</html>
Hasil:
