Selectors CSS. jenis selektor

, masing-masing Anda ingin mengatur warna tertentu. Bagaimana melakukannya? Standar CSS penyeleksi tidak cocok untuk tag, mereka menunjukkan parameter untuk semua blok sekaligus. Solusinya sederhana. Menetapkan anggota kelas. Sebagai contoh, pertama menerima div class = 'red', kedua - class = 'blue', ketiga - class = 'hijau'. Sekarang mereka dapat dipilih dengan menggunakan tabel CSS.

Sintaksnya adalah sebagai berikut: Menunjukkan titik ( ""), Diikuti dengan menulis nama kelas. Untuk mengelola unit pertama, menggunakan konstruksi .red. Kedua - .blue dan sebagainya.

Penting! Disarankan untuk menggunakan nilai-nilai yang bermakna dari atribut class. Hal ini dianggap bentuk buruk untuk menggunakan transliterasi (misalnya, krasiviy-blok) atau kombinasi acak dari huruf / angka (ojfh834871). Dalam kode ini, Anda terikat untuk mendapatkan bingung, belum lagi kesulitan yang akan dihadapi orang-orang yang akan terlibat dalam proyek setelah Anda. Pilihan terbaik - untuk menggunakan metodologi apapun, seperti BEM.

Keuntungan - fleksibilitas yang relatif tinggi.

Kekurangan - yang beberapa elemen mungkin satu dan kelas yang sama, yang berarti bahwa mereka akan diedit secara bersamaan. masalah diselesaikan dengan menggunakan metodologi serta warisan dari preprosesor. Pastikan untuk mendapatkan tangan Anda kurang, merendahkannya atau preprocessor lain, mereka sangat menyederhanakan pekerjaan.

ID pemilih

Tentang versi coders pendapat dan programmer ambigu. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Beberapa tutorial CSS tidak merekomendasikan penggunaan ID, karena dalam aplikasi akurat mereka dapat menyebabkan masalah dengan warisan. Namun, banyak ahli yang aktif mengatur mereka di seluruh tata letak. Anda memutuskan. # »), затем имя блока. Sintaksnya adalah sebagai berikut: tanda pound ( "#"), maka nama blok. #red. Misalnya, #red.

отличается от класса по нескольким параметрам. ID berbeda dari kelas dalam beberapa cara. ID. Pertama, halaman tidak bisa dua identik ID. Mereka ditugaskan nama yang unik. Kedua, pemilih seperti memiliki prioritas yang lebih tinggi. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Ini berarti bahwa jika Anda menentukan unit kelas merah dan menentukan dalam tabel CSS merah warna latar belakang, dan kemudian menetapkan untuk itu id yang sama biru dan menentukan warna biru, unit akan berubah menjadi biru.

Keuntungan - Anda dapat mengontrol elemen tertentu, mengabaikan gaya tag dan kelas.

ID и class. Kekurangan - mudah untuk tersesat di sejumlah besar ID dan kelas.

Penting! ID вам, в общем-то, не нужны. Jika Anda menggunakan BEM metodologi (atau analognya), ID untuk Anda, secara umum, tidak diperlukan. Teknik ini melibatkan penggunaan kelas unik tata letak yang jauh lebih nyaman.

pemilih yang universal

{}. Sintaks: Starlets tanda ( "*") dan kawat gigi, yaitu, {*} ...

Digunakan untuk menetapkan atribut tertentu setelah semua elemen halaman. Ketika ini dapat berguna? box-sizing: border-box. Misalnya, jika Anda ingin mengatur properti halaman kotak-sizing: border-box. div *{}. tidak hanya bisa digunakan untuk mengelola semua komponen dokumen, tetapi juga untuk mengontrol semua anak dari blok tertentu, misalnya, div * {}.

Keuntungan - Anda dapat mengontrol sejumlah besar item pada suatu waktu.

Kontra - tidak cukup pilihan fleksibel. Selain itu, penggunaan pemilih ini, dalam beberapa kasus memperlambat halaman kerja.

oleh atribut

Memungkinkan untuk mengendalikan elemen dengan atribut tertentu. Misalnya, Anda memiliki sejumlah tag input dengan jenis atribut yang berbeda. Salah satu dari mereka - teks, yang kedua - password, ketiga - nomor. Tentu saja, Anda dapat mengatur masing-masing kelas atau ID, tetapi tidak selalu nyaman. CSS atribut memungkinkan untuk menentukan nilai untuk tag tertentu dengan presisi maksimum. Sebagai contoh, seperti ini:

input [ 'teks' type =] {}

pemilih ini akan memilih semua atribut dengan jenis input teks.

Alat ini cukup fleksibel dan dapat digunakan dengan salah satu tag, di mana mungkin ada atribut. Tapi itu tidak semua! Spesifikasi CSS memiliki kemampuan untuk mengendalikan elemen dengan kenyamanan bahkan lebih!

Bayangkan bahwa halaman Anda memiliki masukan dengan placeholder atribut = "Masukkan nama" dan masukan placeholder = "Masukkan password". Mereka juga dapat dipilih menggunakan pemilih! Untuk melakukan hal ini, menggunakan struktur berikut:

input [placeholder = "Masukkan nama"] {} atau masukan [placeholder = "Masukkan password"]

Mungkin pekerjaan yang lebih fleksibel dengan atribut. Katakanlah Anda memiliki sejumlah tag dengan atribut yang sama judul (misalnya, "Caspian" dan "Caspian"). Untuk memilih keduanya, gunakan pilihan berikut:

[Title * = "Kaspiysk"]

CSS akan memilih semua item dalam judul yang ada simbol "Caspian", yaitu. E., Dan "Caspian" dan "Caspian".

Anda juga dapat memilih tag yang dimulai dengan atribut karakter tertentu:

[Title ^ = "karakter yang Anda inginkan"] {}

atau mengakhiri mereka:

[Title $ = "karakter yang tepat"] {}.

Keuntungan - fleksibilitas maksimum. Anda dapat memilih elemen halaman yang ada tanpa mengacaukan dengan kelas.

Kekurangan - digunakan relatif jarang, hanya dalam kasus-kasus tertentu. Banyak web designer lebih memilih untuk metodologi, karena kelas titik lebih mudah daripada untuk mengatur berbagai kurung dan tanda-tanda "sama". Selain itu, pemilih ini tidak bekerja di Explorer versi Internet 7 dan bawah. Namun, yang sekarang membutuhkan Internet Explorer tua?

penyeleksi pseudo-class

Menunjukkan elemen pseudo-status. Misalnya ,: melayang - apa yang terjadi pada bagian halaman ketika Anda membawa ,: mengunjungi - link yang dikunjungi. Ini juga mencakup unsur-unsur seperti: pertama-anak dan: terakhir anak.

Jenis pemilih secara aktif digunakan dalam tata letak modern, karena berkat itu Anda dapat membuat halaman "hidup" tanpa menggunakan JavaScript. Misalnya, Anda ingin memastikan bahwa ketika Anda membawa lebih tombol dengan kelas btn warna berubah. Untuk melakukan hal ini, kita menggunakan struktur berikut:

.btn: hover {

background-color: red;

}

Kecantikan bisa ditetapkan dalam sifat dasar dari tombol, properti transisi, misalnya, 0.5s - dalam hal ini, tombol tidak akan memerah seketika, dan dalam setengah detik.

Kebajikan - banyak digunakan untuk "kebangkitan" dari halaman. Mudah digunakan.

Kekurangan - mereka tidak. Ini adalah alat yang sangat berguna. Namun, berpengalaman web desainer dapat tersesat dalam kelimpahan pseudo-kelas. masalah diselesaikan studi dan praktek.

pseudo-penyeleksi

"Pseudo" - ini adalah bagian dari halaman yang tidak dalam HTML, namun mereka masih dapat dikelola. Anda tidak mengerti? Ini jauh lebih mudah daripada tampaknya. Misalnya, Anda ingin membuat huruf pertama dalam string besar dan merah, meninggalkan teks kecil dan hitam lainnya. Tentu saja, dapat disimpulkan bahwa surat dalam rentang dengan kelas tertentu, tapi itu panjang dan membosankan. Adalah jauh lebih mudah untuk memilih seluruh ayat dan menggunakan semu :: pertama-surat. Ini memberikan kesempatan untuk mengontrol tampilan dari huruf pertama.

Ada cukup banyak pseudo-elemen. Daftar mereka dalam satu artikel tidak mungkin untuk berhasil. Anda dapat menemukan informasi yang relevan di mesin pencari favorit Anda.

Keuntungan - memberikan fleksibilitas untuk menyesuaikan tampilan halaman.

Kekurangan - baru bagi mereka sering bingung. Banyak Pilihan jenis ini bekerja hanya di browser tertentu.

untuk meringkas

Selector - alat yang ampuh untuk kontrol aliran dokumen. Berkat dia, Anda dapat memilih setiap komponen tunggal dari halaman (bahkan ada hanya sebagian). Pastikan untuk mempelajari semua pilihan yang tersedia, atau bahkan menuliskannya. Hal ini sangat penting jika Anda membuat halaman kompleks dengan desain modern dan banyak elemen interaktif.