Selector Class dan Id CSS

July 21, 2018
Kita akan membahas bagaimana mengelompokan style yang sama.
Untuk lebih jelasnya kita lihat sintak berikut ini
.namaKelas { 
 properti1 : value1; 
 properti2 : value2; 
 . 
 . 
 }

Contoh
<!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"> 
.inputText { 
 color: #FFFFFF; 
 font-family: arial; 
 background: #FF0000; /* membuat background merah */ 
 font-weight: bold; /* membuat text bold */ 
 } 
</style> 
</head> 
<body> 
<form name="form1"> 
Nama Anda <br /> 
<input type="text" name="alamat" class="inputText" /><br /><br /> 
Alamat Anda <br /> 
<textarea class="inputText"></textarea><br /><br /> 
<input type="submit" name="submit" value="Submit" /> 
</form> 
</body> 
</html>
Hasilnya sebagai berikut

CSS juga dapat digunakan untuk mengatur tampilan elemen dengan id tertentu. Berikut ini adalah contohnya:
<!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: #FFFFFF; /* membuat warna text putih */ 
 font-family: arial; 
 background: #FF0000; /* membuat background merah */ 
 font-weight: bold; 
 } 
p.group { 
 color: #FF0000; /* membuat warna text putih */ 
 font-family: arial; 
 background: #FFFFFF; /* membuat background putih */ 
 } 
 
p#one { 
 color: blue; 
 font-family: "times new roman"; 
 } 
</style>
</head> 
<body> 
<p>Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. 
Ini adalah paragraf 1. Ini adalah paragraf 1. </p> 
<p class="group">Ini adalah paragraf 2. Ini adalah paragraf 2. Ini 
adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. </p> 
<p class="group" id="one">Ini adalah paragraf 3. Ini adalah paragraf 3. 
Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. 
</p> 
</body> 
</html>
Perhatikan hasilnya berikut

Pada tampilan di atas, tampak bahwa perintah
p { 
 . 
 . 
 . 
 }

dgunakan untuk mengatur style pada elemen <p>. Sedangkan perintah
p.group { 
 . 
 . 
 . 
 }

digunakan untuk mengatur style hanya pada <p> yang memiliki class bernama group dan
perintah
p#one { 
 . 
 . 
 . 
 }

berfungsi untuk mengatur style pada <p> yang memiliki id bernama one. Meskipun pada contoh ini, terdapat elemen <p class="group" id="one">, namun style pada elemen ini mengikuti p#one, bukannya p.group karena nama id lebih diprioritaskan daripada class.

Lantas bagaimana dengan tampilan dengan style berikut ini
<style type="text/css">
p {
 color: black;
 }
p.group {
 color: red;
 }

.group {
 color: blue;
 }
#group {
 color: green;
 }


</style>

yang diterapkan pada tag berikut?

<p>Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. 

Ini adalah paragraf 1. Ini adalah paragraf 1. </p>

<p class="group">Ini adalah paragraf 2. Ini adalah paragraf 2. Ini 

adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. </p>

<div class="group">Ini adalah paragraf 3. Ini adalah paragraf 3. Ini 

adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. </div> 

<div id="group">Ini adalah paragraf 4. Ini adalah paragraf 4. Ini 

adalah paragraf 4. Ini adalah paragraf 4. Ini adalah paragraf 4. </div>

Apabila Anda dapat menjawab pertanyaan di atas, maka Anda sudah menguasai dasar-dasar CSS awal ini khususnya pada masalah selector.
Menurut analisis saya, untuk paragraf pertama akan memiliki warna hitam, paragraf ke dua berwarna merah, paragraf ke tiga akan berwarna biru dan paragraf ke empat akan berwarna hijau. Mari kita lihat hasil tampilannya

Berikut ini penjelasannya
Style berikut akan diterapkan pada elemen <p>
p { 
 color: black; 
 } 

Sedangkan style berikut hanya akan diterapkan pada elemen <p> yang memiliki class bernama group.
p.group { 
 color: red; 
 } 

Selanjutnya untuk style berikut ini akan diterapkan pada elemen yang memiliki class bernama group.
.group { 
 color: blue; 
 } 

Perhatikan tampilan gambar di atas, bahwa untuk <p class="group"> tidak akan terpengaruh karena elemen tersebut sudah memiliki style sendiri yaitu p.group. Apabila style p.group tidak ada, maka elemen <p class="group"> akan terpengaruh style .group (text akan menjadi merah) Suatu style juga dapat ditulis sebagai berikut
#group { 
 color: green; 
 } 

Style tersebut hanya akan mengatur tampilan pada elemen yang memiliki id bernama group.
Untuk melihat artikel/materi lainnya silahkan masuk di sini

Wickey

Author:

Facebook Comment

Inside Post