Perbedaan dan Penggunaan Selector ID dan Class Dalam CSS

Berbicara mengenai css tak lepas dari yang namanya tampilan. Sebelum kita mengaplikasi kode - kode css terhadap blog atau web yang kita gunakan tentunya harus memahami dahulu konsep dasar penggunaan selector. Pada kesempatan kali ini saya akan berbagi sedikit mengenai tata cara penggunaan 2 buah selector yang di dalam CSS yakni ID dan Class selector.

Mungkin bagi yang sudah mahir tidak usah memikirkannya lagi akan hal ini. Tapi tak ada salahnya jika saya share di tempat ini. Dalam penggunaannya barangkali ada diantara kita yang mememui kesulitan atau kendala dalam membedakan kapan menggunakan kedua selector tersebut, maka dari itu mari kita sama - sama belajar. Dimulai dari :

1. Format Penulisan dan Cara Pemanggilan.

ID Selector diawali dengan simbol # (pagar) dan pemanggilan di HTML menggunakan format id sedangkan,  
Class Selector  diawali dengan simbol . (titik) dan pemanggilan di HTML menggunakan format class.

Contoh :
  • ID Selector
Kode CSS :
#cobaID{
   color: #fff;

 }   
Pemanggilan Fungsi  :
<div id="cobaID">
     ISI TEKS ANDA
</div>
  • Class Selector.
Kode CSS :
.cobaClass{
   color: #fff;
 } 
Pemanggilan Fungsi :
<div class="cobaClass">
   ISI TEKS ANDA
</div>


2. Format atau setting Property dan Hasil Tampilannya.


Untuk Selector ID dan Class, format penulisan property sama yakni diawali dengan yang terdapat di dalam tanda {....} rumusnya {namaproperty:value;} contoh hasil tampilannya langsung dilihat pada output nomor 3 berikut.

3. Banyaknya Pemanggilan dalam Tag HTML.

  • ID Selector pemanggilan hanya bisa digunakan satu kali saja untuk satu Tag HTML. Dikarenakan bersifat unik.
  • Class Selector pemanggilan bisa digunakan lebih dari satu kali di dalam Tag HTML nya. Keuntungan menggunakan Class selector ini adalah kita tidak perlu membuat banyak properti Style yang sama berulang-ulang dalam CSS
Contoh :
  • ID Selector
Kode CSS :
#cobaID{
   color: #fff;
   font-weight: bold;
   text-align: center;
   width: 25%;
   height: 50%;
   background-color: #ffa500;
   padding: 10px;
 } 
Pemanggilan Fungsi :
<div id="cobaID">
     ISI TEKS ANDA
</div>
Output :

ISI TEKS ANDA
  • Class Selector
Kode CSS
.cobaClass{
   color: #fff;
   font-weight: bold;
   text-align: center;
   width: 25%;
   height: 50%;
   background-color: #ffa500;
   padding: 10px;
 }
.cobaClass2{ 
   border: 2px solid #ffffff;
}
Pemanggilan Fungsi :

<div class="cobaClass cobaClass2">
     ISI TEKS ANDA
</div>
Output :

ISI TEKS ANDA


Sekian sedikit ilmu yang bisa saya share. Semoga apa yang saya share pada kesempatan kali ini dapat memberi manfaat bagi rekan semua. Sehingga kita tidak kesulitan kembali untuk menggunakan kode - kode css tersebut dalam memperindah tampilan blog atau web kita :)

23 comments

ternyata mudah ya sob rumus dan pengertian selector CSS, jadi makin tau saya, makasih sob atas infonya

Kalo di urai seperti ini belajarnya jadi semakin mudah,,,
Terimakasih sob sudah berbagi :)

Sama - sama mas, semoga dapat dipahami :)

Iya mas, yang saya share kebetulan dasarnya saja. Pastinya mas Arie sudah diluar kepala :)

ternyata mudah juga yaa ;) heheee nuhun kang

Saya pelajari dulu Mas.. Maklum kalo sudah tua, susah nempelnya :)

dapat pengetahuan baru tentang CSS nih..
terimakasih informasinya

saya baru paham , ternyata class bisa dipake lebih dari satu yah :)

sering lihat saya mas kode class class seperti itu waktu edit-edit template, ternyata nama nya selector id ya. Wah tambah ilmu baru nich. Thanks mas adit atas share nya ya :)

Wah bermanfaat sekali mas,jadi nambah ilmu.

Sama - sama mbak dan pastinya buat sampean sudah di luar kepala pastinya :)

Alon - alon waton kelakon pelan - pelan yang penting tercapai mas :)

Kadang bisa dibilang lebih efisien mas, karena 1 buah property untuk class selector bisa digunakan lebih dari 1 fungsi pemanggilan.

jadi tau saya mengenai dasar dasarnya membuat kode terimakaasih gan

terima kasih infonya mas, sangat bermanfaat :D

wah terima kasih infonya mas ... emank yang saya butuhin dasarnya

Artikel nya bagus..
Tapi saya minta tolong cabut favicon nya ya mas, soalnya blog ini menggunakan fav icon yang saya buat sendiri..

Mohon untuk selalu menghargai karya orang lain ya :)

Terimakasih

Wah sangat membantu saya dalam memahami kode CSS. Maklum, saya membuat dan memahami blog dengan otodidak.

sangat membantu gan artikelnya .. terimakasih :D

Trims mas buat artikelnya
mudah banget buat dicerna :)

Bagaimana Pendapat Anda?

Diberdayakan oleh Blogger.