Kelas - Trik CSS

Anonim

Pemilih kelas di CSS dimulai dengan titik (.), Seperti ini:

.class ( )

Pemilih kelas memilih semua elemen dengan atribut kelas yang cocok.

Misalnya, elemen ini:

Push Me

dipilih dan ditata seperti ini:

.big-button ( font-size: 60px; )

Anda dapat memberi kelas nama apa pun yang dimulai dengan huruf, tanda hubung (-), atau garis bawah (_). Anda dapat menggunakan angka dalam nama kelas, tetapi angka tidak boleh menjadi karakter pertama atau karakter kedua setelah tanda hubung. Kecuali jika Anda menjadi gila dan mulai melarikan diri dari penyeleksi, yang bisa menjadi aneh:

.\3A \`\( ( /* matches elements with class=":`(" */ )

Sebuah elemen dapat memiliki lebih dari satu kelas:



 This paragraph will get styles from .intro and .blue selectors.

Sebuah elemen dengan beberapa kelas diberi gaya dengan aturan CSS untuk setiap kelas. Anda juga dapat menggabungkan beberapa kelas untuk memilih elemen:

/* only selects elements with BOTH of these classes */ .intro.blue ( font-size: 1.3em; )

Demo ini menunjukkan bagaimana pemilih kelas tunggal berbeda dari penyeleksi gabungan:

Anda juga dapat membatasi pemilih kelas untuk jenis elemen tertentu, yang terkadang disebut "kualifikasi tag":

ul.menu ( list-style: none; )

Kekhususan

Dengan sendirinya, pemilih kelas memiliki nilai spesifisitas 0, 0, 1, 0. Itu "lebih kuat" daripada pemilih elemen (seperti:) a ( )tetapi kurang kuat daripada pemilih ID (seperti #header ( )). Kekhususan meningkat saat Anda menggabungkan pemilih kelas atau membatasi pemilih ke elemen tertentu.

Mengakses Kelas dengan JavaScript

Anda dapat membaca dan memanipulasi kelas elemen dengan classListdi JavaScript. Misalnya, menambahkan kelas bisa seperti:

document.getElementById('italicize').classList.add('italic');

Demo ini menunjukkan contoh dasar classListpenggunaan:

jQuery juga memiliki metode untuk berinteraksi dengan kelas, termasuk .addClass(), .removeClass(), .toggleClass(), dan .hasClass().

Informasi Lebih Lanjut

  • Baca spesifikasi W3C untuk pemilih kelas.
  • Pelajari lebih lanjut tentang nama kelas semantik.
  • Pelajari lebih lanjut tentang kekhususan.
  • Pelajari tentang perbedaan antara kelas dan ID.
  • Pelajari tentang beberapa pemilih kelas dan kombinasi pemilih kelas / ID.
  • Pelajari tentang API .classList.
  • Pelajari tentang manipulasi kelas di jQuery.

Dukungan Browser

Chrome Safari Firefox Opera YAITU Android iOS
Apa saja Apa saja Apa saja Apa saja Apa saja Apa saja Apa saja