Hari ini kita akan melihat konsep pemilih CSS dan bagaimana kita dapat menggunakannya untuk mempersingkat markup HTML, membuatnya lebih bersih.

Pemilih CSS adalah elemen yang akan kita terapkan properti CSSnya. Kata "pemilih" sudah cukup jelas; artinya pilihan.

P (warna: merah) rentang div (latar belakang: hijau) ul li (gaya daftar: tidak ada)

Pemilih kelas dan id

Dalam contoh di atas kita memiliki 3 penyeleksi - p, div span, ul li. Artinya, seluruh file gaya kita terdiri dari penyeleksi dan propertinya. Cara paling mudah dan intuitif, terutama bagi pemula, adalah mengambil nama kelas dari tag atau pengenal unik(tanda pengenal). Untuk menetapkan kelas atau pengidentifikasi ke tag apa pun, kita harus menentukannya di antara atribut tag tersebut. Tag tertentu dapat memiliki maksimal 1 pengidentifikasi dan jumlah kelas yang tidak terbatas. Contoh:

Yang harus Anda perhatikan:

• Kelas dan pengidentifikasi dapat ditetapkan ke semua (semua) tag.
• Setiap id bersifat unik dan tidak dapat diulang dalam halaman yang sama, tidak seperti kelas!
• Kelas yang sama dapat ditetapkan ke tag apa pun dan dapat diulang beberapa kali pada suatu halaman.
• Jika kita ingin menetapkan beberapa kelas ke tag tertentu, kita cukup menentukannya dengan dipisahkan oleh spasi.
• Nama kelas dan pengenalnya boleh sama, tetapi selain namanya, tidak akan ada kesamaan di antara keduanya.

Bagaimana cara merujuk ke kelas atau id dalam file stylesheet (CSS)?

Mari kita lihat sebuah contoh:

#pertama (warna: merah;) /* mengakses id yang disebutkan terlebih dahulu */.detik (warna: biru;) /* mengakses kelas dengan nama kedua */#pertama .kedua (warna: oranye;) /* mengakses kelas dengan nama kedua HANYA jika berada DI DALAM tag dengan pengenal terlebih dahulu */.first .third (warna: abu-abu;) /* merujuk ke kelas bernama ketiga HANYA jika berada DI DALAM tag dengan kelas pertama */

Dalam kasus kami, dua instruksi terakhir tidak akan berfungsi, karena kami tidak memiliki kelas yang bersarang di dalam tag dengan atribut tertentu. Seperti yang mungkin telah Anda perhatikan, untuk menunjukkan bahwa kita merujuk secara khusus ke id, kita perlu memberi tanda pagar (#) di depan namanya tanpa spasi; jika kita mengacu pada suatu kelas, maka kita harus memberi tanda titik (. ) di depan nama kelas.

Menggunakan kelas dan pengidentifikasi sangat mudah, tetapi ini meningkatkan kemampuan kita markup HTML, idealnya (yang tidak pernah ada) kita tidak menggunakannya sama sekali, sebagai gantinya kita akan menggunakan kombinasi dan pengelompokan penyeleksi, sisa artikel akan membahasnya, tapi! Namun ini tidak berarti bahwa Anda harus sepenuhnya mengabaikan penggunaan kelas dan pengidentifikasi, Anda hanya perlu mengingat bahwa sering kali, alih-alih membuat kelas atau id baru, Anda dapat menggunakan teknik yang dijelaskan di bawah ini dan teknik tersebut juga dapat menjadi cukup nyaman.

Apa perbedaan antara kelas dan id?

Selain perbedaan di atas, perlu diperhatikan juga bahwa properti yang ditentukan oleh id memiliki prioritas lebih tinggi daripada properti yang ditetapkan ke kelas. Artinya, jika kita menulis:

Kemudian warna teks akan menjadi merah, meskipun kelasnya memiliki kode yang lebih rendah dan jika mereka memiliki prioritas yang sama maka teks akan berubah menjadi biru.

Berdasarkan sintaksis: dalam kasus dengan kelas, kita dapat memilih tag mana yang harus dimiliki kelas ini, untuk melakukan ini, setelah nama tag TANPA spasi, kita harus merujuk ke kelasnya. Contoh:

Kelas saya (properti) /* akan berlaku untuk semua tag yang berisi kelas myclass */ div.kelasku (properti) /* hanya berlaku untuk tag div yang berisi kelas myclass */

Ini juga akan berfungsi untuk id, tetapi entri seperti itu tidak ada artinya, karena id tidak dapat diulang pada halaman, yang berarti cukup mendeklarasikan id tanpa tag yang merujuknya:

Tampaknya hanya ada satu perbedaan yang tidak ditentukan tersisa, dan ini menyangkut topik yang tidak saya rencanakan untuk saya bahas dalam waktu dekat di blog ini - Javascript. Namun saya tetap harus memberi tahu Anda tentang hal ini: jika Anda ingin mengakses suatu elemen menggunakan Javascript, maka memiliki id untuk elemen tersebut akan sangat memudahkan untuk tujuan ini. Untuk merujuk ke elemen berdasarkan kelasnya di Javascript tidak ada fitur bawaan seperti itu, Anda harus menggunakan fungsi pembantu + ini tidak selalu lintas-browser.

Intinya: kami menggunakan id dan kelas, tetapi dalam jumlah sedang, selalu bertanya pada diri sendiri apakah mungkin untuk melakukannya tanpa mereka dan seberapa disarankan.

Pemilih terkait

Div p (warna: hijau;) /* Pemilih berdasarkan anak */ p(warna:merah;) /* pemilih berdasarkan tag */

Tapi seperti yang sudah saya tulis di artikel sebelumnya, dalam kasus pertama, properti CSS akan diterapkan ke semua tag p yang bersarang di kedalaman APAPUN dari tag div. Namun bagaimana jika kita ingin menerapkan properti hanya pada keturunan langsung, yaitu pada sarang tingkat pertama:

Dalam hal ini, kita harus menggunakan apa yang disebut pemilih terkait; braket sudut digunakan untuk menunjukkannya; Anda dapat menggunakan spasi atau membiarkannya, saya tidak akan merekomendasikannya:

Div>p (warna: biru;) /* hanya sarang tingkat pertama */ div p (warna: biru;) /* benar-benar semua paragraf di dalam div */

Pemilih universal

Kami telah menyelesaikannya, kami sudah memiliki 3 jenis pemilih di gudang senjata kami, sekarang saya ingin memberi tahu Anda tentang pemilih yang sangat tidak biasa yang menonjol di antara yang lainnya - inilah yang disebut pemilih universal, yang ditunjukkan oleh tanda bintang (*):

* (margin: 0; bantalan: 0;)

Beginilah cara semua orang memulai untuk saya proyek baru, saya menyarankan Anda untuk melakukan hal yang sama. Pemilih universal berlaku untuk semua elemen halaman (tag), tetapi tidak memiliki prioritas (hanya di bawah tidak ada prioritas sama sekali). Biasanya digunakan untuk mengganti properti CSS yang disetel browser secara default untuk beberapa tag. Bayangkan, ini benar-benar terjadi! Browser menyetel propertinya sendiri untuk beberapa tag secara default, misalnya tag hyperlink biru teks dan garis bawah, mereka mengatur padding ke tag body, dll. Kami sama sekali tidak perlu mengingat, mengetahui, dan menggunakan ini, jadi kami segera menghapus properti yang paling dangkal menggunakan pemilih universal, namun, saya tidak akan merekomendasikan menambahkan apa pun ke dalamnya (atau menambahkan, tetapi hati-hati), meskipun yang terkecil (null ) prioritas pemilih universal, dalam beberapa kasus masih dapat menimpa properti lain untuk Anda, jadi ingatlah hal itu.

Omong-omong, saat bekerja dengan penyeleksi, seperti halnya pekerjaan apa pun yang terkait dengan tata letak tata letak, akan sangat nyaman menggunakan elemen tampilan halaman. Jika Anda belum mengetahui hal-hal seperti Opera Dragonfly, Firebug dan webspectors secara umum, maka tanpa berlebihan Anda perlu segera membaca artikel pada link di atas! Dan siapa pun yang pernah menggunakan hal serupa, silakan ikuti saya.

Kelas semu

Berbeda dengan kelas, kelas semu tidak perlu ditentukan dalam markup HTML, melainkan dihitung oleh browser itu sendiri; Kami memiliki 4 kelas semu statis dan 3 kelas semu dinamis, tidak termasuk CSS 3, lebih lanjut tentang itu menjelang akhir. Yang statis termasuk (:first-child, :link, :visited, :lang()):

Hasil:

Tentu saja, Anda dapat menggabungkan penyeleksi sesuai keinginan, misalnya:

Div>span p:anak pertama (warna: hijau;) /*akan berfungsi jika p adalah anak pertama dari induknya dan berada di dalam tag span yang merupakan turunan langsung dari tag div */

Nama kelas semu yang disajikan di atas berbicara sendiri tentang anak pertama - anak pertama.

Dua kelas semu statis berikut hanya berlaku untuk tag hyperlink (:link, :visited), keduanya menerapkan properti CSS bergantung pada apakah tautan ini pengguna tertentu atau tidak:

A: tautan (warna: biru;) /* mengatur warna biru untuk link yang belum dikunjungi, dan secara default digarisbawahi */ a:dikunjungi (warna: hijau; dekorasi teks: tidak ada;) /* link yang dikunjungi akan memiliki teks berwarna merah, hilangkan garis bawah */

Pseudo-class:lang() digunakan untuk menentukan gaya yang berbeda tergantung pada bahasanya. Bahasa yang digunakan untuk menerapkan desain ditunjukkan dalam tanda kurung. Ini dapat digunakan, misalnya, untuk mengatur gaya yang berbeda tanda kutip dalam kutipan:

T:lang(de) (kutipan: "\201E" "\201C";) /* kutipan untuk bahasa Jerman */ q:lang(en) (kutipan: "\201C" "\201D";) /* kutipan untuk bahasa inggris */ q:lang(ru) (kutipan: "\00AB" "\00BB";) /* kutipan untuk bahasa Rusia */

Ini mungkin satu-satunya dari semuanya jenis yang mungkin penyeleksi yang belum pernah saya gunakan.

Kelas semu dinamis

Kelas semu dinamis adalah :aktif, :hover, :fokus. Kelas semu dinamis dipicu oleh tindakan tertentu pada halaman, mereka berfungsi untuk semua tag, dan bukan hanya untuk tautan, seperti yang dipikirkan dan bahkan diklaim banyak orang di blog mereka! Mari pertimbangkan penerapannya:

P:aktif (latar belakang: merah;) /* gaya yang akan diterapkan pada tag ketika Anda mengkliknya (klik mouse) */ masukan:fokus (lebar: 400px;) /* gaya yang akan diterapkan ke elemen yang saat ini memiliki fokus (berfungsi, misalnya, untuk bidang input teks: textarea, input). DI DALAM dalam hal ini setelah pemfokusan, lebar input akan menjadi sama dengan 400 piksel, nyaman digunakan efek yang indah Perluas bidang dengan mengklik. */ div:hover (latar belakang: hijau;) /* Dipicu ketika kursor melayang di atas suatu elemen, terutama digunakan untuk menciptakan efek indah ketika mengarahkan kursor ke tautan. */

Terapkan gaya ini pada contoh kami di atas dan Anda akan melihatnya sendiri.

Penyeleksi yang berdekatan

Penyeleksi yang berdekatan adalah tetangga terdekat di bawah kode, bukan anak! Pemilih yang sangat nyaman:

teks dalam paragraf LUAR div

sekali lagi paragraf berada di luar div

Hasil:

Menyeleksi penyeleksi yang berdekatan

Selector berdekatan yang digeneralisasi bertindak persis seperti selector berdekatan biasa, hanya saja propertinya berlaku tidak hanya pada tetangga pertama di bawah, namun untuk semua tetangga tertentu di bawah:

ayat

ayat

ayat

ayat

ayat

ayat

Hasil:

Pemilih atribut

Pemilih atribut memungkinkan kita mengakses tag yang memiliki atribut yang kita perlukan, atau bahkan nilai tertentu:

P (properti) /* berlaku untuk semua tag p yang memiliki atribut align */ p (properti) /* dimana nilai atribut align berada di tengah */ p (properti) /* dimana nilai atribut align dimulai dari tengah */ p (properti) /* dimana nilai atribut align berisi center */ p (properti) /* dimana situs dapat antara lain dipisahkan dengan spasi () */ p (properti) /* dimana nilai atribut class hanya terdiri dari atau diawali dengan kata site, diikuti tanda hubung dan sisa nilai ( atau ) */ p (properti) /* dimana nilai atribut align diakhiri dengan center */

Kelas semu CSS 3

Anda telah mengenal semua penyeleksi utama dan ini sudah cukup bagi Anda dalam beberapa hari pertama. Namun, di CSS 3, banyak pseudo-class baru yang muncul, sekarang kita tidak hanya dapat mengambil anak pertama, tetapi juga anak lainnya, kita dapat beralih dari yang sebaliknya, mengambil bukan anak pertama, tetapi anak terakhir, dan seterusnya. dan sebagainya. Semua ini sangat nyaman dan praktis, kecuali Anda mungkin mengalami masalah dengan versi IE yang lebih lama. Mari kumpulkan semua kekuatan kita dan telusuri semua penyeleksi yang tersisa, sehingga nantinya Anda dapat mengingatnya saat membuat tata letak Anda sendiri.

:anak terakhir – analog dengan:anak pertama, tetapi tidak mengambil anak pertama, melainkan anak terakhir.

:only-child – akan berfungsi jika elemen (tag) adalah satu-satunya anak.

:only-of-type - akan berfungsi jika elemen (tag) adalah satu-satunya anak dari tipenya.

:nth-child() – mengacu pada anak berdasarkan nama mereka nomor seri, Anda dapat mengakses semua nomor genap atau ganjil. Misalnya:

Hasil:

:nth-last-child – cara kerjanya sama seperti yang sebelumnya, namun laporannya dimulai dari akhir.

:first-of-type – anak pertama dari tipenya dalam induk langsung.

:tipe terakhir – anak terakhir dari jenisnya dalam induk langsungnya.

:empty – akan berfungsi untuk tag yang tidak berisi satu karakter pun (tanpa teks).

:not() – membuat pengecualian untuk elemen yang diberikan. Contoh:

paragraf dengan daftar kelas

ayat

ayat

paragraf dengan daftar kelas

Hasil:

Mengelola bidang, formulir, tombol radio, dan kotak centang di CSS

:enabled - berlaku untuk elemen antarmuka yang dapat diakses seperti formulir, tombol, sakelar, dll. Secara default, semua elemen antarmuka dapat diakses.

:disabled - berlaku untuk elemen antarmuka yang dinonaktifkan seperti tombol, formulir, dan sebagainya. Elemen antarmuka dinonaktifkan jika Anda menambahkan atribut nonaktif ke dalamnya dalam HTML atau dinonaktifkan='disabled' di XHTML.

:dicentang – berlaku untuk elemen antarmuka seperti radio dan kotak centang ketika berada dalam posisi aktif.

Elemen semu

Elemen semu, mirip dengan kelas semu, dihitung secara otomatis oleh browser; kita tidak perlu mengkhawatirkan hal ini. Agar tidak membingungkan elemen semu dengan kelas semu dalam spesifikasi CSS 3, diputuskan untuk menggunakan titik dua ganda, bukan titik tunggal, seperti yang terjadi di CSS 2. Oleh karena itu, di Internet Anda dapat menemukan semu -elemen dengan titik dua tunggal dan titik dua ganda - keduanya merupakan opsi yang benar. Namun, untuk kompatibilitas yang lebih baik dengan IE, disarankan untuk menggunakan satu titik dua.

:first-line – baris pertama di dalam blok atau elemen tabel.

:huruf pertama – huruf pertama di dalam elemen blok.

Intinya: sekarang Anda tahu dan dapat menggunakan kekuatan penuh dari cascading style sheet, tetapi ini tidak berarti Anda harus segera terburu-buru membuat tata letak situs web menggunakan banyak penyeleksi, kelas semu, dan elemen semu seperti yang telah Anda pelajari hari ini. Saya telah membuat daftar semuanya alat yang mungkin, dan Anda harus memilih hanya yang paling penting untuk diri Anda sendiri.

Manfaat mengoptimalkan HTML dengan CSS

Salah satu inti dari semua hal di atas adalah untuk menjauh dari penggunaan atribut class dan id yang ada di mana-mana dalam HTML, sehingga meletakkan segalanya di pundak style sheet yang hebat.

File gaya eksternal, seperti eksternal File Javascript di-cache dengan sempurna, yang berarti bahwa ketika Anda mengunjungi halaman mana pun di situs Anda untuk pertama kalinya, browser pengguna mengingat file-file ini dan tidak mengunduhnya lagi, tidak seperti halaman situs itu sendiri, yaitu markup HTML, gambar, dan teks Anda, yang browser mengunduh lagi dan lagi. Hal yang sama berlaku untuk mesin pencari, mereka sama sekali tidak peduli dengan Anda. file eksternal, namun mereka tidak peduli dengan volume dan konten markup HTML Anda. Mesin pencari Anda harus memindai seluruh struktur halaman dan kepentingan terbaik Anda adalah membantu mereka dalam hal ini, memfokuskan upaya mereka pada konten, dan bukan pada dinding markup rumit yang terdiri dari sekumpulan kelas dan pengidentifikasi, atau lebih buruk lagi - Penangan acara Javascript dan gaya CSS tepat di atribut tag (dan ini masih terjadi).

Anda dapat berdebat dengan saya, kata mereka, kita dapat memaksa browser klien untuk mengunduh semua file yang terhubung, gambar ke dalam lingkungan lokalnya, menyimpan cache seluruh halaman, dan seterusnya. Dengan latar belakang seperti itu, hal sepele seperti itu benar-benar hilang, tetapi dengan satu atau lain cara, dengan mengurangi markup HTML sebanyak mungkin, Anda hanya menang, tanpa kehilangan apa pun kecuali kemungkinan kebiasaan.

Untuk meringkas: berkat optimasi dan singkatan HTML kami memiliki keuntungan yang sangat kecil dalam kecepatan memuat situs dan SEO ( optimasi mesin pencari), serta kode yang lebih bersih.

Pemilih CSS adalah salah satu fitur utama bahasa CSS. Selector memungkinkan Anda mengakses sekelompok elemen atau hanya salah satunya.

Selector di CSS

Selector digunakan untuk memberi tahu browser elemen mana yang akan menerapkan gaya yang dijelaskan dalam kurung kurawal.

P( gaya… )

Dalam hal ini, pemilihnya adalah tag p – paragraf. Aturan ini akan menambahkan gaya ke semua paragraf di halaman web.

Apa saja jenis penyeleksi CSS?

Pemilih tag - yang paling sederhana. Hal ini telah ditunjukkan dalam sebuah contoh. Untuk menulisnya di css, Anda perlu menulis nama tag tanpa tanda kurung siku. Gaya akan diterapkan ke semua elemen dengan tag tersebut.
table() – gaya untuk semua tabel
li() – gaya untuk semua item daftar
a() – gaya untuk semua tautan

Kelas gaya– Anda dapat melampirkan kelas gaya ke elemen apa pun di halaman web. Bahkan untuk satu huruf. Kemudian di file css Anda dapat mengakses elemen ini dengan menulis gaya Anda sendiri untuknya. Untuk melakukan ini, Anda perlu memberi titik dan menulis nama kelas gaya setelahnya. Contoh:
.about() – aturan akan berlaku untuk semua elemen yang memiliki atribut class = "about".
.down() – aturan akan berlaku untuk semua elemen yang memiliki atribut class = "down".
.float() – aturan akan berlaku untuk semua elemen yang memiliki atribut class = "float"

Seperti yang Anda lihat, hal utama adalah menyampaikan maksudnya. Kelas gaya dapat diikat ke elemen dalam jumlah tidak terbatas. Sebuah elemen dapat ditugaskan ke beberapa kelas.

Pengidentifikasi– jenis pemilih lainnya. Satu pengidentifikasi hanya dapat ditetapkan ke satu elemen. Itu tidak boleh memiliki dua pengidentifikasi, dan id yang terkait dengan elemen ini tidak dapat didaftarkan di tempat lain.

Ini diatur seperti ini:

Ayat

Artinya, sama seperti sebuah kelas, hanya atributnya saja yang digunakan pengenal kata apa pun digunakan sebagai maknanya.

Untuk mengakses elemen dengan pengidentifikasi melalui css, Anda perlu menulis nilai id dan meletakkan hash di depannya.

#pertama( ukuran font: 22px )

Kami beralih ke paragraf dengan identitas = pertama. Gaya hanya akan diterapkan padanya. Untuk paragraf lainnya, ukuran font tidak akan berubah.

Kelas semu

Ada satu jenis pemilih yang menarik di CSS: kelas semu. Artinya, kelas yang dimiliki elemen secara default dan tidak perlu ditentukan tambahan. Beberapa di antaranya hanya berfungsi untuk tautan, sementara beberapa lainnya dapat diterapkan ke semua elemen. Bagaimanapun, kelas semu CSS sangat memudahkan pekerjaan pengembang web.

Kelas semu adalah kelas gaya suatu elemen yang sebenarnya tidak kita definisikan sendiri, melainkan hanya ada dengan sendirinya. Misalnya, melihat kode ini di html:

Ayat

Anda pasti bisa mengatakan bahwa paragraf ini mempunyai kelas khusus, karena tertulis di sana. Tetapi kelas semu tidak perlu dituliskan elemennya secara default, dan inilah keuntungannya dalam kasus ini. Selanjutnya, mari kita lihat yang paling populer.

Untuk tautan

Untuk kolom masukan dan tautan

:fokus – Gaya diterapkan pada elemen yang menerima fokus masukan.
Faktanya, ada banyak kelas semu baru yang keren untuk bidang masukan, tetapi semuanya baru CSS3, dan pada artikel kali ini saya hanya ingin membahas yang paling sederhana saja. Pasti akan ada artikel tentang selector CSS3 kedepannya.

Untuk semua elemen

1. :hover – gaya diterapkan saat mengarahkan kursor ke suatu elemen
2. :first-child – pilih elemen anak pertama
3. :anak terakhir – elemen anak terakhir
4. :nth-child() – Di dalam tanda kurung dituliskan angka atau rumus yang menentukan elemen mana yang akan dipilih.
5. :first-of-type, :last-of-type, :nth-of-type() – bekerja hampir sama dengan pseudo-class sebelumnya. Satu-satunya perbedaan adalah jenis elemen diperhitungkan di sini. Perbedaannya dapat dirasakan pada contoh berikut:
   li:first-child – item daftar pertama akan dipilih, tetapi hanya jika elemen li berada di urutan pertama dalam blok induk. Jika ada tag lain sebelumnya, tidak ada yang akan dipilih.
6. li:first-of-type – item daftar pertama dari semua yang ada di induknya akan dipilih. Tidak masalah di mana lokasinya dalam kode. Saya harap perbedaannya jelas.
7. :nth-last-child – cara kerjanya mirip dengan :nth-child, namun dihitung dari elemen terakhir, bukan elemen pertama.
8. :nth-last-of-type – mirip dengan :nth-last-child, tetapi dengan mempertimbangkan tipe elemennya.

Ini tidak semuanya kelas semu, tetapi yang paling populer dan diperlukan. Sebenarnya semua kelas semu ditandai dengan cara yang sama di css, dipisahkan dengan titik dua. Selain itu, Anda dapat menggabungkan penyeleksi dan mendapatkan peluang menarik:
a:visited:active – gaya untuk tautan yang sudah dikunjungi yang diklik.
div:first-child:hover – gaya untuk semua blok pertama di induknya yang dilayangkan.

Seperti yang Anda lihat, penyeleksi seperti itu memberikan peluang besar dalam hal elemen gaya. Gunakan mereka dan Anda dapat dengan mudah menjangkau elemen apa pun.

Menggabungkan penyeleksi

Satu hal lagi aturan penting, yang perlu Anda ketahui. Pemilih kelas gaya dapat ditulis tanpa memisahkannya satu sama lain. Misalnya:
.class1.class2 – akan memilih elemen yang memiliki kedua kelas ini.
.class1.class3.class8 – akan memilih elemen yang dilampirkan ketiga kelas gaya.

Penyeleksi bersarang

Jika kita memisahkan penyeleksi satu sama lain dengan spasi, kita dapat mencapai elemen yang kita perlukan. Contoh:
table td – memilih semua sel dalam tabel
ul li a – memilih semua tautan yang terletak di item daftar (dan item daftar, pada gilirannya, terletak di daftar itu sendiri)
.class1 p – akan memilih semua paragraf dengan atribut class = “class1”
.class2 p span – akan memilih semua isi tag yang terdapat dalam paragraf dengan kelas class2.

Anda dapat membuat sarang dan menggabungkan dengan cara ini sebanyak yang Anda suka. Contoh:
#header .logo span:huruf pertama()– memilih huruf pertama dalam rentang logo, yang terletak di header
.class1.class2:hover() – akan menentukan gaya hover untuk elemen yang memiliki kedua kelas gaya.

Pemilih anak

Jika Anda perlu menata elemen induknya LANGSUNG anak perusahaan, maka Anda perlu menulisnya seperti ini:
ul > li() – akan memilih item daftar yang bersarang langsung di dalamnya, dan tidak terletak di tag lain
p > a() – hanya akan memilih tautan dalam paragraf yang terletak langsung di dalamnya, dan tidak disarangkan dalam tag lain (yang, pada gilirannya, sudah dirangkai dalam paragraf)
Contoh:

Jika Anda menulis pemilih seperti ini p > a , apakah gaya akan diterapkan pada tautan pada contoh di atas? Tidak, karena masih bersarang di tag lain, artinya bukan turunan langsung.

Penyeleksi yang berdekatan

Hal terakhir yang akan kita lihat hari ini. Jika Anda menulisnya di css seperti ini:
.class1 + .class4() , maka pemilih ini akan memilih elemen dengan atribut class = "class4" , dan elemen ini harus muncul dalam kode HTML segera setelah elemen dengan kelas class1. Hanya dalam hal ini semuanya akan berhasil. Mari kita lihat contohnya lagi:

Akankah pemilih di atas (.class1 + .class4()) berfungsi? Tidak, karena unsur-unsurnya tidak bersebelahan. Di antara mereka adalah tag gambar. Jika Anda menghapusnya, maka semuanya akan berfungsi.

Jadi, kita telah melihat penyeleksi paling dasar dan paling sederhana. Tentunya pengetahuan ini akan cukup bagi Anda untuk menyelesaikan 95% masalah. Pada artikel selanjutnya saya akan menjelaskan beberapa selector CSS yang lebih spesifik.

Pemilih atribut

Memungkinkan Anda memilih elemen tertentu tanpa menetapkan kelas gaya atau pengidentifikasi padanya.

Pemilih atribut adalah penyeleksi yang atribut atau atribut dengan nilai ditulis dalam tanda kurung siku. Beberapa contoh untuk memperjelas:
* – memilih semua elemen yang memiliki atribut href dengan nilai berapa pun.
input – memilih semua elemen input yang memiliki atribut nonaktif (semua kolom dinonaktifkan).
input – memilih semua kolom yang tipenya adalah password , yaitu kolom untuk memasukkan kata sandi.
img – memilih gambar yang memiliki atribut src = "/logo.png" yang disetel.

Seperti yang Anda lihat, menulis penyeleksi atribut CSS tidaklah sulit. Perbedaan terpenting mereka adalah tanda kurung siku, di mana hanya atribut atau atribut dengan nilai persisnya yang ditulis. Namun fungsi penyeleksi ini tidak berakhir di situ.

Pemilih atribut css tingkat lanjut

Semua penyeleksi berikut peka huruf besar-kecil.
Cari di awal baris
div – memilih semua div yang memiliki kelas gaya yang dimulai dengan "block" . Jadi, misalnya, blok berikut akan dipilih: "block-head", "block-3", "blocknote" . Yang penting ada kata kunci di awal maknanya.

Menemukan di akhir baris
a – memilih semua tautan yang alamatnya berakhiran .rar . Jadi, jika Anda dapat mengunduh sesuatu di situs web Anda, Anda dapat menambahkan ikon di samping semua tautan ke file yang diarsipkan.

Menemukan substring di mana pun dalam suatu nilai
span – memilih semua tag rentang, yang nama kelasnya berisi “seni” di mana pun dalam namanya. Jadi, misalnya, rentang dengan kelas berikut akan dipilih: party, clart, art-1.

Cari awalan
p – akan memilih paragraf dengan kelas gaya yang memiliki nama yang sama persis dengan “pertama” atau yang berisi awalan pertama yang mengawali nama kelas.

Menemukan kata-kata dalam makna
masukan– akan memilih semua elemen masukan yang nilai atribut pengidentifikasinya berisi kata text . Berbeda dengan mencari substring di mana pun, yang harus dimasukkan adalah kata, bukan substringnya.

Dua opsi terakhir jarang digunakan dan kemungkinan besar tidak akan sering berguna bagi Anda, tetapi untuk perkembangan umum Anda masih bisa mengetahuinya.

Apa kegunaan penyeleksi atribut?

Dengan menggunakan penyeleksi seperti itu, Anda dapat memilih banyak elemen HTML tanpa memberinya kelas gaya. Dalam beberapa kasus, dengan menggunakan metode ini Anda dapat mempersingkat kode dan menyederhanakan pekerjaan Anda. Misalnya diatas saya berikan contoh dengan icon untuk arsip. Di sini ide lain muncul. Misalnya, di situs web Anda, Anda sering menautkan ke satu sumber lain (misalnya Wikipedia) dan Anda ingin menampilkan ikon khusus di sebelah tautan ke Wikipedia, yang seharusnya tidak dimiliki tautan lain.

Anda dapat menerapkannya seperti ini:

A (aturan css)

Sebenarnya, masih banyak lagi cara untuk menggunakan penyeleksi atribut. Mereka sampai batas tertentu dapat menyederhanakan pekerjaan jika diperlukan. Gunakan css dan berlangganan blog untuk mempelajari lebih lanjut tentang pengembangan web.

Penyeleksi CSS3 dan kelas semu

Tentang penyeleksi css3 baru, yang tidak saya tulis di artikel sebelumnya.

Peningkatan pekerjaan dengan formulir

Ini adalah kelas semu baru. Pada dasarnya semuanya menyangkut kemungkinan-kemungkinan bentuk yang baru.
:enabled – kelas semu akan memilih semua bidang aktif. Artinya, di mana Anda dapat menulis sesuatu atau setidaknya dapat dibaca.
:disabled adalah kebalikan dari kelas semu, memilih semua bidang yang dinonaktifkan. Oleh karena itu, dengan bantuannya Anda dapat menambahkan gaya tambahan bidang seperti itu.
:read-only – pilih semua masukan, yang bersifat hanya baca.
:baca-tulis – memilih semua bidang yang dapat diedit.

Menambahkan gaya dengan mempertimbangkan validitas

Ada juga kelas semu yang sangat menarik yang dapat Anda tetapkan gayanya tergantung pada validitas atau tidak validnya nilai yang dimasukkan. Sebelumnya, ini hanya bisa dilakukan dengan menggunakan JavaScript.
:valid – memilih semua kolom yang nilai yang dimasukkan memenuhi persyaratan. Persyaratannya sendiri biasanya ditentukan menggunakan atribut pattern. Mungkin juga tergantung pada jenis bidang. Misalnya, bidang tempat alamat ditulis e-mail, akan dianggap tidak valid jika tidak ada @ pada nilai yang dimasukkan.
:invalid – oleh karena itu, memilih semua bidang yang tidak valid yang nilainya tidak sesuai dengan yang diharapkan. Misalnya, Anda bisa mengatur warna teks di bidang seperti ini menjadi merah:

Masukan: tidak valid (warna: merah; )

Sekarang jika kita menulis nilai yang salah di kolom, teks berubah menjadi merah. Oleh karena itu, Anda juga dapat menggunakan gambar tanda centang dan tanda silang untuk menunjukkan kepada pengguna apakah dia mengisi semuanya dengan benar.

Gaya untuk bidang yang wajib diisi

Saya juga ingin mencatat bahwa kelas semu yang sesuai telah muncul untuk bidang yang wajib diisi.
:wajib – akan memilih elemen yang memiliki atribut ini. Artinya, semua kolom wajib diisi.
:opsional – kelas lawan, akan memilih bidang yang opsional.

Kelas semu: tidak

:not adalah sejenis anti-selektor yang memungkinkan Anda menentukan elemen mana JANGAN GUNAKAN gaya. Beberapa contoh.
a:not(:last-child)() – akan memilih semua link pada halaman kecuali yang terakhir.
.nav:not(li)() – akan memilih semua elemen dengan kelas nav, tetapi ini tidak boleh berupa item daftar (li).
#article p:not(.special:first-child) – akan memilih semua paragraf di blok artikel kecuali paragraf pertama dengan kelas khusus.

Seperti yang Anda lihat, di tanda kurung sebuah kondisi ditulis untuk kelas semu: apa sebenarnya yang perlu dikecualikan dari pilihan. Anda juga dapat menulis pemilih kombinasi dalam kondisi, sehingga Anda dapat memilih dan mengecualikan apa pun yang Anda inginkan.

Inilah pseudo-class yang terkadang dibutuhkan, diperlukan tidak hanya secara teori, tetapi juga dalam praktik. Oh ya, Anda juga dapat melanjutkan membuat pemilih setelah :not(). Misalnya:
div:not(#header) .wrap – memilih semua div dengan kelas wrap, kecuali div dengan id="header"

Ini adalah penyeleksi yang diperkenalkan di CSS3.

Prioritas penyeleksi css

Untuk menentukan gaya mana yang diutamakan, gunakan aturan sederhana berikut:
ID adalah pemilih dengan prioritas tertinggi. Jika suatu elemen memiliki kelas gaya dan id , dan keduanya diberi properti yang sama arti yang berbeda, maka gaya yang ditulis untuk pengidentifikasi akan dieksekusi.

Kelas adalah pemilih dengan prioritas lebih tinggi daripada pemilih tag (p, tabel, ul). Kelas semu mempunyai bobot yang sama dengan kelas sederhana. p:first-line lebih diutamakan daripada .firstline karena pemilih kedua hanyalah sebuah kelas, sedangkan yang pertama adalah pemilih tag + kelas semu.

Satu hal lagi aturan yang berguna— semakin spesifik pemilihnya, semakin besar prioritas gayanya. Misalnya, antara isi dan p, paragraf memenangkan pertarungan karena merupakan pemilih yang lebih spesifik daripada isi (karena merupakan keseluruhan halaman, jadi tidak terlalu spesifik). Dan tabel p , pada gilirannya, lebih spesifik dari sekedar p . Secara umum, perhatikan saja aturan-aturan ini.

Intinya

Artikel ini telah membahas hampir semua pemilih CSS. Saya juga ingin menambahkan bahwa jika Anda menggunakan jQuery, maka ia memiliki pemilihnya sendiri, meskipun sangat mirip dengan ini, tetapi ada sedikit perbedaan.

Bahasa deskripsi penampilan dokumen CSS terus berkembang. Seiring berjalannya waktu, tidak hanya kekuatan dan fungsinya yang meningkat, namun juga fleksibilitas dan kemudahan penggunaannya.

Mari kita mulai mencari tahu. Buka buku teks CSS apa pun; setidaknya satu bagian akan dikhususkan untuk jenis penyeleksi. Hal ini tidak mengherankan, karena mereka adalah salah satu yang paling banyak cara yang nyaman manajemen konten halaman. Dengan bantuan mereka, Anda benar-benar dapat berinteraksi dengan elemen HTML apa pun. Saat ini ada 7 jenis penyeleksi:

• untuk tag;

• untuk kelas;

• untuk tanda pengenal;

• universal;

• atribut;

• untuk berinteraksi dengan kelas semu;

• untuk mengelola elemen semu.

Sintaksnya sederhana. Untuk mempelajari cara menggunakannya, baca saja tentangnya. Opsi mana yang lebih baik untuk dipilih untuk kontrol konten dalam kasus Anda? Mari kita coba mencari tahu.

Pemilih tag

Ini adalah opsi paling sederhana yang tidak memerlukan pengetahuan khusus untuk merekamnya. Untuk mengelola tag, Anda perlu menggunakan namanya. Anggaplah header situs Anda dibungkus dengan tag