Belajar Selektor CSS: Jenis, Kombinasi, dan Contohnya
artikel berikut memuat Belajar Selektor CSS: Jenis, Kombinasi, dan Contohnya
Pengertian CSS
CSS (Cascading Style Sheets) adalah bahasa pemrograman yang digunakan untuk menentukan tampilan halaman web. Salah satu konsep dasar dalam CSS adalah selektor, yang digunakan untuk memilih elemen HTML tertentu yang akan diberi style. Dalam artikel ini, kita akan membahas apa itu selektor CSS, macam-macam selektor CSS, serta kombinasi selektor CSS beserta contohnya.Pengertian Selektor CSS
Apa itu Selektor CSS? Selektor CSS adalah suatu cara untuk memilih elemen HTML yang akan diberi style dalam CSS. Setiap selektor CSS menentukan satu atau lebih elemen HTML yang akan diatur tampilannya. Sebagai contoh, jika Anda ingin memberikan style pada semua paragraf di halaman web, Anda dapat menggunakan selektor CSS berupa “p”, yang akan memilih semua elemen HTML <p>.Macam-macam Selektor CSS
Berikut adalah beberapa macam selektor CSS yang sering digunakan:1. Selektor Elemen
Selektor Elemen adalah selektor paling dasar dalam CSS, dan digunakan untuk
memilih elemen HTML berdasarkan namanya. Sebagai contoh, jika Anda ingin
memberikan style pada semua elemen HTML <p> dalam halaman web, Anda
dapat menggunakan selektor CSS berupa “p”.
2. Selektor Kelas
Selektor Kelas digunakan untuk memilih elemen HTML berdasarkan class-nya.
Dalam HTML, class didefinisikan dengan atribut “class”. Sebagai contoh, jika
Anda ingin memberikan style pada semua elemen HTML yang memiliki class
“teks-merah”, Anda dapat menggunakan selektor CSS berupa “.teks-merah”.
3. Selektor ID
Selektor ID digunakan untuk memilih elemen HTML berdasarkan id-nya. Dalam
HTML, id didefinisikan dengan atribut “id”. Sebagai contoh, jika Anda ingin
memberikan style pada elemen HTML dengan id “judul-halaman”, Anda dapat
menggunakan selektor CSS berupa “#judul-halaman”.
4. Selektor Anak
Selektor Anak digunakan untuk memilih elemen HTML yang menjadi anak dari
elemen lain. Sebagai contoh, jika Anda ingin memberikan style pada semua
elemen HTML <li> yang menjadi anak dari elemen HTML <ul>, Anda
dapat menggunakan selektor CSS berupa “ul li”.
5. Selektor Pseudo-Class
Selektor Pseudo-Class digunakan untuk memilih elemen HTML berdasarkan
keadaannya. Sebagai contoh, jika Anda ingin memberikan style pada elemen HTML
<a> ketika cursor diarahkan ke atasnya, Anda dapat menggunakan selektor
CSS berupa “a:hover”.
Kombinasi Selektor CSS
Anda juga dapat mengombinasikan selektor CSS untuk memilih elemen HTML dengan
lebih spesifik. Berikut adalah beberapa kombinasi selektor CSS yang sering
digunakan:
1. Kombinasi Selektor Kelas dan Elemen
Anda dapat mengombinasikan selektor kelas dan selektor elemen untuk memilih
elemen HTML dengan class tertentu. Sebagai contoh, jika Anda ingin memberikan
style pada semua elemen HTML <p> yang memiliki class “teks-merah”, Anda
dapat menggunakan selektor CSS berupa “p.teks-merah”.
2. Kombinasi Selektor Anak dan Elemen
Anda juga dapat mengombinasikan selektor anak dan selektor elemen untuk
memilih elemen HTML yang menjadi anak dari elemen tertentu. Sebagai
contoh,jika Anda ingin memberikan style pada semua elemen HTML <a> yang
berada di dalam elemen HTML <nav>, Anda dapat menggunakan selektor CSS
berupa “nav a”.
3. Kombinasi Selektor ID dan Elemen
Anda juga dapat mengombinasikan selektor ID dan selektor elemen untuk memilih
elemen HTML dengan ID tertentu. Sebagai contoh, jika Anda ingin memberikan
style pada elemen HTML <header> yang memiliki id “atas-halaman”, Anda
dapat menggunakan selektor CSS berupa “#atas-halaman header”.
4. Kombinasi Selektor Anak dan Kelas
Anda dapat mengombinasikan selektor anak dan selektor kelas untuk memilih
elemen HTML yang menjadi anak dari elemen tertentu dan memiliki class
tertentu. Sebagai contoh, jika Anda ingin memberikan style pada semua elemen
HTML <li> yang menjadi anak dari elemen HTML <ul> dengan class
“menu”, Anda dapat menggunakan selektor CSS berupa “ul.menu li”.
5. Kombinasi Selektor Pseudo-Class dan Elemen
Anda juga dapat mengombinasikan selektor pseudo-class dan selektor elemen
untuk memilih elemen HTML dengan keadaan tertentu. Sebagai contoh, jika Anda
ingin memberikan style pada elemen HTML <input> ketika dalam keadaan
focus, Anda dapat menggunakan selektor CSS berupa “input:focus”.
Contoh Penggunaan Selektor CSS
<!DOCTYPE html>
<html>
<head>
<title>Contoh Selektor CSS</title>
<style>
/* Selektor Elemen */
h1 {
color: red;
}
/* Selektor Kelas */
.teks-merah {
color: red;
}
/* Selektor ID */
#judul-halaman {
font-size: 24px;
font-weight: bold;
}
/* Selektor Anak */
nav a {
color: blue;
}
/* Kombinasi Selektor Anak dan Kelas */
ul.menu li {
font-weight: bold;
}
/* Kombinasi Selektor ID dan Elemen */
#atas-halaman header {
background-color: yellow;
}
/* Kombinasi Selektor Pseudo-Class dan Elemen */
input:focus {
border: 2px solid blue;
}
</style>
</head>
<body>
<h1>Contoh Selektor CSS</h1>
<p class="teks-merah">Ini adalah contoh teks berwarna merah menggunakan selektor kelas</p>
<div id="judul-halaman">Ini adalah judul halaman</div>
<nav>
<ul class="menu">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</nav>
<header id="atas-halaman">
<h2>Header halaman</h2>
</header>
<label for="nama">Nama:</label>
<input type="text" id="nama">
</body>
</html>
Output
Penjelasan
- Selektor elemen: Mengubah warna teks pada elemen h1 menjadi merah
- Selektor kelas: Mengubah warna teks pada elemen dengan kelas "teks-merah" menjadi merah
- Selektor ID: Mengubah ukuran font dan tebal pada elemen dengan ID "judul-halaman"
- Selektor anak: Mengubah warna teks pada elemen <a> yang menjadi anak dari elemen <nav>
- Kombinasi selektor anak dan kelas: Mengubah tebal teks pada elemen <li> yang menjadi anak dari elemen <ul> dengan kelas "menu"
- Kombinasi selektor ID dan elemen: Mengubah warna background pada elemen <header> yang memiliki ID "atas-halaman"
- Kombinasi selektor pseudo-class dan elemen: Mengubah border pada elemen <input> ketika dalam keadaan focus.
Kesimpulan
Selektor CSS adalah konsep dasar dalam CSS yang digunakan untuk memilih elemen
HTML yang akan diberi style. Ada beberapa macam selektor CSS yang dapat
digunakan, seperti selektor elemen, selektor kelas, selektor ID, selektor
anak, dan selektor pseudo-class. Anda juga dapat mengombinasikan selektor CSS
untuk memilih elemen HTML dengan lebih spesifik. Dengan memahami selektor CSS
dan kombinasi selektornya, Anda dapat membuat tampilan halaman web yang lebih
menarik dan menyesuaikan dengan kebutuhan Anda.
Gabung dalam percakapan