Dasar CSS: Selektor pada CSS

Selektor pada CSS merupakan sebuah metode yang digunakan untuk menyeleksi atau menargetkan bagian tertentu pada elemen HTML yang akan Anda berikan style atau gaya pewarnaan, ukuran, posisi, animasi dan lain sebagainya.

Selektor css memiliki 5 jenis, berikut penjelasannya:

Selektor Universal

Selektor universal merupakan sebuah selektor yang digunakan untuk menyeleksi semua elemen pada halaman html. Jika Anda ingin memberikan gaya tampilan secara keseluruhan tanpa harus membuatnya satu persatu dapat menggunakan jenis selektor ini. Sebagai contoh perhatikan kode css dibawah ini:

* {
  color: red;
  font-size: 16px;
}

kode diatas akan mengatur secara keseluruhan tag ataupun class yang berbeda sekalipun dengan tampilan warna tulisan berwarna merah dan ukuran font 16px.

See the Pen Selektor universal by Pram Eko (@pram-eko) on CodePen.

Selektor Tag

Jenis selector ini akan meyeleksi atau memilih elemen berdasarkan nama Tag. Contoh sederhana tag seperti p, h1, h2 dan lain sebagainya.

h4 {
   color: green;
   font-size: 20px;
}

dari kode diatas akan menampilkan hanya yang memiliki tag h4 pada halaman html yang akan diatur dengan warna green (hijau) dan memiliki ukuran tulisan sebesar 20px. Jika di suatu halaman ada tag h1, h2 dan tag lainnya selain h4 maka tidak akan terpengaruh oleh kode diatas.

See the Pen Tag selector by Pram Eko (@pram-eko) on CodePen.

Selektor Class

Selektor class adalah jenis selektor yang menyeleksi atau memilih elemen berdasarkan nama class yang diberikan. Berikut contoh selektor class pada css.

.container {
   background: green;
   padding: 15px;
   color: #fff;
}

kode diatas memiliki class dengan nama container, dimana pada class tersebut akan menampilkan background berwarna green (hijau) dengan padding sebesar 5px dan warna tulisan putih.

See the Pen Class selector by Pram Eko (@pram-eko) on CodePen.

Selektor ID

Selektor ID tidak jauh berbeda dengan selektor class, hanya saja target atau seleksi yang dipilih adalah ID. Penulisan pada selektor ID diawali dengan tanda ” # ” didepannya. Sebagai contoh penulisan selektor ID sebagai berikut:

#header {
  color: green;
  font-size: 20px;
}

See the Pen Selektor ID by Pram Eko (@pram-eko) on CodePen.

Selektor Atribut

Selektor atribut merupakan selektor yang memiliki elemen berdasarkan atribut. Selektor dengan jenis atribut tidak terlalu jauh berbeda dengan selektor tag. Contoh penulisan selektor atribut pada css sebagai berikut:

input[type=text] {
    background: none;
    color: #000;
    padding: 10px;
    border: 1px solid red;
}

<input type="text" placeholder="Cari...." />

pada kode css diatas kita akan menargetkan atau menyeleksi elemen input yang memiliki atribut type=”text”. Berikut hasil dari kode diatas

See the Pen Selektor Atribut by Pram Eko (@pram-eko) on CodePen.

Jika Anda bertanya dari penjelasan diatas mengenai jenis selektor pada css, selektor dengan jenis mana yang lebih sering digunakan?. Selektor pada Css yang lebih sering digunakan adalah selektor class dan tag.

Demikianlah penjelasan mengenai selektor pada css, jika Anda ingin bertanya silahkan ajukan pertanyaan melalui kolom komentar diakhir artikel ini.