Some text some message..
Some text some message..
Some text some message..
Some text some message..
  • Beranda
  • »
  • CSS
  • »
  • Selektor CSS Menggunakan Selektor CLASS Elemen HTML

Selektor CSS Menggunakan Selektor CLASS Elemen HTML

previous Previous Page

Selektor Class pada CSS merupakan metode penyeleksian suatu elemen HTML yang didasarkan pada Class yang disematkan pada elemen tersebut. Di dalam sebuah halaman HTML, Class dengan nama yang sama dapat digunakan oleh beberapa elemen HTML sekaligus. Pemberian nama Class ini digunakan untuk mengelompokkan beberapa buah elemen HTML tertentu yang memiliki suatu kesamaan seperti dalam kesamaan bentuk pengaturan gaya atau lainnya.

Penulisan selektor Class pada CSS dituliskan dengan menuliskan tanda titik "." kemudian nama Class yang diikuti dengan deklarasi gaya pengaturan pada CSS berupa property dan nilainya.

CSS

1
.CLASS_elemen_HTML{property1:value1; property2:value2;}
selektor

Berikut contoh halaman HTML dengan menggunakan selektor CLASS.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<style>
   .header{color:blue;}
   .ungu{color:purple;}
   .tebal{font-weight:bold;}
   .hijau{color:green;}
</style>
<title>Belajar Style Sheet Pada CSS</title>
</head>
<body>
   <h1 class="header">Belajar Style Sheet Pada CSS</h1>
   <div class="ungu">Ini adalah bagian konten dari elemen div</div>
   <p class="ungu tebal">Ini adalah bagian konten dari elemen paragraf pertama</p>
   <p class="hijau">Ini adalah bagian konten dari elemen paragraf kedua</p>
</body>
</html>
selector class pada css

Selektor CLASS Turunan

Pada elemen HTML yang memiliki elemen lain di dalamnya, dapat menerapkan tekhnik selektor yang bersifat turunan. Pada elemen HTML yang mempunyi CLASS tertentu dan menginduk pada elemen lain dengan CLASS tertentu, dituliskan dengan nama CLASS induk lalu nama CLASS anakan. Gaya yang ditetapkan akan berlaku, jika CLASS anakan masih mempunyai hubungan relasional dengan elemen induknya.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<style>
   .header{color:blue;}
   .ungu{color:purple;}
   .ungu .pertama{color:navy;font-weight:bold;}
   .ungu .kedua{color:magenta;text-decoration:underline;}
</style>
<title>Belajar Style Sheet Pada CSS</title>
</head>
<body>
   <h1 class="header">Belajar Style Sheet Pada CSS</h1>
   <div class="ungu">Ini adalah bagian konten dari elemen div
     <p class="pertama">Ini adalah bagian konten dari elemen paragraf pertama</p>
     <p class="kedua">Ini adalah bagian konten dari elemen paragraf kedua</p>
   </div>
</body>
</html>
selector class pada css

noteCatatan : Penamaan Class pada elemen HTML harus menggunakan karakter huruf(a-zA-Z), angka(0-9), tanda baca "$". Penamaannya juga tidak boleh diawali dengan angka. Class pada CSS didefinisikan dengan tanda baca titik ".".

facebooktwitterwhatapplinkedinpinterest

previous Previous Page

Tutorial CSS

News Letters

Silahkan masukkan email Anda untuk berlangganan informasi kami