Selector CSS

Selector CSS

275
0
SHARE

Setelah kita mengenal CSS Fundamental, kini kita melangkah ke selector CSS.

Apa itu? Bila kita melihat stuktur css, maka kita akan menemukan selector yang digunakan sebagai penunjuk elemen HTML mana yang akan dikenai aturan CSS.

Basic Selector CSS

Basic selector merupakan selector CSS yang paling sering digunakan dan paling mudah.  Secara basic, terdapat 3 jenis selector CSS yaitu :

Element Selector

Pada element selector kita langsung mendefinisikan elemen HTML mana yang akan dikenai aturan CSS. Misalnya dengan selector di bawah ini :

maka seluruh elemen p pada halaman tersebut akan dikenai aturan CSS

Class Selector

Pada class selector kita menunjuk elemen HTML yang memiliki class tertentu yang akan dikenai aturan CSS. Misalnya kita menggunakan selector di bawah ini :

maka seluruh elemen HTML yang memiliki class berita akan dikenai aturan CSS, misalnya :

ID Selector

Pada id selector, kita menunjuk elemen HTML dengan id tertentu yang akan dikenai aturan CSS. Misalnya kita menggunakan selector sebagai berikut :

maka seleuruh elemen HTML yang memiliki id=judul akan dikenai aturan CSS, misalnya :

Advanced Selector CSS

Terkadang bila menggunakan basic selector kita mengalami kesulitan untuk menunjuk suatu elemen HTML yang kompleks. Untuk itu anda dapat menggunakan advanced selector.

Secara garis besar advanced selector terbagi menjadi :

Universal Selector


dengan selector ini akan menunjuk seluruh elemen HTML pada halaman tersebut.

Attribute Selector

dengan selector ini maka seluruh elemen img yang memiliki atribute alt akan dikenai aturan CSS

Child Selector

Misal kita memiliki kode HTML sebagai berikut :

dan kita ingin menyeleksi “Bandung” saja menggunakan CSS maka kita dapat menggunakan child selector sebagai berikut :

Pada kode HTML di atas, posisi <span> yang mengapit Bandung merupakan anak dari elemen <div>, Sedangkan <span> yang mengapit Jakarta merupakan cucu dari elemen <div>.

Descendent Selector

Selector ini mirip dengan child selector, hanya saja tidak akan menyeleksi anak saja, namun seluruh keturunannya akan diseleksi. Penggunaannya adalah sebagai berikut :

dengan selector di atas maka Jakarta dan Bandung akan dikenai aturan CSS.

Pseudo-class selectors

Pada selector ini kita menambahkan keyword spesifik tergantung pada element HTML nya, misalnya :hover akan diterapkan bila kursor berada diatas elemen.

Berikut ini adalah struktur pseudo-class selector :

Contoh penggunaannya adalah sebagai berikut :

dengan css tersebut maka saat kita menempatkan kursor di atas elemen a maka warna text akan berubah menjadi biru.

Demikian selector CSS, semoga bermanfaat. Terima kasih .. 😀

Bagikan artikel ini ya.. terima kasih

NO COMMENTS

LEAVE A REPLY