Pengertian CSS Selector
CSS selector adalah salah satu rule set dari CSS yang fungsinya tidak berbeda jauh dengan namanya (Selector) yakni memilih suatu elemen yang ingin anda beri gaya atau style css. Selector adalah katakunci dan simbol yang digunakan pada CSS untuk menyeleksi atau memilih elemen HTML.
Jenis-jenis selector pada CSS
- Selector Tag
- Selector Class
- Selector ID
- Selector Atribut
- Selector Universal
- Selector Group
Selector Tag
Selector Tag disbut juga Type Selector. Selector ini akan memilih elemen berdasarkan nama tag HTML.
Contoh
h1 {
color: white;
}
Contoh diatas artinya pilih semua elemen <h1> lalu atur warna teksnya menjadi putih.
Selector Class
Selector class adalah selector yang memilih elemen berdasarkan nama class yang diberikan. Selector class dibuat dengan tanda titik di depannya.
Contoh Selector Class
.white {
color: black;
background: white;
padding: 5px;
}
Contoh diatas memiliki selector class bernama .white, cara menggunakan selector ini di HTML adalah dengan menambahkan selector ini pada atribut class tag HTML
Selector Class
Selector class adalah selector yang memilih elemen berdasarkan nama class yang diberikan. Selector class dibuat dengan tanda titik di depannya.
Contoh Selector Class
.white {
color: black;
background: white;
padding: 5px;
}
Contoh diatas memiliki selector class bernama .white, cara menggunakan selector ini di HTML adalah dengan menambahkan selector ini pada atribut class tag HTML
Contoh penempatan pada tag HTML
<p class="white">Saya sedang belajar di petanikode.com.</p>
Selector class dapat kita gunakan pada elemen yang kita inginkan dan bisa digunakan berulang kali pada halaman HTML yang sama.
Sebuah elemen HTML dapat menggunakan satu atau lebih class.
Contoh Selector Class
.text-white {
color: white;
}
.bg-teal {
background: teal;
}
Contoh HTML penggunaan kedua class tersebut pada satu elemen:
<h2 class="text-white bg-teal">Tutorial CSS untuk Pemula</h2>
Selector ID
Selector ID hampir sama dengan class. Bedanya, ID bersifat unik. Hanya boleh digunakan oleh satu elemen saja.
Selector ID ditandai dengan tanda pagar (#) di depannya.
#header {
background: teal;
color: white;
height: 100px;
padding: 50px;
}
Contoh Pada Kode HTML
<header id="header">
<h1>Selamat Datang di Website Saya</h1>
</header>
Selector ID hanya dapat kita gunakan sekali pada halaman HTML yang sama
Selector Atribut
Selector atribut adalah selector yang memilik elemen berdasarkan atribut. Selector ini hampir sama seperti selector Tag.
Contoh
input[type=text] {
background: none;
color: cyan;
padding: 10px;
border: 1px solid cyan;
}
Berdasarkan contoh diatas kita akan memilih semua elemen <input> yang memiliki atribut type='text'.
Contoh Pada Kode HTML
<input type="text" placeholder="ketik sesuatu..." />
Selector Universal
Selector universal adalah selector yang digunakan unutk menyeleksi semua elemen pada jangkaua (scope) tertentu.
Contoh
* {
border: 1px solid grey;
}
Berdasarkan contoh diatas semua elemen akan memiliki garis solid dengan ukuran 1px dan berwarna grey.
Selector universal bisanya digunakan untuk me-reset CSS.
Kenapa harus di-reset?
Pada halaman HTML, ada beberapa CSS bawaan browser seperti padding dan margin pada elemen tertentu.
Reset bertujuan untuk menghilangkan padding dan margin tersebut.
Contoh CSS Reset
* {
padding: 0;
margin: 0;
}
Maka semua elemen tidak akan memiliki padding dan margin.
Selector Group
Grouping Selector yakni memilih semua elemen HTML dengan style css yang sama. Untuk Group Selector, pisahkan setiap selector dengan tanda koma.
Lihatlah Contoh CSS berikut (elemen h1, h2, dan p memiliki style css yang sama)
h1, h2, p {
text-align: center;
color: red;
}
Berdasarkan contoh diatas elemen h1, h2, p akan memiliki style yang sama yaitu text akan ke tengah dan warna merah.
Contoh Pada Kode HTML
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
Perhatikan Contoh dibawah ini penerapan semua selector yang telah kita bahas diatas
Contoh Penerapan Pada HTML
&<!DOCTYPE html>
<html>
<head>
<style>
h1{
color: red;
}
.text-green {
color: green;
}
#text-yellow {
color: yellow;
}
input[type=text] {
background: none;
color: cyan;
padding: 10px;
border: 1px solid cyan;
}
* {
border: 1px solid grey;
}
h1, h2, h3{
font-size:20px
}
</style>
</head>
<body>
<h1>Selector Tag </h1>
<h2 class="text-green"> Selector Class </h2>
<h3 id="text-yellow"> Selector ID </h3>
<p>Selector Atribut Input</p>
<input type="text"/>
<p>Selector Universal perthatikan border elemen HTML</p>
<p>Selector Group perthatikan h1, h2 dan h3 memiliki ukuran font yang sama</p>
</body>
</html>
Sampai disini dulu tutorial dari saya tentang CSS dan nantikan tutorial selanjutnya, Semoga tutorial ini bermanfaat bagi anda, atas segala kekuranganya mohon dimaafkan dan jika ingin bertanya silahkan tinggalkan komentar.
Like, share & komen untuk dukung terus website ini agar terus berkembang, terimakasih.
