Apa perbedaan antara id dan kelas?

Apa perbedaan antara <div class="">dan <div id="">ketika datang ke CSS? Apakah saya tetap bisa menggunakannya <div id="">?

Saya melihat berbagai pengembang melakukan ini dalam kedua cara, dan karena saya belajar sendiri, saya tidak pernah benar-benar menemukannya.

idsharus unik dimana classdapat diterapkan pada banyak hal. Dalam CSS, idterlihat seperti #elementIDdan classelemen terlihat seperti.someClass

Secara umum, gunakan idsetiap kali Anda ingin merujuk ke elemen tertentu dan classketika Anda memiliki sejumlah hal yang semuanya sama. Misalnya, umum idunsur-hal seperti header, footer, sidebar. classElemen umum adalah hal-hal seperti highlightatau external-link.

Adalah ide yang bagus untuk membaca kaskade dan memahami prioritas yang diberikan kepada berbagai penyeleksi: http://www.w3.org/TR/CSS2/cascade.html

Namun, prioritas paling mendasar yang harus Anda pahami adalah bahwa idpenyeleksi lebih diutamakan daripada classpenyeleksi. Jika Anda punya ini:

<p id="intro" class="foo">Hello!</p>

dan:

#intro { color: red }
.foo { color: blue }

Teks akan berwarna merah karena idpemilih lebih diutamakan daripada classpemilih.

Mungkin analogi akan membantu memahami perbedaan:

<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />

Kartu ID pelajar berbeda. Tidak ada dua siswa di kampus akan memiliki kartu ID siswa yang sama . Namun, banyak siswa dapat dan akan berbagi setidaknya satu Kelas satu sama lain.

Tidak apa-apa untuk menempatkan beberapa siswa di bawah satu judul Kelas , seperti Biologi. Tetapi tidak pernah dapat diterima untuk menempatkan banyak siswa di bawah satu ID siswa .

Saat memberikan Aturan atas sistem interkom sekolah, Anda dapat memberikan Aturan ke Kelas :

"Besok, semua siswa harus mengenakan baju merah untuk kelas Biologi."

.Biology {
  color: red;
}

Atau Anda dapat memberikan aturan kepada Siswa Tertentu, dengan menghubungi ID uniknya :

"Jonathan Sampson akan mengenakan baju hijau besok."

#JonathanSampson {
  color: green;
}

Dalam hal ini, Jonathan Sampson menerima dua perintah: satu sebagai siswa di kelas Biologi, dan lainnya sebagai persyaratan langsung. Karena Jonathan diberitahu secara langsung, melalui atribut id, untuk mengenakan kemeja hijau, ia akan mengabaikan permintaan sebelumnya untuk mengenakan kemeja merah.

Selektor yang lebih spesifik menang.

Tempat menggunakan ID versus kelas

Perbedaan sederhana antara keduanya adalah bahwa sementara kelas dapat digunakan berulang kali pada halaman, ID hanya boleh digunakan satu kali per halaman. Oleh karena itu, adalah tepat untuk menggunakan ID pada elemen div yang menandai konten utama pada halaman, karena hanya akan ada satu bagian konten utama. Sebaliknya, Anda harus menggunakan kelas untuk mengatur warna baris bergantian di atas meja, karena mereka secara definisi akan digunakan lebih dari sekali.

ID adalah alat yang sangat kuat. Suatu elemen dengan ID dapat menjadi target dari bagian JavaScript yang memanipulasi elemen atau isinya dengan cara tertentu. Atribut ID dapat digunakan sebagai target tautan internal, menggantikan tag jangkar dengan atribut nama. Akhirnya, jika Anda membuat ID Anda jelas dan logis, mereka dapat berfungsi sebagai semacam "dokumentasi diri" dalam dokumen. Misalnya, Anda tidak perlu menambahkan komentar sebelum blok yang menyatakan bahwa blok kode akan berisi konten utama jika tag pembuka blok memiliki ID, "main", "header", "footer" ", dll.

Id harus unik di seluruh halaman.

Kelas dapat diterapkan ke banyak elemen.

Terkadang, sebaiknya menggunakan id.

Dalam sebuah halaman, Anda biasanya memiliki satu footer, satu header ...

Kemudian footer dapat menjadi div dengan id

<div id = "footer" class = "...">

dan masih memiliki kelas

Sebuah KELAS harus digunakan untuk beberapa elemen yang Anda ingin styling yang sama untuk. Sebuah ID harus untuk elemen yang unik. Lihat tutorial ini .

Anda harus merujuk ke standar W3C jika Anda ingin menjadi konformis yang ketat, atau jika Anda ingin halaman Anda divalidasi ke standar.

ID unik. Kelas tidak. Elemen juga dapat memiliki beberapa kelas. Kelas juga dapat ditambahkan dan dihapus secara dinamis ke suatu elemen.

Di mana pun Anda bisa menggunakan ID, Anda bisa menggunakan kelas sebagai gantinya. Kebalikannya tidak benar.

Konvensi tersebut tampaknya menggunakan ID untuk elemen halaman yang ada di setiap halaman (seperti "navbar" atau "menu") dan kelas untuk semua hal lain tetapi ini hanya konvensi dan Anda akan menemukan berbagai variasi dalam penggunaan.

Satu perbedaan lainnya adalah bahwa untuk elemen input formulir, <label>elemen referensi bidang dengan ID sehingga Anda perlu menggunakan ID jika Anda akan menggunakan <label>. adalah hal aksesibilitas dan Anda benar-benar harus menggunakannya.

Dalam tahun-tahun berlalu ID juga disukai karena mereka mudah diakses di Javascript (getElementById). Dengan munculnya jQuery dan kerangka kerja Javascript lainnya, ini bukan masalah lagi sekarang.

Kelas seperti kategori. Banyak elemen HTML dapat menjadi milik kelas, dan elemen HTML dapat memiliki lebih dari satu kelas. Kelas digunakan untuk menerapkan gaya umum atau gaya yang dapat diterapkan di beberapa elemen HTML.

ID adalah pengidentifikasi. Mereka unik; tidak ada orang lain yang diizinkan memiliki ID yang sama. ID digunakan untuk menerapkan gaya unik ke elemen HTML.

Saya menggunakan ID dan kelas dengan cara ini:

<div id="header">
  <h1>I am a header!</h1>
  <p>I am subtext for a header!</p>
</div>
<div id="content">
  <div class="section">
    <p>I am a section!</p>
  </div>
  <div class="section special">
    <p>I am a section!</p>
  </div>
  <div class="section">
    <p>I am a section!</p>
  </div>
</div>

Dalam contoh ini, bagian header dan konten dapat ditata melalui #header dan #content. Setiap bagian konten dapat diterapkan gaya umum melalui #content .section. Hanya untuk iseng, saya menambahkan kelas "khusus" untuk bagian tengah. Misalkan Anda ingin bagian tertentu memiliki gaya khusus. Ini dapat dicapai dengan kelas .special, namun bagian masih mewarisi gaya umum dari #content .section.

Ketika saya melakukan pengembangan JavaScript atau CSS, saya biasanya menggunakan ID untuk mengakses / memanipulasi elemen HTML yang sangat spesifik, dan saya menggunakan kelas untuk mengakses / menerapkan gaya ke berbagai elemen.

CSS berorientasi objek. ID mengatakan instance, class mengatakan class.

Saat menerapkan CSS, terapkan ke kelas dan cobalah untuk menghindari sebanyak yang Anda bisa untuk id. ID hanya boleh digunakan dalam JavaScript untuk mengambil elemen atau untuk acara apa pun yang mengikat.

Kelas harus digunakan untuk menerapkan CSS.

Kadang-kadang Anda harus menggunakan kelas untuk pengikatan acara. Dalam kasus seperti itu, cobalah untuk menghindari kelas yang sedang digunakan untuk menerapkan CSS dan lebih baik menambahkan kelas baru yang tidak memiliki CSS yang sesuai. Ini akan membantu ketika Anda perlu mengubah CSS untuk kelas apa pun atau mengubah nama kelas CSS bersama-sama untuk elemen apa pun.

Ruang pemilih CSS sebenarnya memungkinkan untuk gaya id bersyarat:

h1#my-id {color:red}
p#my-id {color:blue}

akan ditampilkan seperti yang diharapkan. Mengapa kamu melakukan ini? Kadang-kadang ID dihasilkan secara dinamis, dll. Penggunaan lebih lanjut telah membuat judul berbeda berdasarkan pada penugasan ID tingkat tinggi:

body#list-page #title {font-size:56px}
body#detail-page #title {font-size:24px}

Secara pribadi, saya lebih suka pemilih nama kelas yang lebih panjang:

body#list-page .title-block > h1 {font-size:56px}

seperti yang saya temukan menggunakan ID bersarang untuk membedakan pengobatan menjadi sedikit menyimpang. Ketahuilah bahwa saat pengembang di dunia Sass / SCSS menangani hal ini, ID bersarang menjadi norma.

Akhirnya, ketika datang ke kinerja pemilih dan diutamakan, ID cenderung menang. Ini adalah subjek lain.

Setiap elemen dapat memiliki kelas atau id.

Kelas digunakan untuk referensi jenis tampilan tertentu, misalnya Anda mungkin memiliki kelas css untuk div yang mewakili jawaban untuk pertanyaan ini. Karena akan ada banyak jawaban, banyak div akan membutuhkan gaya yang sama dan Anda akan menggunakan kelas.

Id merujuk hanya pada satu elemen, misalnya bagian terkait di sebelah kanan mungkin memiliki gaya khusus untuk itu tidak digunakan kembali di tempat lain, itu akan menggunakan id.

Secara teknis Anda dapat menggunakan kelas untuk semua itu, atau membaginya secara logis. Namun, Anda tidak dapat menggunakan kembali id ​​untuk beberapa elemen.

Kelas adalah untuk menerapkan gaya Anda ke sekelompok elemen. Gaya ID hanya berlaku untuk elemen dengan ID itu (seharusnya hanya ada satu). Biasanya Anda menggunakan kelas, tetapi jika hanya ada satu kali, Anda dapat menggunakan ID (atau hanya menempelkan gaya langsung ke elemen).

Dalam id pengembangan lanjutan pada dasarnya kita dapat menggunakan JavaScript.

Untuk tujuan berulang, kelas menjadi berguna bertentangan dengan id yang seharusnya unik.

Di bawah ini adalah contoh yang menggambarkan ekspresi di atas:

<div id="box" class="box bg-color-red">this is a box</div>
<div id="box1" class="box bg-color-red">this is a box</div>

Sekarang Anda dapat melihat di sini boxdan box1dua (2) <div>elemen yang berbeda , tetapi kita dapat menerapkan boxdan bg-color-redkelas untuk keduanya.

Konsepnya adalah pewarisan dalam bahasa OOP .

1) id id tidak dapat digunakan kembali dan hanya boleh diterapkan pada satu elemen HTML sementara kelas div dapat ditambahkan ke beberapa elemen.

2) Sebuah id lebih penting jika keduanya diterapkan pada elemen yang sama dan memiliki gaya yang saling bertentangan, gaya id akan diterapkan.

3) Elemen style selalu merujuk kelas div dengan meletakkan a. (dot) di depan nama mereka sementara kelas id id disebut dengan meletakkan # (hash) di depan nama mereka.

4) Contoh: -

kelas dalam <style>deklarasi -.red-background { background-color: red; }

id dalam <style>deklarasi - #blue-background {background-color: blue;}

<div class="red-background" id="blue-background">Hello</div> Di sini latar belakang akan berwarna biru

iddan classdua atribut Global / Standard HTML (Atribut global di bawah ini dapat digunakan pada elemen HTML apa pun.)

class Menentukan satu atau beberapa nama kelas untuk suatu elemen (merujuk ke kelas dalam style sheet)

id Menentukan id unik untuk suatu elemen

Atribut id memberikan pengidentifikasi unik seluruh elemen dokumen di mana atribut kelas menyediakan cara untuk mengklasifikasikan elemen serupa.

Nilai atribut id harus unik di halaman HTML tempat atribut kelas dapat digunakan kembali di mana pun Anda ingin menerapkan properti yang sama

Kelas digunakan untuk beberapa elemen yang memiliki atribut umum. Contoh jika Anda ingin warna dan font yang sama untuk p dan tag tubuh menggunakan atribut kelas atau di divisi itu sendiri.

Id di sisi lain digunakan untuk menyoroti atribut elemen tunggal dan digunakan secara eksklusif untuk elemen tertentu saja. Misalnya kita memiliki tag h1 dengan beberapa atribut yang kita tidak ingin mereka ulangi di elemen lain di seluruh halaman.

Perlu dicatat bahwa jika kita menggunakan kelas dan id keduanya dalam suatu elemen, * id ovverides atribut kelas. * Hanya karena id secara eksklusif untuk elemen tunggal

Lihat contoh di bawah ini

<html>
<head>
<style>
    #html_id{
        color:aqua;
        background-color: black;

    }
    .html_class{
        color:burlywood;
        background-color: brown;
    }
</style>

   </head>
    <body>
<p  class="html_class">Lorem ipsum dolor sit amet consectetur adipisicing 
   elit. 
    Perspiciatis a dicta qui unde veritatis cupiditate ullam quibusdam! 
     Mollitia enim, 
    nulla totam deserunt ex nihil quod, eaque, sed facilis quos iste.</p>
    </body>
   </html>

Kami menghasilkan output

Keluaran