Tutorial belajar css # Apa Itu Selector Pada Css?

Salah satu hal penting ketika ingin belajar bahasa pemrograman css adalah belajar cara menulis selector.
Selector inilah yang akan kita gunakan untuk menentukan target elemen html yang ingin kita atur stylenya.
Selector digunakan ketika kita ingin membuat eksternal css ataupun internal css.
Oleh karena itu pada tutorial kali ini kita akan belajar bagaimana cara menulis selector yang benar.

Baik kita langsung saja ke tutorialnya,

Apa Itu Selector?

Selector adalah sebuah keyword yang digunakan untuk menentukan target element html yang ingin kita atur propertinya.
Selector di tulis sebelum kode block / block style (pen: ditandai dengan tanda '{' dan '}' ).

Tutorial belajar css # Apa Itu Selector Pada Css?

Macam-Macam Selector

Selector terbagi menjadi beberapa macam, yaitu,

Selector Tag, menentukan elemen target berdasarkan tag yang digunakan
```
p{color:red;}
```
Selector Id, menentukan elemen target berdasarkan atribut id
```
#header{background-color:blue;}
```
Selector Class, menentukan elemen target berdasarkan atribut class
```
.post-article{margin:9px 9px 9px 9px;}
```
Selector Attribute, menentukan elemen target berdasarkan atribut lain
```
[type=text]{color:#fff;}
```
Selector All, mengatur semua element html dengan menggunakan tanda " *".
```
*{font-size:14px;}
```
Selector State (psoude-class), mengatur elemen berdasarkan state atau kondisi tertentu
```
input[type=checkbox]:checked{color:red;}
```
Selector Rule, mengatur style konfigurasi pada element
```
p::selection, input::placeholder{color:red;}
```

Cara Menulis Selector

Berikut adalah beberapa cara penulisan selector untuk menentukan target element,

Menyeleksi beberapa element

Kita bisa menentukan lebih dari satu target element menggunakan satu block style. Caranya seperti berikut,

target_element1, target_element2, target_element3, target_element4 {color:red;}

Contohnya seperti berikut,

Deretcode

Output :

Menyeleksi secara spesifik berdasarkan elemen parent

Kita bisa menentukan element tertentu secara spesifik berdasarkan turunannya sehingga element lainnya tidak terpengaruh oleh css. Caranya seperti berikut,

element_parent1_to_n target_element {color:red;}

Contohnya seperti berikut,

Deretcode

Output :

Menyeleksi secara spesifik berdasarkan id,class dan attribute lainya

Kita bisa menentukan element tertentu secara spesifik berdasarkan attribute-attributenya sehingga element lainnya tidak terpengaruh oleh css. Caranya seperti berikut,

target_eleme#id.class1.class2.class3 {color:red;}

Contohnya seperti berikut,

Deretcode

Output :

Menyeleksi children element satu tingkat dari element parent

Kita bisa menentukan element target berdasarkan element satu tingkat di atasnya. Caranya seperti berikut,

elemen_1>element_target{color:red;}

Contohnya seperti berikut,

Deretcode

Output :

Menyeleksi element sibling satu tingkat dibawahnya

Kita bisa menggunakan selector untuk menentukan element target berdasarkan element sibling satu tingkat diatasnya. Caranya seperti berikut,

element1+elemen_target{color:red;}

Contohnya seperti berikut,

Deretcode

Output :

Menyeleksi semua element sibling dibawahnya

Kita bisa menyeleksi semua target element yang berada dibawah element tertentu. Caranya seperti berikut,

elemen1 ~ elemen_target{color:red;}

Contohnya seperti berikut,

Deretcode

Output :

Menyeleksi element berdasarkan isi attribute

Kita juga bisa menggunakan value attribute untuk membuat selector, Caranya seperti berikut,

[atribut=value]{color:red;}

Contohnya seperti berikut,

Deretcode

Output :

Menyeleksi elemen jika isi atribut berisi teks tertentu

Jika kita ingin menyeleksi element jika attributnya berisi teks tertentu maka caranya seperti berikut,

[atribut*=value]{color:red;}

Contohnya seperti berikut,

Deretcode

Output :

Menyeleksi element dalam kondisi aktif

Misalnya kita ingin memberikan style pada element button ketika di klik, maka caranya seperti berikut,

element:active{color:red;}

Contohnya kodenya seperti berikut,

Deretcode

Output :

Menyeleksi elemen yang di sorot mouse (mouse over)

Jika kita ingin memberikan style pada element yang di sorot menggunakan mouse, maka caranya seperti berikut,

elemen:hover{color:red;}

Contoh kodenya seperti berikut,

Deretcode

Output :

Menyeleksi element dalam kondisi fokus

Untuk memberikan styling pada element input yang aktif kita bisa menggunakan cara berikut,

target_elemen:focus{color:red;}

Contohnya kodenya seperti berikut,

Deretcode

Output :

Menambahkan pseudo element setelah element target

Pseudo element adalah element tambahan yang dibuat menggunakan css namun tidak bisa di akses menggunakan DOM Api javascript. Untuk menambahkan pseudo element seletelah element target kita bisa menggunakan cara berikut,

terget_elemen::after{content:'<<';color:red;}

Contohnya seperti berikut,

Deretcode

Output :

Menambahkan pseudo element sebelum element target

Untuk menambahkan pseudo element sebelum element target kita bisa menggunakan cara berikut,

terget_elemen::before{content:'>>';color:red;}

Contohnya seperti berikut,

Deretcode

Output :

Menyeleksi semua element target kecuali element dengan spesifikasi tertentu

Kita bisa menggunakan pseudo not untuk mengecualikan element tertentu agar tidak di styling. Cara seperti berikut

elements_target:not(except_element){color:red;}

Contoh implementasinya seperti berikut,

Deretcode

Output :

Mengganti warna pada konten element target yang di block

Umumnya ketika kita memblock teks, warnanya defaultnya adalah biru, tapi kita bisa mengaturnya dengan cara seperti berikut,

elements_target::selection{background-color:warning;color:white}

Contohnya seperti berikut,

Deretcode

Output :

Menyeleksi element ketika memiliki element tertentu di dalamnya (Support di CSS4)

Terakhir adalah teknik menggunakan selector untuk menentukan element target jika memiliki element tertentu di dalamnya (hanya di dukung di css4, hampir banyak browser tidak mendukung selector ini). Caranya seperti berikut,

tagert_elemet:has(children_element){color:red}

Contoh implementasinya,

Deretcode

Output :

Itu tadi beberapa trik penulisan selector yang bisa kita lakukan untuk memberikan styling pada element, sebenarnya masih banyak trik-trik lainnya, tapi yang barusan kita pelajari adalah trik selector yang umum dilakukan.

Jika kamu merasa artikel ini bermanfaat silahkan klik tombol share.
Jika ada pertanyaan atau ada hal yang ingin disampaikan silahkan tulis di kolom komentar.