Salah satu hal dasar dalam menggunakan CSS adalah dengan mengetahui jenis jenis selector serta penggunaannya. Selector adalah kata kunci dan simbol yang digunakan pada CSS untuk memilih elemen HTML.
Berikut ini macam jenis selektor yang ada pada CSS:
- Selector Tag
- Selector Class
- Selector ID
- Selector Atribut
- Selector Universal
- Selector Pseudo
Mari kita bahas satu persatu …
Selector Tag di CSS
Tag selector atau juga dikenal dengan Type Selector adalah selektor yang berguna untuk memilih elemen berdasarkan nama tag. Misalnya jika anda ingin memilih tag HTML paragraf (<p>) pada HTML, maka pada CSS selectornya cukup ditulis dengan p.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Selector Tag CSS</title>
<style type="text/css">
/* Kode Tag Selektor */
p {
color: red;
}
</style>
</head>
<body>
<!-- struktur HTML -->
<div>contoh paragraf berdasarkan kode CSS</div>
<p>contoh paragraf berdasarkan kode CSS</p>
<div>contoh paragraf berdasarkan kode CSS</div>
<p>contoh paragraf berdasarkan kode CSS</p>
</body>
</html>
Pada contoh kode diatas, kita memilih semua elemen <p> yang akan dirubah warna teksnya menjadi merah.
Maka hasilnya semua elemen <p> pada struktur HTML berwarna merah, sedangkan elemen <div> tidak.
Selector ID di CSS
Selektor ID merupakan jenis selector pada CSS yang ditandai dengan tanda pagar (#) di depannya. Selector ini hampir sama dengan class, namun ia hanya boleh digunakan oleh satu elemen saja.
Contoh :
1. Buat file html dengan nama index.html lalu salin kode berikut
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>Selector ID</title>
</head>
<body>
<header id="header">
<h1>Contoh Selector ID pada CSS</h1>
<p>
Selektor ID merupakan jenis selector pada CSS yang ditandai
dengan tanda pagar (#) di depannya. Selector ini
hampir sama dengan class, namun ia hanya boleh
digunakan oleh satu elemen saja.
</p>
</header>
</body>
</html>
2. Buat file CSS dengan nama style.css lalu salin kode berikut.
#header {
background: yellow;
color: red;
height: 100px;
padding: 50px;
}
3. Letakkan file html dan CSSnya pada direktori folder yang sama
4. Silahkan buka file index.html, maka hasilnya :
Selector Class di CSS
Selektor class adalah selektor yang dibuat dengan tanda titik di depannya. selektor ini memilih elemen berdasarkan nama class yang diberikan. Berdasarkan dari cara penulisannya, selector ini hampir sama dengan ID selector.
Perbedaan class selector dan ID selector yaitu ID selector hanya boleh menggunakan 1 nama pada setiap value pada atribut, sedangkan class selector bisa digunakan pada beberapa tag sekaligus
Contoh:
1. Buat file html dengan nama index.html lalu salin kode berikut
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>Selector Class</title>
</head>
<body>
<h1>Contoh Selector Class CSS</h1>
<p>
Selektor class adalah <b class="yellow">selektor yang dibuat dengan tanda titik</b>
di depannya.
</p>
</header>
</body>
</html>
2. Buat file CSS dengan nama style.css lalu salin kode berikut.
.yellow {
color: red;
background: yellow;
padding: 5px;
}
3. Letakkan file html dan CSSnya pada direktori folder yang sama
4. Silahkan buka file index.html, maka hasilnya :
Keterangan :
.yellow, merupakan selektor class
<b class=”yellow”>, menambahkan atribut class di dalam kode HTML.
Selector Atribut di CSS
Selektor atribut adalah selektor yang memilik elemen berdasarkan atribut yang berguna untuk mencari seluruh tag yang mempunyai atribut yang dituliskan.
Contoh :
File html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>Selector Atribut</title>
</head>
<body>
<h1>Contoh Selector Atribut CSS</h1>
<p>
<input type="text" placeholder="tulis disini..." />
</p>
</header>
</body>
</html>
File CSS
input[type=text] {
background: none;
color: red;
padding: 12px;
border: 2px solid red;
}
Pada contoh kode diatas, kita akan memilih semua elemen <input> yang mempunyai atribut type=’text’. Maka hasilnya :
Selector Universal
Selektor universal adalah selektor yang digunakan untuk menyeleksi semua elemen pada scope tertentu.
Contoh:
File HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>Selector Universal</title>
</head>
<body>
<h1>Contoh Selector Universal CSS</h1>
<p>
<div>Selektor atribut adalah selektor yang memilik elemen </div>
<p>berdasarkan yang memilik elemen berdasarkan</p>
<div>atribut yang berguna untuk mencari seluruh tag</div>
<p>yang mempunyai atribut yang dituliskan</p>
</p>
</header>
</body>
</html>
File CSS
* {
border: 1px solid blue;
}
p {
color: red;
}
Pada kode diatas, semua elemen akan memiliki garis solid dengan ukuran 1px dan berwarna biru dan tag <p/> bewarna merah.
Hasilnya :
Terkadang walaupun kita sudah melakukan pembaruan kode CSS pada halaman HTML, namun ada beberapa CSS bawaan browser yang masih menempel pada web tersebut, seperti padding dan margin pada elemen tertentu. Selektor universal dapat digunakan untuk me-reset CSS tersebut.
Contoh :
* {
border: 1px solid blue;
}
p {
color: red;
}
* {
padding: 0;
margin: 0;
}
Dengan memberikan nilai 0, maka padding dan margin tersebut dapat dihilangkan.
Hasilnya :
Pseudo Selector di CSS
Pseudo selector adalah selektor yang digunakan untuk memilih elemen HTML yang ‘tidak terlihat’ atau bagian dari sebuah tag yang tidak bisa dipilih dengan selector biasa. Misalnya seperti state pada elemen, elemen before dan after, elemen ganjil, dan sebagainya.
Ada dua macam pseudo selector, yakni :
- pseudo-class selektor untuk state elemen;
- pseudo-element selektor untuk elemen semu di HTML.
Adapun perbedaan dari dua macam pseudo selector tersebut adalah pseudo-class pakai satu titik dua (:) sedangkan Selektor pseudo-element menggunakan tanda titik dua ganda (::)
Untuk lebih jelasnya, mari kita bahas lebih dalam…
Pseudo-class
Pseudo Class Selector adalah selector CSS yang digunakan untuk memilih bagian tertentu dalam HTML yang tidak tidak tertulis di dalam bagian dari HTML. Selektor ini dapat menentukan tampilan dari elemen pada state, misalnya ada sebuah elemen saat diklik, atau saat disentuh pointer, dan lain lain.
Format penulisan pseduo-class menggunakan titik dua setelah elemen.
selektor:psudo-class {
/* definisi properti*/
}
Ada beberapa selektor pseudo-class yang sering digunakan, diantaranya :
- :hover untuk mengubah warna tombol saat pointer pengguna diarahkan ke atasnya.
- :link untuk memlih link yang belum dikunjungi;
- :visited untuk memlih link yang sudah dikunjungi;
- :active untuk memilih elemen yang sedang aktif, seperti saat diklik;
- :focus untuk memlih elemen yang sedang dalam keadaan fokus, misal teks lagi diinput.
- :checked untuk memilih elemen yang dicentang pada checkbox.
Untuk lebih lengkap, silahkan kunjungi di MDN Doc.
Sebagai contoh, saya akan menggunakan selektor pseudo-class hover.
<html>
<head>
<title>Selector Pseudo-class</title>
<style>
a:hover {
color: red;
}
</style>
</head>
<body>
<h1>Contoh Selector Pseudo-class</h1>
<a href="#">Klik disini !!!</a>
</body>
</html>
Pada elemen <a>, kita akan memberikan warna merah saat dia di-hover atau disentuh pointer.
Hasilnya :
Pseudo-element
Jika pseudo-class selector lebih berfokus kepada kondisi dari HTML, maka pseudo-element selector akan memilih ‘potongan’ tag atau mengakses sebuah elemen semu yang sebelumnya tidak ada.
Berikut ini merupakan beberapa selektor pseudo-element yang sering digunakan.
- digunakan untuk mengubah font baris pertama paragraf.
- ::before untuk memilh elemen semu sebelum elemen;
- ::after untuk memilh elemen semu setelah elemen;
- ::marker untuk memilh marker pada list;
- ::placeholder untuk memilih teks placeholder pada elemen input teks;
Untuk lebih lengkap, silahkan kunjungi di MDN Doc.
Contoh kasus :
Misalnya kita ingin memberikan style pada baris pertama dari elemen paragraf, maka kita dapat menambahkan elemen <span> di baris pertama seperti ini.
<p>
<span>Jika pseudo-class selector lebih berfokus kepada kondisi dari HTML,</span>
maka pseudo-element selector akan memilih potongan tag atau mengakses
sebuah elemen semu yang sebelumnya tidak ada.
</p>
Setelah itu kita dapat memilih elemen span tersebut pada file CSS seperti ini:
p span {
color: red;
}
Cara ini sebenarnya sah-sah saja, namun kita harus membuat elemen baru lagi di dalam paragraf tersebut. Apalagi jika paragrafnya cukup panjang, tentu akan sangat merepotkan. Oleh sebab itulah kita menggunakan selektor pseudo-element.
Untuk memberikan style pada baris pertama dari elemen paragraf dengan selektor pseudo-element adalah menggunakan ::first-line.
Contoh Penggunaan pseudo-element.:
<html>
<head>
<title>Pseudo-element</title>
<meta content="">
<style>
p::first-line {
color: red;
}
</style>
</head>
<body>
<h1>Contoh Selector Pseudo-element</h1>
<p>
Jika pseudo-class selector lebih berfokus kepada kondisi dari HTML,<br>
maka pseudo-element selector akan memilih potongan tag atau mengakses<br>
sebuah elemen semu yang sebelumnya tidak ada.
</p>
</body>
</html>
Maka hasilnya:
Penutup
Begitulah pembahasan mengenai jenis selector pada CSS serta penggunaannya. Jadi, Sejauh ini kita sudah mempelajari landasan dasar dalam penggunaan CSS meliputi :
Maka untuk pembahasan artikel yang ke empat yaitu Belajar CSS #4 – Properti Color di CSS
