Selektor merupakan deklarasi urutan nama tag, ID, atau Class yang digunakan untuk menunjuk satu elemen atau lebih. Selektor pada CSS bisa lebih dari satu (Multipel Selektor).
Atau kamu bisa mengaksesnya dari nama classnya, karena tag h1 dan h2 pada contoh di atas memiliki nama class yang sama:
Mengubah warna huruf yang dicetak tebal pada paragraf utama:
Mengakses elemen yang memiliki class judul yang terletak di dalam elemen h1.
h1.judul (tanpa spasi) berarti:
Mengakses elemen h1 yang mempunyai class judul.
Contoh Dokumen HTML
<!doctype html>
<html>
<head>
<title>Belajar Selektor CSS</title>
<style type="text/css">
/* Tuliskan style CSS di dalam tag style ini */
</style>
</head>
<body>
<h1 class="judul">Belajar CSS</h1>
<p id="awal" class="utama">Selektor CSS sangat dinamis, oleh karena itu <b>kamu harus belajar</b> dengan tekun</p>
<p>Walaupun sulit tapi mengasikan, kamu bisa buat sesuai keinginan kamu</p>
<h2 class="judul">Sub Judul</h2>
<p class="utama sub_utama">paragraf contoh kedua, <b>ini dicetak tebal</b></p>
<p>Pragraf kedua dari sub utama</p>
<h2>Sub judul tanpa class</h2>
<p>Paragraf tanpa class</p>
</body>
</html>
<html>
<head>
<title>Belajar Selektor CSS</title>
<style type="text/css">
/* Tuliskan style CSS di dalam tag style ini */
</style>
</head>
<body>
<h1 class="judul">Belajar CSS</h1>
<p id="awal" class="utama">Selektor CSS sangat dinamis, oleh karena itu <b>kamu harus belajar</b> dengan tekun</p>
<p>Walaupun sulit tapi mengasikan, kamu bisa buat sesuai keinginan kamu</p>
<h2 class="judul">Sub Judul</h2>
<p class="utama sub_utama">paragraf contoh kedua, <b>ini dicetak tebal</b></p>
<p>Pragraf kedua dari sub utama</p>
<h2>Sub judul tanpa class</h2>
<p>Paragraf tanpa class</p>
</body>
</html>
|
Untuk mencobanya edit contoh dokumen HTML di atas, lalu tuliskan style CSS yang ada di bawah ini ke dalam contoh dokumen di atas, kemudian lihat hasilnya.
Mengubah Warna semua Heading h1 dan h2:h1,h2 { color: red; }
Mengubah warna heding pertama dan keduaAtau kamu bisa mengaksesnya dari nama classnya, karena tag h1 dan h2 pada contoh di atas memiliki nama class yang sama:
.judul { color: red; }
Atau dengan cara seperti ini:h1.judul, h2.judul { color: red; }
Mengubah warna judul dan huruf yang di cetak tebal:.judul, b { color: red; }
Selektor di atas merupakan multipel selektor karena mengakses dua target.Mengubah warna huruf yang dicetak tebal pada paragraf utama:
.utama b { color: red; }
Atau (selektor lengkap)p#awal.utama b { color: red; }
Mengubah semua warna teks di dalam bodybody { color: red; }
Atau dengan menggunakan tanda bintang * untuk menunjuk semua elemen di bawah tag body:body * { color: red; }
Selektor Event Mouse :hover
Selektor ini digunakan untuk mengubah tampilan elemen saat kursor berada di atas elemen tersebutp:hover { color: red; }
Selektor Status Tautan (Link) :visited
Selektor ini digunakan untuk sebuah eleman Anchor <a> yang berisi tautan yang sudah pernah dikunjungia:visited { color: green; }
Karakter Spasi Pada Selektor CSS
h1 .judul (dengan spasi) berarti:Mengakses elemen yang memiliki class judul yang terletak di dalam elemen h1.
h1.judul (tanpa spasi) berarti:
Mengakses elemen h1 yang mempunyai class judul.
Ingat:
Penulisan selektor
Penulisan selektor
h1 .judul (dengan spasi) dan h1.judul (tanpa spasi) itu berbeda!
0 Response to "Belajar Selektor CSS"
Post a Comment