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).
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>
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 kedua
Atau 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 body
body {
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 tersebut
p:hover
{ color: red; }
Selektor Status Tautan (Link) :visited
Selektor ini digunakan
untuk sebuah eleman Anchor <a> yang berisi tautan yang sudah pernah
dikunjungi
a: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 h1 .judul (dengan spasi) dan h1.judul (tanpa spasi) itu berbeda!
Halaman 4
Artikel Terkait:
Tidak ada komentar:
Posting Komentar
Silahkan isi komentar Anda pada kolom komentar di bawah ini atau dengan kolom komentar Facebook pada bagian atas ini.
Berkomentarlah dengan sehat! Dilarang membuat komentar dengan isi yang mengandung spam, sara, pornografi, politik, iklan, dan diluar norma yang berlaku. Thanks.