Tutorial CSS : Selector CSS

CSS
27 Jul 2022
1776

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!

Artikel Lainnya

Artikel lain yang mungkin menarik juga untuk kamu baca.

Tutorial CSS : Styling Text CSS

Bagaimana cara styling text dengan css. Styling text dalam css termasuk bagaimana cara memberikan warna pada text, text docaration, text transform dan lainnya.
Agus Yusida
5 min read 2083

Tutorial CSS : Membuat List di CSS

List adalah salah satu elemen HTML yang digunakan untuk mengelompokkan informasi terkait sehingga menjadi kait mengait satu sama lain dan memudahkan untuk dibaca. Dalam pengembangan web modern, list adalah elemen yang sering digunakan untuk design navigasi.
Agus Yusida
5 min read 2136

Tutorial CSS : Membuat Margin CSS

Margin CSS berfungsi untuk memberikan batas di luar sebuah elemen, di luar border dari sebuah elemen.
Agus Yusida
5 min read 2100

© 2024