Komputer, Pemrograman
CSS, pseudo-class, pseudo-element: hover, child, target
Menggabungkan HTML dan CSS, Anda dapat mengatur semua elemen halaman web dengan benar. Dengan gaya, Anda dengan mudah mengubah tampilan blok atau garis apapun. Seringkali, seorang coder perlu melakukan tugas yang lebih kompleks - untuk mengubah tampilan bukan elemen itu sendiri, namun bagian individual atau keadaan tertentu. Dalam hal ini, CSS pseudo-class datang untuk menyelamatkan.
Pseudo-class mengerjakan prinsip yang sama seperti kelas reguler di markup, namun tidak hadir secara fisik di halaman. Dengan bantuan mereka, Anda dapat memilih item berdasarkan informasi yang tidak ada dalam dokumen, yang tidak dapat dipilih dengan pemilih biasa. Berikut adalah contoh sederhana: Anda memiliki tombol merah, dan Anda ingin biru menjadi biru saat Anda mengarahkannya. Secara teoritis hal itu bisa diimplementasikan di JavaScript, tapi kenapa kompleksitas seperti itu? Jauh lebih mudah digunakan : hover CSS. Dengan bantuannya, Anda dapat memberi parameter pada setiap unit yang akan bekerja hanya bila Anda mengarahkan kursor mouse.
Daftar pseudo-class CSS diperbarui secara berkala. Mungkin saat Anda membaca materi ini, beberapa yang baru akan muncul. Pertama, mari kita lihat yang ada dalam spesifikasi CSS3.
: Nth-of-type
Misalkan Anda memiliki daftar di mana Anda ingin menggunakan alternasi warna, yaitu baris pertama akan, misalnya ditulis dengan warna merah, dan baris kedua akan berwarna biru, yang ketiga berwarna merah lagi, yang keempat lagi berwarna biru. Sebelumnya, Anda harus membuat kelas baru untuk ini. Pengganti masa lalu menambahkan setiap elemen daftar ke kelas, dan kemudian mengubah penampilan mereka di style sheet. Itu tidak terlalu nyaman dan tercemar tata letaknya.
Sekarang semuanya lebih mudah. Gunakan kelas pseudo CSS: nth-of-type. Ini akan memberi kesempatan untuk mendapatkan efek visual yang diperlukan tanpa mengubah apapun dalam markup. Prinsip operasi sederhana: Anda menentukan pemilih, dan dalam tanda kurung setelah namanya, tuliskan sebuah rumus atau kata kunci yang akan menemukan elemen yang dibutuhkan. Sebagai contoh: nth-of-type (bahkan) menemukan semua elemen, dan: nth-of-type (ganjil) - ganjil. Ada sejumlah besar formula yang digunakan untuk kontrol yang paling akurat. Dalam tanda kurung, Anda dapat menentukan nomor - dalam hal mana gaya akan diterapkan ke elemen yang indeksnya sama dengan angka ini.
: Nth-anak
CSS pseudo-class ini mirip dengan yang sebelumnya, tapi tidak seperti bekerja secara eksklusif dengan anak-anak dari elemen yang dipilih. Misalnya, jika Anda ingin menggunakannya untuk menyesuaikan tampilan tag adalah induk dari
Untuk kontrol yang tepat, formula bisa digunakan. Mereka cukup sulit bagi seorang pemula, tapi perlu sedikit menggali sintaksnya, bagaimana keadaan menjadi lebih sederhana. Rumus terlihat seperti ini: a + b, di mana a adalah pengganda, dan b adalah offset. Misalnya, jika Anda menentukan n dalam tanda kurung, pseudo-class akan memilih semua anak (karena tidak ada kondisi tambahan yang ditentukan dalam bentuk a dan b). Jika Anda menentukan n + 2, semua elemen akan dipilih, kecuali yang pertama (karena offsetnya dua). Cara terbaik adalah mempelajari momen ini dalam praktik. Percobaan dengan komponen anak dan formula yang berbeda.
: Anak terakhir
Semuanya sederhana. CSS pseudo-class anak digunakan untuk memilih satu elemen tertentu. Ini memilih anak terakhir dari orang tua. Hal ini sering digunakan, misalnya untuk memilih baris terakhir tabel atau untuk menghapus lekukan dari blok terakhir untuk menghindari transfernya ke baris berikutnya.
: Nth-last-child
Dengan prinsip tindakan serupa dengan nth-child yang telah disebutkan sebelumnya, namun bertindak berlawanan arah, yaitu ketika digunakan, elemen akan bergerak dari bawah ke atas. Ini berguna jika Anda ingin menemukan beberapa item terakhir.
Anda mungkin berpikir bahwa elemen pseudo-class dan CSS ini tidak berguna, karena Anda juga bisa mencapai tujuan dengan menggunakan kelas normal. Tidak seperti itu. : Anak ke-n,: n-anak terakhir dan analog mereka sangat berguna saat mengerjakan proyek besar - misalnya, dalam kasus di mana blok tersebut memiliki sejumlah besar anak-anak. Menyiapkan kelas secara manual panjang dan sulit.
Pseudo-kelas manajemen negara
Bagaimana jika Anda perlu mengubah tampilan elemen dalam keadaan tertentu? Dalam hal ini, CSS pseudo-kelas menekan, bimbingan dan tindakan lainnya disediakan. Mari kita pertimbangkan mereka secara lebih rinci.
: Link
Ini adalah link CSS pseudo-kelas, tidak sembarang, tapi hanya yang belum pernah dikunjungi. Di dalamnya, Anda dapat menentukan gaya untuk elemen yang pengguna belum terlewatkan.
: Dikunjungi
Sebuah analog dari versi sebelumnya, yang hanya mengelola link yang sudah dikunjungi. Dengan menggabungkan dua kelas semu ini, Anda dapat menyesuaikan tampilan tag seperti yang Anda inginkan. Namun, perhatikan bahwa negara dihitung untuk browser tertentu dan disetel ulang setelah menghapus riwayat.
Pseudo-class: target CSS
Salah satu kelas pseudo yang paling menarik, yang dengan tepat digunakan sampai batas tertentu menggantikan penggunaan JavaScript. Ini memungkinkan Anda mengelola elemen yang pengenalnya ditentukan di bilah alamat halaman. Ya, pertama kali sulit dimengerti. Mari kita coba membuat sebuah contoh.
Misalkan kita memiliki 3 div boxes pada halaman dengan id tertentu: id1, id2, id3. Kami juga memiliki tiga tautan dengan nilai href yang sesuai: # id1, # id2, # id3. Bila Anda mengklik link pertama di address bar halaman setelah link ke halaman itu sendiri akan muncul id yang sesuai.
Di CSS, untuk semua blok div, display: none property ditentukan, yaitu secara default, tidak ditampilkan. Gunakan target: div dan atur tampilan nya: block property. Sekarang, ketika Anda mengklik link dengan href tertentu, blok dengan id yang sesuai akan diberi tampilan: blok, yang berarti akan mulai muncul di halaman! Jika anda klik link dengan id1, dll, saat anda klik link dengan id1, anda akan melihat blok dengan id1, dan seterusnya.
Masih belum ada yang jelas? Cobalah bereksperimen. Buat halaman dengan markup dan gaya di atas. Dalam beberapa menit Anda akan baik dalam segala hal.
Pseudo-class yang bisa diaplikasikan ke elemen apapun
Sebagian besar pseudo-class yang dijelaskan di atas memerlukan referensi untuk pekerjaan. Namun, tidak semua orang membutuhkan elemen . Sejumlah opsi dapat diterapkan ke bagian halaman manapun.
- : Aktif ditujukan untuk elemen styling dimana pengguna mengeklik tombol kiri mouse;
- : Hover - CSS untuk elemen yang melayang pengguna kursor;
- : Fokus - untuk bagian halaman yang saat ini fokus. Pseudo-class ini sering digunakan untuk bekerja dengan bentuk. Misalnya, jika Anda ingin menyorot string input untuk nama pengguna, saat pengunjung meletakkan kursor di dalamnya dan mulai mengetik karakter.
Ingat itu: aktif hanya aktif saat Anda menekannya. Segera setelah tombol kiri mouse berhenti bekerja, gaya yang diberikan padanya akan hilang dan elemen akan ditampilkan seperti yang ditampilkan secara default. Dalam kebanyakan kasus, pseudo-class ini digunakan untuk bekerja dengan tombol. Anda dapat mengatur mereka sejumlah besar negara bagian. Misalnya, secara default tombolnya akan berwarna biru, saat melayang - hijau, saat ditekan - merah, dll.
Tentu saja, pseudo-class sepenuhnya didukung hanya oleh browser modern. Misalnya, di IE6 dan 7, Anda tidak dapat menggunakan fokus, dan melayang dan aktif di IE6 bekerja hanya untuk referensi. Mari berharap Anda tidak perlu bekerja dengan browser semacam itu, dan jika perlu, gunakan komentar kondisional.
Kelas pseudo tambahan
Daftar yang tercantum di atas tidak terbatas pada daftar. Berkat CSS modern, Anda hanya dapat memilih elemen yang disertakan (: diaktifkan) atau hanya dinonaktifkan (: dinonaktifkan), hanya dicentang kotak centang dan radio (: dicentang). Singkatnya, kami akan menjelaskan beberapa opsi lagi yang dapat Anda gunakan untuk lebih mengontrol tampilan konten.
- : Hanya-anak - kemampuan untuk menerapkan gaya pada elemen yang merupakan satu-satunya anak;
- : Lang - untuk bekerja dengan elemen yang memiliki bahasa yang menggunakan atribut lang;
- : Root - digunakan untuk memilih elemen root. Dengan demikian, dalam HTML, ini adalah tag ;
- : Bukan alat yang sangat ampuh. Ini memungkinkan untuk membatasi penerapan gaya pada penyeleksi tertentu. Inilah contohnya: blue-color: not (span). Pemilih ini menerapkan gaya untuk semua elemen dengan kelas warna biru, jika tidak .
Daftar lengkap pseudo-class dapat meregang lebih dari satu halaman. Kebanyakan juru nama hanya menggunakan beberapa dari mereka dalam praktik, lebih memilih untuk mengelola negara bagian menggunakan JavaScript. Ya, memang nyaman, tapi ada sejumlah poin dimana hasil yang lebih efektif bisa dicapai dengan lebih mudah menggunakan pseudo-class yang sesuai.
Similar articles
Trending Now