Tutorial Belajar Selector class dan id di HTML

Adakalanya kita harus memberi style pada elemen tertentu yang lebih spesifik. Bila kita memberi style dengan nama elemennya, maka semua elemen yang ada di halaman tersebut akan dikenai style. Untuk memilih elemen tertentu yang spesifik, kita dapat menggunakan atribut class dan id.

<style>
p { font-size:14px; }
p.tebal { font-weight:bold; }
</style>

<p>Ini paragraf.</p>
<p class="tebal">Ini paragraf berteks tebal.</p>
<p class="tebal">Ini paragraf berteks tebal lainnya.</p>
<p>Ini paragraf lain berteks biasa.</p>

Pada contoh di atas, kita punya paragraf pyang memiliki atribut class. Isi atribut classnya adalah nama class. Nama class inilah yang akan kita gunakan untuk mendefinisikan style.

Cara penulisan selector untuk class adalah dengan menuliskan nama class diawali dengan tanda titik ., dalam contoh di atas p.tebal { font-weight:bold; }. Maka setiap paragraf yang memiliki atribut class dengan nilai tebalakan dikenai style ini.

Selain atribut class, kita juga dapat menggunakan atribut id. Perbedaannya dengan atribut class adalah, atribut class dapat digunakan pada lebih dari satu elemen. Pada contoh di atas, class tebal dapat dikenakan ke lebih dari satu elemen p.

Atribut id dengan nilai yang sama hanya dapat dikenakan pada satu elemen saja. Bila kita menambahkan atribut id pada lebih dari satu elemen, maka elemen paling atas dari halaman saja yang akan dikenai style.

Selain itu, untuk atribut id, penulisan stylenya adalah dengan menuliskan nama id dengan diawali tanda pagar #.

<style>
p { font-size:14px; }
p#kapital { text-transform:uppercase; }
</style>

<p>Ini paragraf.</p>
<p id="kapital">Ini paragraf dengan huruf kapital.</p>
<p id="kapital">Paragraf ini teksnya tidak akan tebal.</p>
<p>Ini paragraf lain berteks biasa.</p>

PRAKTEK

• Jalankan program pada kolom editor dan perhatikan hasil keluarannya.
• Tambahkan class tebal dan id kapital pada elemen p terakhir dan amati hasilnya. Apa yang terjadi pada konten paragraf tersebut?

Source:
<style>
p { font-size:14px; }
p.tebal { font-weight:bold; }
p#kapital { text-transform:uppercase; }
</style>

<p>Ini paragraf.</p>
<p class="tebal">Ini paragraf berteks tebal.</p>
<p id="kapital">Ini paragraf dengan huruf kapital.</p>
<p>Ini paragraf lain berteks biasa.</p>

Hasil

Ini paragraf.

Ini paragraf berteks tebal.

INI PARAGRAF DENGAN HURUF KAPITAL.

Ini paragraf lain berteks biasa.

Share this post