-->

Iklan bawah header

Belajar CSS : Jenis-jenis Selector Pada CSS

Belajar CSS

Setelah memahami tentang cara menulis CSS di HTML, hal dasar yang perlu kita ketahui adalah selektor. Mengetahui jenis-jenis selektor pada CSS merupakan hal yang penting, karena selektor akan menjadi landasan dasar untuk menggunakan CSS.

CSS memiliki beberapa cara yang bisa digunakan untuk memilih (selector) pada dokumen HTML yang ingin di beri style. Pada artikel ini saya akan menjelaskan selector yang paling sering digunakan untuk memilih elemen HTML.

Jenis-jenis selector pada CSS

1. Tag Selector

Tag selector atau disebut juga dengan Type Selector menggunakan tag HTML sebagai selektornya, contohnya apabila kita ingin memilih tag paragraf <p> pada HTML, maka pada CSS selektornya cukup ditulis dengan p.

Contoh:


p {
	Color: red;
}

Pada kode kode CSS diatas terdapat selektor p, pada selektor p akan membuat seluruh tag paragraf memiliki warna tulisan merah. Misalnya kita memiliki struktur HTML seperti dibawah ini:


<p>Materi yang sedang kita bahas adalah Selektor</p>

Maka output yang dihasilkan akan seperti ini :

tag selector

2. Class Selector

Class selector adalah selektor yang menggunakan atribut class pada elemen HTML yang akan dipilih. Sebuah elemen HTML dapat menggunakan lebih dari satu class. Class selector ditulis dengan tanda titik di depannya.

Untuk lebih jelas bisa lihat contoh berikut :


.babi {
  color: white;
  background: pink;
  padding: 5px;
}
Lalu pada kode HTML-nya kita gunakan kedua class tersebut pada satu elemen:

<p>Saya sedang belajar <b class="pink">CSS</b> di offaweb.com.</p>

Output yang dihasilkan akan seperti ini :

class selector

3. ID Selector

ID Selector sebenarnya hampir sama dengan Class. Hanya saja ID selector memiliki aturan yang berbeda dari class yaitu hanya boleh digunakan oleh satu elemen saja. ID selector ditandai dengan tanda (#) di depannya.

Contoh:


#header {
    background: teal;
    color: white;
    height: 100px;
    padding: 50px;
}

kode HTML-nya:


<header id="header">
    <h1>Selamat Datang di Website Saya</h1>
</header>

Hasilnya:

id selector

4. Atribut Selector

Atribut selector menggunakan atribut pada elemen HTML sebagai selektornya. Atribut selector hampir sama seperti tag selector.

Contoh Atribut selector:


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

lalu pada kode HTML


<input type="text" placeholder="ketik sesuatu..." />

Hasilnya

atribut selector

5. Universal Selector

Selektor ini hanya ada 1 di dalam CSS, yaitu dengan tanda bintang “*”. Universal selector betujuan untuk mencari semua tag yang ada.

Contoh universal selector:


* {
    border: 2px solid green;
}

Dengan kode CSS diatas akan membuat seluruh tag HTML akan memiliki garis solid dengan ukuran 2px dan berwarna hijau.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel