Apa itu CSS selector ?
CSS selector bisa diartikan penyeleksi yang fungsinya menyeleksi elemen HTML dengan atribut tertentu yang akan diubahsuaikan.
Format dasar penulisan CSS :Selektor Basic
Selektor basic terbagi menjadi 2 :Selektor Group Jenis selektor yang menyeleksi elemen berdasarkan :
tag elemen id elemen class elemen.Selektor Universal :
Jenis selektor yang menggunakan tanda (*) untuk menyeleksi seluruh elemen.Selektor [attribute]
Selektor ini terdiri dari :[attribute=value][attribute~=value][attribute|=value][attribute^=value][attribute$=value][attribute*=value]Selektor kombinator
Selektor yang menyeleksi elemen berdasarkan tag elemen induknya.
Selektor ini terbagi menjadi :Selektor turunan (dipisahkan dengan spasi)Selektor anak (dipisahkan dengan tanda >)Selektor untuk elemen yang bersebelahan (dipisahkan dengan tanda +)Selektor untuk elemen umum (dipisahkan dengan tanda ~)Selektor Pseudo (semu)
/*-- Penulisan CSS pseudo --*/ selector::pseudo-element { property: value; }
Penulisan selektor ::pseudo (double colon) atau :pseudo (single colon) secara fungsi :
Jika terdapat elemen yang sebelumnya menggunakan selektor :pseudo,
Kemudian ditambahkan selektor baru dalam baris CSS yang berbeda dengan selektor ::pseudo
maka ::pseudo (double colon) secara otomatis akan menggantikan fungsi :pseudo (single colon).
Dengan kata lain (double colon) memiliki dampak lebih kuat daripada (single colon).
Selektor pseudo atau selektor semu adalah selektor untuk elemen yang pada dasarnya secara visual tidak ada atau belum ditampilkan.
Elemen semu (Pesudo element) tidak terikat pada class ataupun id elemen.
Elemen semu bisa diaplikasikan cukup dengan <tag> saja, meskipun pada elemen tersebut terdapat id ataupun class.
Contoh :
Arahkan kursor di teks ini untuk melihat elemen semu (pseudo)Link berikut ini akan berwarna merah setelah diklik.
Klik link ini untuk melihat efek dari elemen semu.Selektor Pseudo select
1.::first-line
Berikut ini properti yang bisa diaplikasikan untuk penggunaan selektor ::first-line- font
- color
- background
- margin
- padding
- border
- text-decoration
- vertical-align (hanya jika elemen {float: none;}
- text-transform
- line-height
- float
- clear
2.::first-letter
Berikut ini properti yang bisa diaplikasikan untuk penggunaan selektor ::first-letter- font properties
- color properties
- background properties
- margin properties
- padding properties
- border properties
- text-decoration
- vertical-align (hanya jika elemen {float: none;}
- text-transform
- line-height
- float
- clear
4.::after
5.::marker
6.::selection
Selektor Basic - Group
Ini merupakan selektor yang paling umum digunakan.Selektor basic berfungsi untuk menyeleksi elemen berdasarkan <tag>, class dan id. Apabila dalam satu halaman terdapat beberapa atau banyak elemen dengan tag yang serupa maka secara otomatis elemen tersebut akan terkena dampak dari pengaturan CSS pada selector tersebut.
- Selektor berdasarkan tag elemen (menyeleksi semua elemen berdasakan tag-nya).
Contoh:
Pada elemen <div> terdapat beberapa elemen <p>.
Pada kolom CSS, selector yang digunakan adalah tag elemen p, maka semua elemen p akan terpengaruh oleh pengaturan dalam CSS tersebut.- html
<div> <p>
paragraf</p> <p>paragraf</p> <p>paragraf</p> </div> - css
p{ color: blue; background: yellow; }
Hasil :
paragraf
paragraf
paragraf
- html
- Menyeleksi identitas elemen id dengan diwakili tanda tagar (#) diawal nama selektor.
- html<div id='nama-id'>
elemen</div> - css#nama-id {/* kode CSS */}
- html<div id='nama-id'>
- Menyeleksi kelas elemen class diwakili dengan tanda titik (.) diawal nama selektor.
- html<div class='nama-class'>
elemen</div> - css.nama-class {/* kode CSS */}
- html<div class='nama-class'>
Selector sangat penting dalam coding desain template, untuk menyeleksi elemen dari sekian banyak elemen yang terdapat dalam template agar dengan mudah diubahsuaikan.
Contoh penggunaan CSS selector sederhana- Selector id
<span id='merah'>
Teks span pertama #merah</span>
<span id='biru'>Teks span kedua #biru</span>
CSS mengatur warna teks pada 2 elemen yang serupa, diseleksi berdasar id#merah {color:red;}
#biru {color:blue;} - Selector class
<span class='ijo' id='merah'>
Teks span pertama #merah</span> <span class='ijo' id='biru'>Teks span kedua #biru</span>
Mengatur latar belakang 2 elemen berdasar class, dimana letak selektor class berada dalam satu elemen dengan selektor id..ijo {background:greenyellow;} #merah {color:red;} #biru {color:blue;}
Contoh alternatif :
<p class='ijo' id='merah'> Teks paragraf pertama #merah</p>
<p class='ijo' id='biru'> Teks paragraf kedua #biru</p>
.ijo {
background:greenyellow
padding: 10px; /* jarak teks didalam tag <p>*/
margin: 5px; /* jarak antara kedua tag <p>*/
font-weight: bold; /* menebalkan format teks*/
}
#merah {color:red;}
#biru {color:blue;}