CSS class Selector

CSS Fadlullah Fadul December 3, 2018

.class Selector digunakan untuk menyeleksi element berdasarkan nama class atau nilai (value) dari attribute class yang sama pada html element yang sebelumnya telah ditentukan.

Penulisan Class Selector diawali dengan tanda titik (.) atau period, kemudian diikuti dengan nama class. Kita bisa menentukan sendiri nama class apa saja yang kita inginkan, asalkan mengikuti aturan berikut:

  • Nama Class hanya bisa ditulis dengan letters (abjad [A-Z, a-z]), numbers (angka), hyphens (tanda penghubung), dan underscores (tanda garis bawah).
  • Setelah titik (.) nama class harus diawali dengan letters (huruf alphabet) pada awal karakter. contoh: .wali9 adalah benar, tetapi, .9wali adalah salah.
  • Nama Class adalah case-sensitive. Artinya perbedaan huruf besar dengan huruf kecil akan berpengaruh. contoh: .content berbeda dengan .Content karena pebedaan huruf besar C pada awal karakter.

Class Selector biasanya digunakan untuk memberikan style pada element berdasarkan group tertentu. Satu nama class bisa disisipkan pada beberapa element agar memiliki style yang sama. Jadi, bisa digunakan lebih dari satu deklarasi. Ini, jelas berbeda dengan ID Selector yang hanya bisa digunakan sekali dalam satu halaman.

Syntax
Penggunaan Sintaksis CSS class 

.namaClass {
Property: Value;  /* Deklarasi CSS */
}

Example
Contoh CSS class

Di dalam HTML tag, kita menuliskan class, kemudian tanda sama dengan (=) dan diikuti nama class yang kita inginkan yang diapit dengan tanda petik (""). Contoh pada html tag: <header>

HTML 
<header class="main-header">
Belajar Web Design
</header>

Kemudian didalam CSS, kita mendeklarasikannya dengan tanda titik (.) kemudian diikuti dengan nama class yang telah disebutkan pada HTML element tersebut.

CSS 
.main-header {
font-family: Georgia, serif;
}

Contoh lainnya yang lebih jelas dapat dilihat pada demo editor dibawah ini:

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
editor 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo CSS class Selector - apacara.com</title>
    <style>
      .teks-hijau {color: green}
      .teks-merah {color: red}
    </style>
  </head>
  <body>
    <p>Paragraf ini tidak memiliki <em>Class</em></p>
    <p class="teks-hijau">Paragraf ini memiliki Class <em>teks-hijau</em></p>
    <p class="teks-merah">Paragraf ini memiliki Class <em>teks-merah</em></p>
  </body>
</html>
TIPS

Untuk pembahasan selanjutnya, gunakan Code Editor diatas untuk uji coba dengan cara copy-paste kedalam editor tersebut, ataupun mengetiknya secara manual.

Multipple Class
Class lebih dari satu nilai (value)

Class Attribute juga bisa memiliki value (nilai) lebih dari satu value yang ditulis dengan jarak (spasi) antara satu value dengan value lainnya, contohnya;

HTML 
<p class="box hijau">
Paragraf dengan kotak berwarna hijau
</p>

Kode diatas memiliki dua nama class, yaitu box dan hijau, sehingga dalam css masing-masing bisa ditulis dengan style terpisah, contoh:

CSS 
/* style untuk box */
.box {
border: 1px solid #ccc;
padding: 1em;
}

/* style untuk hijau */
.hijau {
background-color: lightgreen;
}
SHARE
Previous Article Next Article