Mengenal Class dan ID Sebagai Selector CSS Pada Kerangka HTML
Class dan ID merupakan dua dari beberapa model selektor pada CSS untuk memberikan manipulasi tampilan dari HTML.

Selektor css lain tidak kita bahas pada artikel ini agar fokus dan tidak terlalu bingung nantinya, jadi cukup class dan ID dulu.
Sebelum ke pembahasan lebih lanjut kita refresh kembali apa itu selektor ...... ?
Selektor merupakan kode atau simbol dari CSS yang digunakan untuk menyeleksi atau memilih elemen pada HTML. Untuk apa dipilih .... ?, tentu saja untuk membatasi elemen mana yang akan dilakukan manipulasi atau diberi style dengan kode atau syntax dari CSS.
Dalam pengaplikasiannya Class dan ID memiliki fungsi yang sama namun terdapat ketentuan yang berbeda antara satu dengan lainnya sebagai selektor. Untuk lebih jelasnya kita bahas satu persatu.
Selektor Class (Class Selector)
Untuk memberikan style pada element html Selektor class dipanggil dalam css dengan menggunakan tanda titik yang diikuti dengan nama class ( " .NamaClass " ) dan dengan penulisan ( " class="NamaClass" " ) pada element html.
Class Selector dapat digunakan berulang ulang pada beberapa elemen dengan class name yang sama dan uniknya dapat dipanggil sekaligus pada syntax CSS.
Lebih jelasnya perhatikan contoh berikut :
#Penulisan Selektor Class pada html :
Selamat Datang Sobat Tehnosia
Berikut Cara Penerapan Class
Belajar Selektor Class Pada CSS bersama www.tehnosia.com.
#Penulisan Selektor Class pada CSS :
#Hasil yang ditampilkan :
![]() |
Selektor Class |
Not : jika sobat belum tau penempatan css pada kerangka html boleh baca artikel ini terlebih dahulu biar ga bingung : Cara Penempatan CSS Pada Kerangka HTML
Selektor ID (ID Selector)
Untuk memberikan style pada element html Selektor ID dipanggil dalam css dengan menggunakan tanda pagar yang diikuti dengan nama ID ( " .NamaID " ) dan dengan penulisan ( " id="NamaID" " ) pada element html.
Bingung .... ? 😁 mari lihat contoh berikut :
#Penulisan Selektor ID pada html :
#Penulisan Selektor ID pada CSS :
color: white;
background: #00d4db;
padding: 2px;
}
#Hasil yang ditampilkan :
![]() |
Selektor ID |
Tapi tunggu dulu ........ !!! ada satu kelebihan ID yang tidak dalapat dilakukan oleh class, apa itu .....?
ID dan tagar "#" Digunakan Dalam Pembuatan Link Anchor
Lalu apa fungsi "id" disini ..... ?
Fungsi id disini untuk menseleksi (menentukan) kemana tujuan anchor yang di buat.
Terimakasih