Belajar Selektor CSS: Jenis, Kombinasi, dan Contohnya

Oleh Indrawati Maret 07, 2023 Posting Komentar

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.

Contoh Aplikasi