Perbedaan Selector ID dan Class pada HTML dan CSS

Perbedaan Selector ID dan Class pada HTML dan CSS

Setelah lama tidak menulis artikel di blog ini, saya akan membahas tentang perbedaan ID dan Class pada HTML maupun CSS. Namun sebelum mas vroh lanjut, pastikan mas vroh tau dulu tentang HTML atau CSS, saya belum menulis tentang HTML dan CSS, tapi nanti akan saya share juga. Daripada lupa, dipending mulu.

Nah dalam HTML, ada yang namanya selector. Ada yang sudah default, yaitu bawaan dari si empu pembuat & pengembangnya. Namun mas vroh bisa membuat selector sendiri. Ada dua jenis pada HTML, yaitu  ID dan Class.

Simak video berikut sebagai pembuka

Selector ID

selector ID ini merupakan selector untuk menentukan bagian yang hanya ada satu pada halaman dan juga menentukan style nya. Jadi selector ID ini tidak bisa dipanggil lebih dari satu. Jika ada dua, maka hanya bekerja pada bagian pertama saja. selector ini juga bisa untuk me link pada section dalam satu halaman, misalnya kalau mas vroh men klik navigasi dengan selector id=“contact” , maka mas vroh akan dibawa ke section contact pada satu halaman. Bisa dengan effect scroll ataupun fade tergantung dari developernya. selector ID dituliskan dengan awalan pagar atau sharp atau kres “#” pada css. Untuk HTML nya menggunakan id=“namaID” .

Contoh penggunaan selector ID
Pada HTML

Sebuah paragraf dengan content sebagai selector ID.

Pada CSS

Selector Class

Selector class juga digunakan untuk menentukan style juga sama seperti id. Bedanya adalah jika id hanya boleh dipanggil satu kali saja, class bisa dipanggil berkali kali pada satu halaman. Selector ini ditulis dengan awalan titik atau dot “.” pada css dan class=“nama-class” pada HTML. oh iya, dalam satu element juga bisa dipanggil untuk beberapa class, spasi sebagai pemisah.

Contoh penguin selector Class
Pada HTML

 Contoh diatas, memanggil dua class sekaligus, yaitu container dan center-content.

Pada CSS

Nah, untuk kegunaan kenapa memanggil  lebih dari dua class pada satu element yaitu, biar ga cape cape nulis lagi. jadi tinggal digabungin classnya.

Demikian sekilas info tentang selector ID dan Class pada HTML dan CSS. Terimakasih sudah sudi mampir. bye..

Related Posts
Comments ( 5 )
  1. kak dolop
    March 25, 2016 at 8:23 am
    Reply

    ouh jadi gitu ya , perbedaan dari id sama class

  2. Afaea
    July 18, 2016 at 1:54 pm
    Reply

    Awalnya, saya kira penggunaan tanda (#) dan (.) didepan code CSS tidak ada perbedaannya XD

    Ternyata, code itu yang menentukan apakah code tersebut adalah ID atau Class.

    Terima kasih untuk Ilmu-nya mas 🙂

    • Ari Pratama
      Ari Pratama
      July 28, 2016 at 3:43 am

      Sama sama, seneng bisa bermanfaat buat orang lain.

  3. Freethinker
    December 16, 2016 at 3:53 am
    Reply

    Bagaimana caranya supaya date post tidak muncul di search engine result?

    • Ari Pratama
      Ari Pratama
      December 16, 2016 at 4:17 am

      diremove dari themes nya, terus crawl ulang

Leave a reply

Dimohon untuk tidak memasukkan live link (http,www) kedalam kolom komentar, jika ingin memasukkan domain anda, cukup isi namadomain dan tld nya, tanpa http dan www. Terimakasih ^^