Frontend : CSS Bagian 5 – Macam-macam Selector

Materi ini termasuk materi yang harus teman-teman kuasai ya. Karena materi ini termasuk kedalam Fundamental CSS. Setelah mengetahui selector, property, dan value, teman-teman alangkah baiknya menguasai materi ini. Selector sebelumnya yang kita coba itu menggunakan jenis selector “Type Selector”. Terdapat 4 macam selector. So, daripada panjang lebar langsung aja yuk masuk ke pembahasan…


1. Type Selector

Selector ini menggunakan nama tag HTML. Seperti p, b, i, dan lain-lain. Penerapan Selector ini berlaku untuk tag yang telah dimanipulasi. Contoh : teman-teman memanipulasi tag h4 seperti gambar dibawah ini, jadi warna dari tag h4 berwarna biru dan berlaku untuk semua tag h4.

<!DOCTYPE html>
<html>
<head>
	<title>Frontend : CSS Bagian 5 - Macam-macam Selector</title>
	<style type="text/css">
		h4 {
			color: blue;
		}
	</style>
</head>
<body>
	<h4>Teks ini adalah Type Selector</h4>
</body>
</html>


2. Class Selector

Selector jenis Class menggunakan atribut class pada html untuk menetapkan target tag yang ingin dimanipulasi. Penggunaan class pada kode CSS menggunakan titik(.). Untuk lebih lanjutnya silahkan lihat contoh codingan dibawah ini.

<!DOCTYPE html>
<html>
<head>
	<title>Frontend : CSS Bagian 5 - Macam-macam Selector</title>
	<style type="text/css">
		.ru {
			color: blue;
			font-size: 25px;
		}
	</style>
</head>
<body>
	<p class="ru">Teks ini adalah Class Selector</p>
</body>
</html>


3. Id Selector

Selector jenis Id menggunakan atribut id pada html untuk menetapkan target tag yang ingin dimanipulasi. Penggunaan id pada kode CSS menggunakan tanda pagar(#). Untuk lebih lanjutnya silahkan lihat contoh codingan dibawah ini.

<!DOCTYPE html>
<html>
<head>
	<title>Frontend : CSS Bagian 5 - Macam-macam Selector</title>
	<style type="text/css">
		#ru {
			color: blue;
			font-size: 25px;
		}
	</style>
</head>
<body>
	<p id="ru">Teks ini adalah Id Selector</p>
</body>
</html>


4. Attribute Selector

Selector terakhir ini menetapkan atau memanipulasi dengan cara melalui atribut pada suatu tag HTML. Contoh gambar dibawah kita akan memanipulasi salah satu atribut, yaitu atribut href.

<!DOCTYPE html>
<html>
<head>
	<title>Frontend : CSS Bagian 5 - Macam-macam Selector</title>
	<style type="text/css">
		a[href] {
			color: red;
			font-size: 25px;
			text-decoration: none;
		}
	</style>
</head>
<body>
	<a href="">Teks ini adalah Attribute Selector</a>
</body>
</html>

Secara penggunaan, Class Selector dan Id Selector sama. Perbedaanya terletak di batas manipulasi suatu tag html. Class Selector dapat memanipulasi banyak tag, sedangkan Id Selector hanya dapat memanipulasi satu tag saja…

Leave a Reply

Your email address will not be published. Required fields are marked *