Ari Pratama DevOps Engineer, AR Developer and Photographer

Perbedaan Selector ID dan Class pada HTML dan CSS

1 min read

selector id dan class

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..

Ari Pratama DevOps Engineer, AR Developer and Photographer
  1. kak dolop says:

    ouh jadi gitu ya , perbedaan dari id sama class

  2. Afaea says:

    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 🙂

    1. Ari Pratama says:

      Sama sama, seneng bisa bermanfaat buat orang lain.

  3. Freethinker says:

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

    1. Ari Pratama says:

      diremove dari themes nya, terus crawl ulang

  4. permisi mas.. numpang tanya ! bukannya gak saya sopan .. tapi apakah blog ini masih aktif

Leave a Reply

Your email address will not be published. Required fields are marked *