Peran penyeleksi kelas semu dalam CSS bisa dikatakan sangat penting. Jika CSS tidak memiliki penyeleksi kelas semu, banyak efek yang harus diselesaikan dengan bantuan js sulit untuk dipertahankan. Beban kerja yang berat bagi programmer juga bertentangan dengan tujuan CSS, yaitu untuk meningkatkan efisiensi pengembangan dan menyelesaikan pengembangan berkualitas lebih tinggi di dunia yang sama.
Penyeleksi kelas semu mencakup penyeleksi objek kelas semu dan kelas semu. Penyeleksi kelas semu menggunakan titik dua (:) sebagai pengidentifikasi awalan. Anda dapat menambahkan pemilih sebelum titik dua untuk membatasi cakupan aplikasi kelas semu. Setelah titik dua adalah nama objek kelas semu dan kelas semu. Tidak ada spasi sebelum dan sesudah titik dua, jika tidak maka akan dianggap a pemilih kelas, seperti yang ditunjukkan pada gambar.
Tabel berikut berisi sebagian besar penyeleksi kelas semu:
Kelas semu dinamis
Kelas semu dinamis adalah jenis gaya perilaku. Gaya ini tidak ada dalam HTML dan hanya dapat diterapkan saat pengguna berinteraksi dengan halaman. Pemilih kelas semu dinamis mencakup dua bentuk:
Anchor pseudo-class, yang merupakan gaya paling umum dalam tautan, seperti :link, :visited.
Kelas semu perilaku juga disebut kelas semu operasi pengguna, seperti :hover, :aktif, dan :fokus.
Demi kemudahan dalam pengajaran, saya menulisnya sebagai inline. Pada aplikasi sebenarnya, tidak disarankan menggunakan inline.
:link
Atur gaya hyperlink sebelum melompat.
<ahref=#target=_blank>Lompat</a>
Jika Anda ingin mengatur style sebelum hyperlink di atas agar memiliki warna font merah dan tanpa garis bawah, Anda bisa mengaturnya seperti ini.
:dikunjungi
Kelas semu ini kebalikan dari :link. :link adalah gaya sebelum tautan, dan :visited adalah gaya setelah tautan, yaitu gaya hyperlink setelah dikunjungi.
<ahref=#target=_blank>Lompat</a>:li
Dalam pembelajaran sehari-hari, setiap orang dapat menulis tautan sebelum dan sesudahnya secara bersamaan, yang memudahkan, cepat, dan semantik; hal ini menyebabkan banyak siswa tidak mengetahui bahwa kedua kelas semu ini memiliki efek cakupan. Contoh berikut dapat membantu Anda mendapatkan pemahaman umum:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a:link{color:red;text-decoration:none;}a:visited{color:green; text-decoration:underline;}</style></head><body><ahref=login.htmltarget=_blank>Lompat</a></body></html>Kode di atas merupakan link lompat dari halaman HTML ke halaman login. Rendering setelah dijalankan adalah sebagai berikut:
: melayang
Pemilih kelas semu :hover digunakan untuk efek penataan gaya saat pengguna menggerakkan mouse ke atas elemen. Ini tidak hanya digunakan untuk hyperlink tetapi juga dapat diterapkan ke banyak elemen, seperti tombol. Saat Anda mengarahkan mouse ke atasnya, Anda akan menemukan bahwa warna latar belakang utara tombol menjadi lebih gelap atau berubah warna Tentu saja, ada cara lain untuk mengaturnya, tapi tidak ada keraguan: hover adalah cara paling sederhana dan tercepat. Di sini saya pertama-tama akan memperkenalkan teknik penggunaan hyperlink, lalu memperluas dan menggunakannya untuk mengubah efek setelah mouse bergerak di atas elemen.
Jika Anda ingin elemen berubah warna saat mouse diarahkan ke elemen tag, kodenya adalah sebagai berikut:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a:hover{color:blue;}</style></head><body><ahref= #target=_blank>Lompat</a></body></html> 
Memperluas
Kode strukturnya adalah sebagai berikut:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{width:100px;height:50px;line-height:50px;color:red;background:orange ;text-align:center;}</style></head><body><div>:hover</div></body></html>Bila efek yang diinginkan adalah ketika mouse digerakkan ke atas elemen div maka warna background akan berubah menjadi hitam dan font menjadi putih. Kodenya adalah sebagai berikut:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{width:100px;height:50px;line-height:50px;color:red;background:orange ;text-align:center;transition:all1s;}div:hover{background:black;color:white;</style></head><body><div>:hover</div></body>< /html>:aktif
:aktif digunakan untuk efek gaya ketika pengguna mengklik suatu elemen. Ini sebagian besar digunakan dalam kontrol formulir. Saat pengguna mengklik, ini memiliki efek menekan tombol. Untuk alasan yang sama, saya meletakkan ini di area ekstensi.
Ketika hyperlink diklik, saya ingin mengubah warna font hyperlink tersebut. Kode implementasinya adalah sebagai berikut:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a{color:red;}a:active{color:blue;}</style></head ><body><ahref=#target=_blank>Lompat</a></body></html>Memperluas
Contoh ini menggunakan div untuk meniru sebuah tombol. Gaya tombol yang disertakan dengan HTML sulit dijelaskan dalam satu kata. Sangat mudah untuk meniru dan mengontrol gaya tersebut.
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{width:100px;height:50px;line-height:50px;text-align:center;background :green;font-size:24px;font-weight:bold;border-radius:15px;margin:150pxauto;cursor:pointer;}div:active{background:orange;color:white;}</style></head ><body><div>Tombol</div></body></html>:fokus
:fokus digunakan untuk menata efek ketika elemen multiguna menjadi fokus. Ini sering digunakan pada elemen kontrol formulir.
Kode struktur:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title></head><body><formaction=#method=post><inputtype=text></form></ tubuh></html>
Saat Anda ingin input mendapatkan fokus, warna latar belakangnya adalah #CCC, dan kode implementasinya adalah:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>forminput:focus{background:#CCC;}</style></head><body><formaction =#metode=post><inputtype=text></form></body></html>Anda dapat melihat efek gaya mengubah warna latar belakang menjadi warna target setelah input mendapat fokus.
Hal yang perlu diperhatikan:
(1) Pemilih kelas semu di atas mengikuti prinsip urutan, yaitu tautan ke yang dikunjungi untuk mengarahkan kursor dan kemudian ke kelas semu yang aktif.
(2) Arahkan kursor dan aktif termasuk dalam kategori semu perilaku pengguna.
anak pertama
Kelas pseudo anak pertama dapat mencocokkan elemen anak pertama di bawah elemen induk yang ditentukan. Misalnya, ul li:anak pertama dapat mencocokkan elemen <li> pertama di bawah elemen <ul>.
<!DOCTYPEhtml><html><head><style>ulli:first-child{/*Cocokkan tag <li>pertama di bawah <ul>*/color:red;}</style></head>< body> <ul><li>pemrograman dotcpp</li><li>pemrograman dotcpp</li><li>pemrograman dotcpp</li></ul></body></html>Hasil berjalan:
anak ast
Mirip dengan anak pertama, kelas semu anak terakhir dapat mencocokkan elemen anak terakhir di bawah elemen induk yang ditentukan. Misalnya, ul li:anak terakhir dapat mencocokkan elemen <li> terakhir di bawah elemen <ul> contoh kodenya adalah sebagai berikut:
<!DOCTYPEhtml><html><head><style>ulli:last-child{/*Cocokkan tag <li>terakhir di bawah <ul>*/color:red;}</style></head><body > <ul><li>pemrograman dotcpp</li><li>pemrograman dotcpp</li><li>pemrograman dotcpp</li></ul></body></html>Hasil berjalan:
anak ke-n
Kelas semu nth-child baru di CSS3. Ia dapat mencocokkan elemen anak ke-n di bawah elemen yang ditentukan. Misalnya, ul li:nth-child(2) dapat mencocokkan elemen <li> kedua di bawah elemen <ul> .Contoh kodenya adalah sebagai berikut:
<!DOCTYPEhtml><html><head><style>ulli:nth-child(2){/*Cocokkan tag <li>kedua di bawah <ul>*/color:red;}</style></ head> <body><ul><li>pemrograman dotcpp</li><li>pemrograman dotcpp</li><li>pemrograman dotcpp</li></ul></body></html>Hasil berjalan:
