Baiklah sobat kali ini saya akan mengajarkan kepada sobat sekalian mengenai Selektor pada Css3. Pertanyaan ..? Mengapa sobat harus memperlajari selektor dahulu ?
Dasar Css yang perlu dipahami petama-pertama adalah selektor, yang berfungsi untuk memilih elemen-elemen HTML yang menjadi target dalam mengatur desain pada Css. Dengan memahami jenis-jenis selektor sobat bisa memilih selektor apa saja yang perlu digunakan dalam pembuatan desain css.
Baiklah ada beberapa jenis selektor yang saya akan jelaskan kepada sobat sekalian diataranya ialah :
1. Selektor Kelas
2. Selektor Pseudo Kelas
3. Selektor Atribut
4.Selektor Keturunan
5.Selektor Orang tua dan anak
Oke sebelum saya masuk keselektor saya ingin menjelaskan apa Itu Dom ? Dom (Document Object Model) adalah struktur yang selalu ada di setiap dokumen HTML. Dom dirancang agar pengaksesan di sebuah dokumen-dokumen HTML mudah dilakukan.
Contoh Dokumen Pada DOM :
<!DOCTYPE html>
<html>
<head>
<title>Motor</title>
</head>
<body>
<h1>Daftar Motor</h1>
<div id="motor">
<ul>
<li>Suzuki</li>
<li>Yamaha</li>
<li>Satria</li>
<li>Honda</li>
</ul>
</div>
</body>
</html>
Oke Sobat bisa dilihat pada coding diatas struktur <html> adalah akar Sedangkan pada <div> merupakan orang tua dari <ul> dan <li> merupakan cucu dari dari tag <div> dan tag <li> itu memiliki 4 saudari tag <li> lainnya seperti silsila keturuna atau bisa dikatakan sebagai bentuk akar.
1.Selektor Kelas
Slektor kelas itu seperti apa ? Selektor kelas yaitu menerapkan aturan dalam penyajian elemen-elemen yang memiliki atribut class yang disebutkan diselektor. Ciri-ciri dari selektor kelas diawali dengan tanda titik (.) dan diikuti dengan nama kelas (isi atribut class nilai class).
Contohnya :
<!DOCTYPE html>
<html>
<head>
<title>Selektor Kelas</title>
<style type="text/css">
.motor-indonesia{
color: white;
font-size: 20px;
background-color: blue;
}
</head>
<body>
<h1>Selektor Kelas</h1>
<ul>
<li class="motor-indonesia">yamaha1</li>
<li class="motor-luar-negeri">motor-luar</li>
<li class="motor-luar-negeri">yamaha1</li>
<li class="motor-luar-negeri">motor-luar</li>
<li class="motor-luar-negeri">motor-luar</li>
<li class="motor-indonesia">yamaha2</li>
<li class="motor-indonesia">yamaha3</li>
<li class="motor-indonesia">yamaha4</li>
<li class="motor-luar-negeri">motor-luar</li>
</ul>
Bisa kita lihat pada coding diatas class yang bernilai motor-indonesia akan dieksekusi dengan perintah text yang berwana putih dan memiliki background biru bisa kita lihat pada gambar dibawah ini :
2. Selektor Pseudo-Kelas
Apa itu Selektor Pseudo-Kelas Selektor ini tidak terhubung dengan nama kelas di elemn HTML. Selektor pseudo-kelas berkaitan dengan atribut-atribut khusus di elemen HTML .
Contohnya :
<html>
<head>
<title>Pseudo-kelas</title>
</head>
<style type="text/css">
div{
height:300px;
}
a:link{
color: blue;
}
a:hover{
color: white;
background-color: black;
}
a:visited{
color: green;
}
a:actiive{
color: red;
}
</style>
<body>
<h1>Selektor Peseudo-kelas</h1>
<div id="daftar_isi">
<p>Daftar Isi</p>
<a href="#bagian_awal">Pendahuluan</a>
<a href="#bagian_utama">Bagian Utama</a>
</div>
</body>
</html>
Di Css3, pseudo-kelas dirancang agar pemilihan elmen yang tidak berdasarkan struktur pohon dokumen dapat dilakukan dengan cara yang mudah. Ada beberapa pseudo-kelas yang direkomendasikan oleh W3C , Sperti :(first-chhild(), : last-child(),: only-child(),dan :nth-child().
Contohnya :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
div:first-child{
color: white;
font-size: 20px;
background-color: blue;
}
</style>
<body>
<h1>:Frist-Child</h1>
<selection>
<div>Achmad</div>
<div>Dyas</div>
<div>Azlansyah</div>
<div>Yunus</div>
<div>Muhaddop</div>
</selection>
</body>
</html>
Bisa kita lihat kembali bahwa dari pseudo-kelas pada frist-chil itu mengarah pada tag <div> paling pertama sesuai dengan perintah yaitu :frist-child() bisa dilihat hasil gambar dibawah ini:
Selanjutnya sobat dapat mencoba untuk mengganti menjadi :last-child() pada perintah ini mirip sekali dengan :frist-child() haya saja peletakan yang tersekeksi berada paling akhir atau paling bawah.
