Memahami Universal Selector dan Element Selector Pada CSS

Selector merupakan salah satu bagian terpenting didalam memahami element pada CSS, dengan kita mengetahui kapan selector digunakan maka desain web akan menjadi lebih efektif.

Pengertian selector telah kita bahas sebelumnya, pada dasarnya selector adalah pola yang digunakan untuk mencari elemen.
Selector pada CSS berangam mulai dari element selector, class selector, dan yang lebih spesifik lagi pseudo element selector.

1. Universal Selector
Selector ini adalah yang sederhana tetapi powerful dimana menggunakan karaktter bintang (*)
Contoh :

<!DOCTYPE html>
<html>
<title>Belajar CSS</title>
<style>
* {
	color: blue;
}
	div {
	color: green;
}
</style>
<body>

<h2>Belajar CSS</h2>
<p>Belajar Element Selector Pada CSS </p>
<div>
<h2> Belajar CSS bagian 2</h2>
<p> Belajar Element selector CSS dalam tag div</p>
</div>
</body>
</html>

Disini kita lihat bahwa dengan menggunakan Universal selector maka akan mengubah seluruh warna menjadi biru, kemudian untuk tag div juga walaupun sudah kita beri kode warna hijau tetapi akan mengikuti universal selector menjadi biru.

2. Element Selector
Elemen Selector adalah selector CSS untuk mencari semua tag HTML pada bagian – bagian tertentu.
Contoh :

<!DOCTYPE html>
<html>
<title>Belajar CSS</title>
<style>

h2 {
	color: green;
}

p {
	color: red;
}

</style>
<body>

<h2>Belajar CSS itu menyenangkan</h2>
<p>Belajar Element Selector Pada CSS </p>
<div>
<h2> Belajar CSS bagian 2</h2>
<p> Belajar Element selector CSS dalam tag div</p>
</div>
</body>
</html>

Pada contoh diatas saya menggunakan dua tag yakni ( h2 ) dan ( p ) dimana tag HTML dengan h2 akan berubah menjadi warna hijau dan tag p menjadi warna hijau.

OK sampai disini apakah anda bisa mengikuti? saya yakin pasti bisa, jangan lupa setiap mempelajari program, ada tips yakni ketik langsung kode program dari tutorial ini, lama kelamaan anda akan bisa lebih cepat didalam memahami, karena tidak hanya membaca tetapi langsung mempraktekanya.

Ikuti terus blog ini ya sahabat ikuti terus postingan berikutnya tentang elemen CSS karena masih banyak yang akan kita pelajari tentang elemen pada CSS tidak hanya dua elemen yang telah kita bahas diatas. Salam sukses penuh keberkahan.

Leave a Reply

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