Tutorial CSS : Selector CSS

Selector dalam CSS berfungsi untuk memilih element HTML yang mau di styling. Ada beberapa cara untuk membuat selector dalam CSS. Misalnya, dengan elemen HTML, attribute class, attribute id, universal dan lainnya.

Selector Dengan Elemen HTML

Kamu bisa melakukan styling dengan menggunakan memilih element html secara langsung.

Contohnya:

//styling div elemen
div {
  background: red;
}

//styling p elemen
p {
  background: red;
}

Jika kita styling berdasarkan elemen, maka akan mempengaruhi semua elemen sesuai tag html yang di styling.

Selector css dengan element html langsung biasanya digunakan untuk styling secara global.

Class Selector

Class selector bisa digunakan untuk styling element html yang diberikan class tersebut. Class selector bisa digunakan oleh banyak elemen sekaligus.

Contohnya:

.p {
  color: red;
}

.button {
  border: 1px solid red;
}

Class dalam css harus dimulai dengan titik (.) dan nama classnya. Nama class bisa bebas asalkan tidak dimulai dengan angka.

ID Selector

Berbeda dengan class selector yang bisa dipakai oleh banyak elemen, Id selector hanya bisa digunakan oleh 1 elemen saja.

Dalam css, Id selector dimulai dengan hashtag (#). Misalnya #order, #id_name.

Contohnya:

#div_1 {
  background: red;
}

#p_1 {
  background: red;
}

Di elemen html bisa dipanggil dengan <div id="div_id"></div>.

Universal Selector

Universal selector berfungsi untuk memberikan styling secara global.

Contohnya:

* {
  padding:0;
  margin:0;
}

Pengelompokan Selector

CSS mendukung pengelompokan selector. Tujuannya adalah untuk mengelompokkan beberapa selector yang memiliki styling yang sama sehingga penulisan css menjadi lebih rapi dan juga menghindari penulisan styling yang berulang-ulang.

Contohnya:

h1{
  color: red;
  font-size: 32px;
}
h2{
  color: red;
  font-size: 30px;
}
h3{
  color: red;
  font-size: 25px;
}
h4{
  color: red;
  font-size: 20px;
}
h5{
  color: red;
  font-size: 16px;
}
p{
  color: red;
  font-size: 14px;
}

Dari css di atas, bisa kita lihat bahwa masing-masing css memiliki styling yang sama yaitu color:red;. Kita bisa membuat css itu menjadi lebih simple dengan pengelompokan css.

h1, h2, h3, h4, h5, p{
  color: red;
}
h1{
  font-size: 32px;
}
h2{
  font-size: 30px;
}
h3{
  font-size: 25px;
}
h4{
  font-size: 20px;
}
h5{
  font-size: 16px;
}
p{
  font-size: 14px;
}

Untuk pengelompokan selector css dengan menggunakan comma (,)

Oke guys, kita sudah belajar tentang selector dalam CSS. Sekarang kita sudah bisa membarikan warna di dalam element HTML kamu. Semoga bisa dimengerti ya.

Tetap ikuti tutorial lainnya tentang belajar css di ngide.net ya!