Panduan Definitif untuk CSS Pseudo-Classes
Apakah Anda seorang pemula atau pengembang CSS yang berpengalaman, Anda mungkin pernah mendengarnya kelas semu. Pseudo-class yang paling terkenal mungkin : melayang, yang memungkinkan kita untuk menata elemen saat itu dalam keadaan melayang, yaitu ketika perangkat penunjuk, seperti mouse, diarahkan padanya.
Mengikuti konsep posting kami sebelumnya tentang margin: auto dan CSS Mengapung, kami melihat lebih dekat pada pseudo-class di posting ini. Kita lihat apa sebenarnya pseudo-class, bagaimana mereka bekerja, bagaimana kita dapat mengkategorikannya, dan bagaimana mereka berbeda dari elemen semu.
Apa itu Pseudo-Classes??
Pseudo-class adalah kata kunci yang bisa kita tambahkan ke pemilih CSS mendefinisikan keadaan khusus dari elemen HTML yang dimiliki. Kita bisa menambahkan pseudo-class ke pemilih CSS dengan menggunakan sintaksis usus besar : seperti ini: a: arahkan kursor ...
Kelas CSS adalah atribut yang dapat kita tambahkan ke elemen HTML yang ingin kita terapkan aturan gaya yang sama, seperti item menu teratas atau judul widget bilah sisi. Dengan kata lain, kita dapat menggunakan kelas CSS untuk kelompokkan atau kelompokkan elemen-elemen HTML yang serupa satu atau lain cara.
Kelas pseudo mirip dengan mereka dalam arti bahwa mereka juga digunakan untuk menambahkan aturan gaya ke elemen yang memiliki karakteristik yang sama.
Tapi sementara kelas asli ditetapkan pengguna dan dapat dilihat dalam kode sumber, contohnya Itu pekerjaan kelas CSS biasa adalah untuk mengklasifikasikan atau mengelompokkan elemen. Pengembang tahu bagaimana elemen mereka dikelompokkan: mereka dapat membentuk kelas seperti "menu-item", "tombol", "thumbnail", dll. Untuk dikelompokkan, dan kemudian gaya elemen serupa. Klasifikasi ini didasarkan pada karakteristik elemen yang ada diberikan oleh pengembang sendiri. Misalnya, jika pengembang memutuskan untuk menggunakan a Namun elemen HTML miliki karakteristik umum mereka sendiri berdasarkan status, posisi, sifat, dan interaksi mereka dengan halaman dan pengguna. Ini adalah karakteristik yang ada tidak biasanya ditandai dalam kode HTML, tapi kita bisa targetkan mereka dengan pseudo-class dalam CSS, misalnya: Ini adalah jenis karakteristik yang umumnya ditargetkan oleh kelas semu. Untuk memahami perbedaan antara kelas dan kelas semu dengan lebih baik, mari kita asumsikan kita menggunakan kelas tersebut Kita dapat menata elemen anak terakhir ini dengan CSS berikut: Tetapi apa yang terjadi ketika elemen terakhir berubah? Kita harus memindahkannya Kerumitan ini memperbarui kelas dapat diserahkan kepada agen pengguna, setidaknya untuk karakteristik yang umum di antara elemen-elemen (dan menjadi elemen terakhir adalah sama biasa dengan yang bisa didapat). Memiliki yang sudah ditentukan sebelumnya Ada banyak jenis pseudo-class, semuanya memberikan kita cara untuk menargetkan elemen berdasarkan fitur mereka yang tidak dapat diakses atau sulit diakses. Berikut daftar kelas pseudo standar di MDN. Kelas pseudo dinamis ditambahkan dan dihapus dari elemen HTML secara dinamis, berdasarkan negara tempat mereka bertransisi sebagai tanggapan atas interaksi pengguna. Beberapa contoh pseudo-class dinamis adalah Kelas pseudo berbasis negara ditambahkan ke elemen ketika mereka dalam keadaan statis tertentu. Beberapa contohnya yang paling terkenal adalah: Kelas pseudo berbasis negara paling populer harus menjadi Kelas struktural semu mengklasifikasikan elemen berdasarkan pada posisi mereka dalam struktur dokumen. Contoh paling umum adalah Ada juga berbagai kelas pseudo yang sulit diklasifikasi, seperti: Salah satu hal tersulit tentang pseudo-class adalah mungkin untuk memahami perbedaan antara Keduanya struktural kelas semu, dan tandai elemen spesifik di dalam elemen induk (wadah), tetapi dengan cara yang berbeda. Menganggap n adalah 2, lalu Mari kita lihat sebuah contoh. Mari kita lihat bagaimana gaya CSS pendek ini HTML dalam dua kasus berbeda. Dalam Kasus 1, elemen kedua di dalam a Tetapi jika elemen induk tidak memiliki paragraf kedua, Dalam contoh kita, the Paragraf 1, Anak 1 Paragraf 2, Anak 3 Dalam kasus kedua, kami memindahkan daftar tidak berurutan ke tempat ketiga, dan paragraf kedua akan datang sebelum itu. Ini berarti keduanya Paragraf 1, Anak 1 Paragraf 2, Anak 2 Jika Anda ingin membaca lebih lanjut tentang perbedaan antara Ketika kita berbicara tentang kelas semu, penting juga untuk dipahami bagaimana mereka berbeda dari elemen semu, agar tidak mencampurnya. Tapi sementara kita menggunakan pseudo-class untuk memilih elemen HTML itu ada di pohon dokumen tidak ditandai secara terpisah, elemen semu memungkinkan kita untuk menargetkan elemen itu biasanya tidak ada di DOM, baik sama sekali (mis Ada juga a perbedaan dalam sintaksis. Unsur semu umumnya diidentifikasi dengan titik dua Hal ini dapat menyebabkan kasus kebingungan seperti pada CSS2, elemen semu juga ditandai dengan satu titik dua - browser masih menerima sintaks titik dua tunggal untuk elemen semu. Ada juga perbedaan antara pseudo-class dan pseudo-elements di cara kita dapat menargetkan mereka dengan CSS. Elemen semu hanya dapat muncul setelah urutan penyeleksi, sedangkan pseudo-class dapat ditempatkan di mana saja dalam urutan pemilih CSS. Misalnya, Anda dapat menargetkan item daftar terakhir dari elemen daftar seperti ATAU Urutan pertama pemilih memilih anak terakhir di dalam Mari kita coba melakukan sesuatu yang mirip dengan elemen semu. Kode CSS di atas valid, dan teks "merah" akan muncul setelah itu Kode ini di sisi lain, tidak akan berfungsi, seperti kita tidak dapat mengubah posisi elemen semu di dalam urutan pemilih. Juga, hanya satu elemen pseudo yang dapat muncul di sebelah pemilih, sedangkan pseudo-kelas dapat dikombinasikan satu sama lain jika kombinasi itu masuk akal. Misalnya, untuk menargetkan elemen anak pertama yang juga hanya baca, kita dapat membuat kombinasi kelas pseudo Kode pemilih dengan a Penting untuk mengetahui hal itu ini adalah tidak CSS pseudo-class yang sedang ditargetkan oleh jQuery. Mereka disebut ekstensi pemilih jQuery. Ekstensi pemilih jQuery memungkinkan Anda targetkan elemen HTML dengan kata kunci yang lebih sederhana. Kebanyakan dari mereka adalah kombinasi dari beberapa penyeleksi CSS normal, yang direpresentasikan dengan satu kata kunci.Tujuan Pseudo-Classes
.terakhir untuk mengidentifikasi elemen terakhir dalam wadah induk yang berbeda.
li.last text-transform: huruf besar; option.last font-style: italic;
.terakhir kelas dari sebelumnya elemen terakhir ke yang sekarang.:anak terakhir kelas semu memang sangat berguna. Lewat sini, kita tidak harus menunjukkan elemen terakhir dalam HTML-code, tetapi kita masih bisa menata mereka dengan CSS berikut: li: last-child text-transform: huruf besar; opsi: last-child font-style: italic;
Jenis Utama Pseudo-Classes
1. Dynamic Pseudo-Classes
: melayang, :fokus, :link, dan : dikunjungi, yang semuanya dapat ditambahkan ke tag jangkar. a: visited color: # 8D20AE; .button: hover, .button: focus font-weight: bold;
2. Kelas Pseudo Berbasis Negara
: dicentang yang dapat diterapkan untuk kotak centang ():layar penuh untuk menargetkan elemen apa pun yang sedang ditampilkan dalam mode layar penuh:cacat untuk elemen HTML yang bisa dalam mode dinonaktifkan, seperti , , dan . : dicentang, yang menandai apakah kotak centang dicentang atau tidak. .checkbox: checked + label font-style: italic; input: dinonaktifkan background-color: #EEEEEE;
3. Kelas Pseudo Struktural
:anak pertama, :anak terakhir, dan : nth-child (n) - semua dapat digunakan untuk menargetkan elemen anak tertentu di dalam wadah berdasarkan posisinya - dan :akar yang menargetkan elemen induk level tertinggi di DOM. 4. Bermacam-macam Pseudo-Classes
: tidak (x) yang memilih elemen yang tidak cocok dengan pemilih x: lang (kode bahasa) yang memilih elemen yang kontennya dalam bahasa tertentu: dir (directionality) yang memilih elemen dengan konten directionality tertentu (kiri ke kanan atau kanan ke kiri). p: lang (ko) background-color: # FFFF00; : root background-color: # FAEBD7;
anak ke-n vs. jenis n Kelas Palsu
: nth-child dan : n-of-type kelas semu.: nth-of-child (n) menargetkan elemen yang merupakan anak kedua dari elemen induknya, dan : n-of-type (n) target yang kedua di antara Tipe yang sama elemen (seperti paragraf) di dalam elemen induk. / * paragraf yang juga anak kedua di dalam elemen induknya * / p: nth-child (2) color: # 1E90FF; // lightblue / * paragraf kedua di dalam elemen induk * / p: nth-of-type (2) font-weight: bold;
Kasus 1
nth-child (2) aturan tidak akan berlaku untuk itu. Meskipun ini anak kedua, itu benar tidak sebuah paragraf. nth-of-type (2) akan berlaku, karena aturan ini hanya mencari elemen, dan tidak peduli tentang yang lain jenis elemen (seperti daftar tidak berurutan) di dalam elemen induk.nth-of-type (2) aturan akan gaya paragraf kedua yaitu Anak 3.
Daftar 1 Tidak Terurut, Anak 2
Kasus 2
: nth-child (2) dan : n-of-type (2) aturan akan diterapkan, karena paragraf kedua juga merupakan anak kedua dari orang tuanya
Daftar 1 Tidak Terurut, Anak 3
: n-of-child dan : n-of-type pseudo-class, Trik CSS memiliki posting bagus di atasnya. Jika Anda menggunakan SASS, Family.scss dapat membantu Anda membuat rumit anak ke-n'Elemen-elemen yang dikoreksi.Pseudo-Classes vs Pseudo-Elements
Elemen semu, seperti ::sebelum dan ::setelah (lihat tutorial ini tentang cara menggunakannya) juga ditambahkan oleh agen pengguna, dan mereka dapat ditargetkan dan ditata dengan CSS juga, seperti pseudo-class. ::sebelum dan ::setelah) atau hanya sebagai bagian tertentu dari elemen yang ada (mis ::surat pertama atau :: placeholder). ::, sedangkan pseudo-class diidentifikasi dengan satu titik dua :.1. Tempat mereka di Urutan Pemilih CSS
ul>: last-child.red color: # B0171F;
ul> .red: last-child color: # B0171F;
.merah) dan yang kedua memilih anak terakhir di antara elemen yang memiliki .merah kelas di dalam ul> .red :: after display: block; konten: 'merah'; warna: # B0171F;
item dengan kelas .merah. ul> :: after.red display: block; konten: 'merah'; warna: # B0171F;
2. Jumlah Kejadian dalam Urutan Pemilih
:anak pertama dan : hanya-baca dengan cara berikut: : first-child: read-only color: #EEEEEE;
jQuery Selector Extensions
: sintaksis tidak selalu merupakan pseudo-class CSS yang tepat. Jika Anda pernah menggunakan jQuery, maka Anda mungkin telah menggunakan banyak pemilihnya : sintaksis, misalnya $ (': kotak centang'), $ (': input') dan $ (': terpilih'). / * Ubah font semua elemen HTML yang berhubungan dengan input, seperti tombol, pilih, dan input * / $ (": input") .css ("font-family", "courier new")
