CSS Selector

IT Website

Haii sobat.. 

Pembahasan selanjutnya adalah tentang CSS selector. CSS digunakan untuk mengatur style dari sebuah element HTML. Oleh karena itu CSS membutuhkan penghubung atau konektor antara CSS dan HTML
sehingga tersebut disebut Selector . Pada artikel ini saya akan jelaskan beberapa selector yang sering dipakai dalam membuat suatu halaman website. 

1. Class & ID

Class & ID sering kita jumpai setiap kita membuat sebuah halaman website. Cara aksesnya adalah sebagai berikut, misal :

<div class="aa"></div>

<div id="bb"></div>

untuk mengakses element tersebut kita panggil dengan cara sebagai berikut :

.aa{

   ...

}

#bb{

   ....

}

2. Element

Untuk memanggil HTML kita bisa langsung memanggil tag elemetnya. Contohnya sperti berikut :

<p>Ini adalah contoh selector 1</p>
<span>Ini adalah contoh selector 2</span>
<div>Ini adalah contoh selector 3</div>

untuk mengaksesny adalah sperti berikut ini:

p{  .... }
span{ .... }
div{ .... }

3. Element Lebih Dari 1
Dalam pemanggilan suatu komponen/tag html tidak hanya bsa di panggil 1 element namun beberapa element bisa kita panggil secara bersamaan. Contohny :

div, span{ ... }
div span{ ... }
div > span{ ... }
div + span{ ... }
div ~ ul{ ... }

Penjelasan :
- div, span artinya pemanggilan terhadap semua element DIV dan SPAN.
- div span artinya pemanggilan terhadap element SPAN yang ada dalam DIV.
- div > span artinya pemanggilan terhadap semua element SPAN yang ada dalam DIV.
- div + span artinya pemanggilan terhadap element SPAN yang pertama DIV.
- div ~ span artinya pemanggilan terhadap semua element SPAN sesudah DIV.

4. Attribute
Pada attribute ini memiliki beberapa macam jenis selector, Contohny :

input[name]{ ... }
input[type="text"]{ ... }

input[name~=kelas]{ ... }

input[name^=kelas]{ ... }

input[name$=men]{ ... }
input[name*=as]{ ... }

Penjelasan
- input[name] artinya memanggil semua element name yang mempunyai attribut name.
- input[type="text"] artinya memanggil semua element input yang mempunyai attribut type dengan value text.
- input[name~=kelas] artinya memanggil semua element input yang memiliki attribut name dengan value kelas.
- input[name^=kelas] artinya memanggil semua element input yang memiliki attribut name dengan awalan valuenya kelas.
- input[name$=men] artinya memanggil semua element input yang memiliki attribut name dengan akhiran valuenya men.
- input[name*=as] artinya memanggil semua element input yang memiliki attribut name dengan nilainya mengandung kata as.

5. Dll

Selain poin diatas ada juga beberapa selectors, diantaranya :
:active mengatur style saat mengklik suatu link.
:focus mengatur style saat cursor ada di salah satu element input.
:hover mengatur style saat cursor ada atas suatu element.
:link mengatur style yang memiliki link.
:checked mengatur style input radio/checkbox saat di klik.
:disabled mengatur style element input yang dalam keadaan disable.
:enabled mengatur style element input yng dalam keadaan tidak disable.
:empty mengatur style element yang mempunyai nilai kosong.
:visited mengatur style element link yang sudah di klik.

5 poin diatas adalah beberapa selectors yang sering di pakai dalam membuat halaman web. Sebetulnya masih banyak selector yang lain selain itu. Sobat bisa cari sendiri yang lain-lainnya itu apa. :D
Mungkin sekian yang bisa saya sampaikan. Semoga bermanfaat.

-- thx --

Bagikan

Jangan lewatkan

CSS Selector

4/ 5

Oleh kazzet

April 08, 2018 Komentar