Selector CSS

July 21, 2018
Sebelumnya kita telah mengenal tentang penulisan CSS, selanjutnya kita akan membahas lebih lanjut tentang pembahasan kita sebelumnya.

Dalam CSS, terdapat cascade yang merupakan metode untuk mengatur style supaya tidak terjadi konflik. Untuk lebih jelasnya perhatikan contoh berikut ini.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS Guide</title> 
<style type="text/css"> 
p { 
 color: red; 
 } 
em { 
 color: green; 
 } 
</style> 
</head> 
<body> 
<h1>Ini adalah heading 1</h1> 
<p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini 
adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah 
paragraf. Ini adalah paragraf. <em>Ini adalah huruf dicetak 
miring</em>. Ini adalah paragraf. Ini adalah paragraf. Ini adalah 
paragraf. Ini adalah paragraf. </p> 
<h1><em>Ini adalah heading 1</em></h1> 
<p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini 
adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah 
paragraf. Ini adalah paragraf. <em>Ini adalah huruf dicetak 
miring</em>. Ini adalah paragraf. Ini adalah paragraf. Ini adalah 
paragraf. Ini adalah paragraf. </p> 
</body> 
</html>

Pada code di atas terdapat style untuk mengatur tampilan elemen paragraf (<p>) dan untuk emphasize atau <em> (cetak miring seperti halnya italic).

Perhatikan apa yang terjadi dengan tampilannya di browser

Dengan Anda mendeklarasikan style warna hijau untuk elemen <em>, maka style tersebut akan berlaku untuk setiap elemen tersebut (termasuk pada bagian heading).
Tentu saja hal ini membuat tampilan halaman web tidak bagus, karena style heading menjadi tidak konsisten (terdapat heading yang berwarna hijau). Lantas.. bagaimana cara mengatur style supaya warna hijau hanya berlaku untuk emphasize yang terletak di dalam paragraf saja? Untuk itu Anda harus mengubah deklarasi stylenya menjadi seperti berikut
<style type="text/css"> 
p { 
 color: red; 
 }
p em { 
 color: green; 
 } 
</style>
Maksud dari code yang bercetak merah tersebut adalah bahwa style warna hijau diterapkan pada elemen emphasize <em> yang berada di dalam elemen paragraf <p>.
Hasil tampilan setelah menggunakan style yang telah dimodifikasi tersebut adalah:

Setelah ini kita akan membahas tentang Selector dengan Class dan nama Id.
Untuk melihat artikel/materi lainnya silahkan masuk di sini

Wickey

Author:

Facebook Comment

Inside Post