Selector Pada CSS | Kita Ngoding CSS #03

Selector Pada CSS.- Adapun Tutorial CSS kegita versi blog Kita Ngoding ini yaitu tentang Pengertian Selector Pada CSS, kategori-kategori pada css selector, CSS ID Selector, CSS Class Selector, CSS Universal Selector, CSS Grouping Selector beserta contoh-contohnya.

Di pembahasan sebelumnya kita telah melihat Syntax CSS dan Struktur Syntax CSS.

Bagi kalian yang belum mengetahui Struktur syntax css, admin sarankan untuk membacanya terlebih dahulu sebelum melanjutkan ke pokok pembahasan kita pada pertemuan kali ini.

Akan tetapi bagi yang telah siap mengikuti, yuuk mari kita lanjutkan pembahasan kita kali ini!!.

Selector Pada CSS | Kita Ngoding CSS #03 |

Apa itu Selector Pada CSS

CSS selector adalah kode yang digunakan untuk mencari atau memilih element dalam HTML yang akan kamu berikan style (gaya).

Ada 5 kategori CSS selector antara lain :

Simple selectors : memilih element berdasarkan nama, id, class.
Combinatory selectors : Memilih element berdasarkan hubungan spesifik antar element
Pseudo-class selectors : memilih element berdasarkan keadaan tertentu
Pseudo-elements selectors : Memilih dan memberikan style pada bagian element tertentu.
Attribute selectors : Memilih element berdasarkan atribut atau nilai atribut tertentu

Baca Juga : Struktur Syntax CSS

CSS ID Selector

Dalam penggunaan id selector ini kita akan memanfaatkan attribute pada element HTML untuk memilih sebuah element yang spesifik. Karena id pada setiap element selalu uniq alias tidak sama di setiap halaman, jadi kita menggunakan id selector untuk memilih salah satu atau setiap element yang memiliki id yang sama untuk diberikan style. Dan untuk membuat kode css id kita harus menggunakan tanda pagar(#) sebelum menuliskan id.

Contoh CSS ID Selector

#id_ku {
text-align: center;
color: red;
} 

CSS Class Selector

Kita juga bisa memilih element HTML berdasarkan atribut class yang spesifik. Untuk penulisan kelas pada css itu sendiri dimulai dengan titik (.) di ikuti dengan nama class.

Contoh CSS class Selector

.judul {
    text-align: center;
    color: blue;
    font-family:Lucida Sans;
}

Baca Juga : Pengertian CSS dan Fungsinya

Atau kita bisa membuat suatu class hanya untuk element tertentu.

Contoh CSS Class Selector lain

p.center {
  text-align: center;
  color: red;
  font-family: Verdana;
}

Untuk kasus diatas kita hanya bisa menggunakan class center pada element paragraf <p> saja tidak bisa digunakan untuk element lain. Karena kita telah mendeklarasikan class center hanya untuk paragraf (p.center).

CSS Universal Selector

Jika kita ingin mengaplikasikan style css ke semua element pada HTML maka kita bisa melakukannya dengan menggunakan Universal Selector Pada CSS (*).

* {
  text-align:justify;
  color:blue;
  font-family: Arial;
}

Baca Juga : Code Warna Dalam CSS

CSS Grouping Selector

Grouping Selector digunakan untuk menggabungkan selector yang mempunyai definisi style yang sama.

Contoh CSS Grouping Selector

h1 {
  text-align: center;
  color: red;
}
h2 {
  text-align: center;
  color: red;
}
p {
  text-align: center;
  color: red;
}

Kita bisa menggabungkan kode diatas supaya lebih singkat dan lebih rapi. Contohnya seperti dibawah ini :

h1, h2, p {
  text-align: center;
  color: red;
}

Jadi terlihat lebih rapi bukan?.

Baca Juga : Box Model CSS

Sampai disini kita telah belajar tentang syntax pada css dan selector pada css, Untuk bahasan kita selanjutnya kita akan sama-sama belajar tentang bagaimana meng-uplikasikannya ke dalam body sehingga bener-bener terlihat hasilnya.

Artikel Lainnya :

Pengertian CSS dan Fungsinya | Kita Ngoding CSS #01 |

Syntax CSS | Kita Ngoding CSS #02 |

Selector Pada CSS | Kita Ngoding CSS #03 |

Cara Menggunakan CSS Di HTML | Kita Ngoding CSS #04 |

Membuat Komentar Di CSS | Kita Ngoding CSS #05 |

Code Warna Dalam CSS | Kita Ngoding CSS #06 |

Kode Background CSS | Kita Ngoding CSS #07 |

Cara Membuat Border Di CSS | Kita Ngoding CSS #08 |

Magin Dan Padding Pada CSS | Kita Ngoding CSS #09 |

CSS Height Dan Width | Kita Ngoding CSS #10 |

Box Model CSS | Kita Ngoding CSS #11 |