Masih membahas mengenai CSS, dalam tutorial ini kita akan membahas mengenai Pseudo Class Selector.
Pseudo Class Selector adalah salah satu jenis selector css yang digunakan untuk mengakses bagian elemen tertentu pada HTML, yang secara default tidak terlihat atau bisa dikatakan elemen HTML yang tidak dapat diakses secara langsung.
Pseudo Class Selector memiliki beberapa jenis yang bisa anda gunakan, kita akan pelajari hal tersebut satu persatu.
Dynamic Pseudo Class Selector
Pseudo Class Selector jenis ini digunakan untuk mencari struktur elemen HTML berdasarkan Interaksi yang dilakukan oleh user.
Dalam tutorial sebelumnya kita telah mempelajari mengenai bagaimana cara mengatur hyperlink dengan CSS.
Dimana kita telah mempelajari Event :hover, :active, :visited, event itu adalah salah satu bagian dari Dynamic Pseudo Class Selector.
Selain dari Event tersebut kita juga akan mempelajari salah satu event lagi yaitu event :focus
event :focus ini juga salah satu bagian dari Dynamic Pseudo Class Selector, perhatian skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
input:focus
{
background-color: yellow;
border:solid cyan 3px;
}
</style>
</head>
<body>
<form>
<p>Username <input type="text"></p>
<p>password <input type="password"></p>
</form>
</body>
</html>Semisal kita simpan dengan nama event_focus.html, lalu kita buka di browser maka hasilnya :
Keterangan :
- Ketika inputan form kita klik untuk mengisikan text didalamnya, inputan tersebut akan berwarna kuning dan memiliki border berwarna biru muda (cyan) hal tersebut karena kita memberikan selector input:focus yang artinya akan mencari tag input yang dalam keadaan terpilih.
Structural Pseudo Class Selector
Structural Pseudo Class Selector adalah penentuan elemen HTML berdasarkan Pola ataupun berdasarkan urutan pada elemen HTML itu sendiri.
Untuk Structural Pseudo Class Selector memiliki 8 Bagian yang bisa anda gunakan.
- :first-child
- :last-child
- :first-of-type
- :last-of-type
- :nth-child()
- :nth-last-child()
- :nth-of-type()
- :nth-last-of-type()
:first-child dan :last-child
Digunakan untuk memilih turunan pertama dan turunan terakhir pada parent tertentu, untuk lebih memahami silahkan perhatikan skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p:first-child
{
background-color: yellow;
}
p:last-child
{
background-color: green;
}
</style>
</head>
<body>
<div>
<p>Paragraf 1</p>
<p>Paragraf 2</p>
<p>Paragraf 3</p>
</div>
</body>
</html>Semisal kita simpan dengan nama first-last-child.html, lalu kita buka di browser :
Keterangan :
- Paragraf 1 akan terbaca sebagai tag p yang merupakan child pertama (:first-child) sehingga mendapatkan warna kuning.
- Paragraf 3 akan terbaca sebagai tag p yang merupakan child terakhir (:last-child) sehingga mandapatkan warna hijau
:first-of-type dan :last-of-type
Bagian ini sebenarnya sama dengan :first-child dan :last-child yang membuat berbeda adalah :
- :first-of-type akan membaca disetiap turunan pertama pada setiap tipenya
- :last-of-type akan membaca disetiap turunan terakhir pada setiap tipenya
agar tidak bingung silahkan perhatikan skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p:first-of-type
{
background-color: yellow;
}
p:last-of-type
{
background-color: cyan;
}
span:first-of-type
{
background-color: yellow;
}
span:last-of-type
{
background-color: cyan;
}
</style>
</head>
<body>
<div>
<p>Paragraf 1 div ke 1</p>
<p>Paragraf 2 div ke 1</p>
<p>Paragraf 3 div ke 1</p>
</div>
<div>
<p>Paragraf 1 div ke 2</p>
<p>Paragraf 2 div ke 2</p>
<span>Ini text dalam span bagian 1</span>
<span>Ini text dalam span bagian 2</span>
<span>Ini text dalam span bagian 3</span>
</div>
</body>
</html>semisal kita simpan dengan nama first-last-type-child.html, lalu kita buka di browser maka hasilnya :
Keterangan :
- (paragraf 1 div ke 1), (paragraf 1 div ke 2), dan (text span bagian 1) mendapatkan warna background kuning, karena merupakan turunan pertama disetiap tipenya (p dan span)
- (paragraf 3 div ke 1), (paragraf 2 div ke 2), dan (text span bagian 3) mendapatkan warna background cyan, karena merupakan turunan pertama disetiap tipenya (p dan span)
:nth-child() dan :nth-last-child()
Bagian ini digunakan untuk menentukan elemen HTML berdasarkan urutan yang ditentukan, perbedaan dari 2 bagian ini adalah :
- :nth-child() akan menghitung urutan dari bagian awal
- :nth-last-child() akan menghitung urutan dari bagian akhir
anda diharuskan untuk memberikan parameter pada nth-child ataupun :nth-last-child, jadi sama seperti konsep fungsi pada pemrogaman, untuk parameternya dapat menggunakan angka atau juga bisa menggunakan odd (ganjil) dan even (genap)
Untuk contohnya adalah sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p:nth-child(4)
{
background-color: yellow;
}
p:nth-last-child(4)
{
background-color: cyan;
}
p:nth-child(odd)
{
color: red;
}
p:nth-child(even)
{
color: black;
}
</style>
</head>
<body>
<div>
<p>Paragraf 1</p>
<p>Paragraf 2</p>
<p>Paragraf 3</p>
<p>Paragraf 4</p>
<p>Paragraf 5</p>
</div>
</body>
</html>semisal kita simpan dengan nama nth-child.html, lalu kita buka di browser maka hasilnya adalah :
Keterangan :
- Pada css ada perintah :nth-child(4) kita berikan background-color:yellow, karena itu css akan mencari turunan ke – 4 dari atas dan memberikan background warna kuning.
- Pada css ada perintah :nth-last-child(4) kita berikan background-color:cyan, karena itu css akan mencari turunan ke – 4 dari bawah dan memberikan background warna cyan.
- Pada css ada perintah :nth-child(odd) kita berikan color:red, karena itu css akan mencari turunan yang ganjil dan merubah warna textnya menjadi merah.
- Pada css ada perintah :nth-child(even) kita berikan color:black, karena itu css akan mencari turunan yang genap dan merubah warna textnya menjadi hitam.
:nth-of-type() dan nth-last-of-type()
Selector ini memiliki konsep yang sama dengan :nth-child() dan :nth-last-child(), tetapi untuk :nth-of-type() dan :nth-last-of-type() akan mencari pola dari turunan dan harus dari tipe yang sama sesuai yang ditentukan, untuk memahami konsepnya silahkan perhatikan skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p:nth-child(2)
{
background-color: yellow;
}
p:nth-child(4)
{
background-color: blue;
}
p:nth-of-type(6)
{
background-color: green;
}
</style>
</head>
<body>
<div>
<p>Paragraf 1</p>
<p>Paragraf 2</p>
<p>Paragraf 3</p>
<h1>Ini bukan paragraf</h1>
<p>Paragraf 4</p>
<p>Paragraf 5</p>
<p>Paragraf 6</p>
<p>Paragraf 7</p>
</div>
</body>
</html>Semisal kita simpan dengan nama nth-of-type.html, lalu kita buka di browser maka hasilnya adalah :
Keterangan :
- Paragraf kedua mendapatkan background warna kuning karena kita memberikan p:nth-child(2) dengan background warna kuning
- Pada style berikutnya kita menuliskan p:nth-child(4) kita berikan property background-color:blue tetapi coba perhatikan pada urutan turunan ke-4 karena bukan tag <p> sehingga perintah ini diabaikan
- Style berikutnya kita menuliskan p:nth-of-type(6) kita berikan property background-color:green, sehingga mencari turunan ke-6 dengan tag <p> dan memberikan warna hijau pada background
- Jadi bisa disimpulkan untuk :nth-child akan mencari pola turunan, dan ketika pola yang ditentukan bukan elemen yang ditentukan maka perintah akan diabaikan, berbeda dengan :nth-of-type akan mencari turunan yang memiliki tipe yang sama sesuai dengan yang ditentukan.
- Untuk :nth-last-of-type() memiliki konsep yang sama dengan :nth-of-type() hanya saja perhitungannya dimulai dari bagian akhir.
UI Pseudo Class Selector
Berikutnya kita akan membahas mengenai beberapa pseudo class selector yang berhubungan dengan UI (User Interface), ada beberapa selector yang bisa anda gunakan, perhatikan skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<style>
input:disabled {
background-color: blue;
color:white;
}
input:read-only {
background-color: red;
color:white;
}
input:required {
background-color: green;
color:white;
}
p:empty {
width: 200px;
height: 20px;
background-color: green;
}
</style>
</head>
<body>
<form action="">
<div>
<input type="text" disabled value="Testing">
</div>
<div>
<input type="text" readonly value="Testing Readonly">
</div>
<div>
<input type="text" required value="Testing Required">
</div>
</form>
<hr/>
<p></p>
<p>Paragraf 1</p>
<p>Paragraf 2</p>
</body>
</html>Semisal kita simpan dengan nama ui-pseudo-class-selector.html, lalu kita buka di browser maka hasilnya adalah seperti berikut :
Keterangan :
- Pada inputan text pertama (dengan text “Testing”) mendapatkan warna background biru, karena inputan tersebut bersifat disable, sehingga css input:disable akan diaktifkan, sehingga menjadikan background warna biru dan text warna putih.
- Pada inputan text pertama (dengan text “Testing Readonly”) mendapatkan warna background merah, karena inputan tersebut bersifat readonly, sehingga css input:read-only akan diaktifkan, sehingga menjadikan background warna merah dan text warna putih.
- Pada inputan text pertama (dengan text “Testing Required”) mendapatkan warna background hijau, karena inputan tersebut bersifat required, sehingga css input:required akan diaktifkan, sehingga menjadikan background warna hijau dan text warna putih.
- Pada paragraf sebelum paragraf 1 mendapatkan background warna hijau, hal tersebut dikarenakan text pada bagian paragraf kita kosongkan sehingga selector p:empty akan diaktifkan dan memberikan background warna hijau, dengan ukuran 200 pixel untuk lebar dan 20 pixel untuk tinggi
Cukup Banyak ya teman – teman Pseudo Class Selector, itu hanya beberapa yang bisa warung belajar bahas dalam tutorial kali ini, masih banyak sekali jenis Pseudo Class Selector, anda bisa belajar di situs w3schools.com untuk lebih lanjut, nah sekian dulu tutorial kali ini, jika ada yang ingin didiskusikan silahkan di kolom komentar, baik sekian dulu tutorial kali ini, sampai jumpa di tutorial selanjutnya,