, yang masing-masing perlu ditanyakan warna tertentu. Bagaimana cara melakukan ini? Pemilih CSS standar berdasarkan tag tidak akan berfungsi; mereka menunjukkan parameter untuk semua blok sekaligus. Solusinya sederhana. Tetapkan kelas ke elemen. Misalnya, div pertama menerima class=’red’, div kedua menerima class=’blue’, dan div ketiga menerima class=’green’. Sekarang mereka dapat dipilih menggunakan tabel CSS.

Sintaksnya adalah sebagai berikut: kita menunjukkan titik (“.”), setelah itu kita menulis nama kelas. Untuk mengontrol blok pertama, kita menggunakan konstruksi .red. Yang kedua adalah .blue dan seterusnya.

Penting! Disarankan untuk menggunakan nilai yang jelas untuk atribut class. Penggunaan translit (misalnya, krasiviy-blok) atau kombinasi huruf/angka acak (ojfh834871) dianggap sebagai bentuk yang buruk. Anda pasti akan bingung dengan kode tersebut, belum lagi kesulitan yang harus dihadapi oleh mereka yang akan mengerjakan proyek tersebut setelah Anda. Pilihan terbaik- menggunakan beberapa metodologi, seperti BEM.

Keunggulan: fleksibilitas cukup tinggi.

Kekurangan - beberapa elemen dapat memiliki kelas yang sama, yang berarti akan diedit pada waktu yang sama. Masalahnya diselesaikan dengan menggunakan metodologi, serta mewarisi praprosesor. Pastikan untuk menguasai lebih sedikit, sass, atau praprosesor lainnya, mereka akan sangat menyederhanakan pekerjaan Anda.

Pemilih berdasarkan ID

Pendapat perancang tata letak dan pemrogram mengenai opsi ini tidak jelas. Beberapa buku teksCSStidak disarankan untuk digunakan sama sekaliPENGENAL,karena jika digunakan sembarangan dapat menimbulkan masalah pada warisan. Namun, banyak ahli yang secara aktif menempatkannya di seluruh penandaan. Terserah Anda untuk memutuskan. Sintaksnya adalah: simbol hash ("# "), lalu nama bloknya. Misalnya,#merah.

PENGENALberbeda dari kelas dalam beberapa hal. Pertama, tidak mungkin ada dua halaman yang identik.PENGENAL.Mereka ditugaskan nama-nama unik. Kedua, pemilih seperti itu memiliki prioritas lebih tinggi. Artinya, jika Anda memberi sebuah blok sebuah kelasmerahdan tunjukkan dalam tabelCSSmerah dan kemudian berikan padanyaidentitas birudan menunjukkan biru, blok akan berubah menjadi biru.

Keuntungan - Anda dapat mengontrol elemen tertentu tanpa memperhatikan gaya tag dan kelas.

Kekurangan - mudah bingung dalam jumlah banyakPENGENALDankelas.

Penting! Jika Anda menggunakan metodologi BEM (atau analognya),PENGENALSecara umum, Anda tidak membutuhkannya. Teknik tata letak ini melibatkan penggunaan kelas unik, yang jauh lebih nyaman.

Pemilih universal

Sintaks: tanda bintang (“*”) dan kurung kurawal, yaitu *{}.

Digunakan untuk menetapkan atribut tertentu ke semua elemen halaman sekaligus. Kapan ini berguna? Misalnya, jika Anda ingin mengatur properti halamanukuran kotak: kotak perbatasan.Dapat digunakan tidak hanya untuk mengontrol semua komponen dokumen, tetapi juga untuk mengontrol semua elemen turunan dari blok tertentu, misalnya.div *().

Keuntungan - dapat dikontrol sejumlah besar elemen secara bersamaan.

Kekurangan - tidak cukup fleksibel. Selain itu, penggunaan pemilih ini dapat memperlambat halaman dalam beberapa kasus.

Berdasarkan atribut

Memungkinkan Anda mengelola elemen dengan atribut tertentu. Misalnya, Anda punya beberapa tag masukan dengan atribut tipe yang berbeda. Salah satunya adalah teks, yang kedua adalah kata sandi, yang ketiga adalah angka. Tentu saja, Anda dapat menetapkan kelas atau ID untuk masing-masing kelas, tetapi hal ini tidak selalu nyaman. Pemilih atribut CSS memungkinkan penentuan nilai untuk tag tertentu dengan presisi maksimum. Misalnya seperti ini:

masukan()

Pemilih atribut ini akan memilih semua input dengan tipe teks.

Alat ini cukup fleksibel; dapat digunakan dengan tag apa pun yang mungkin memiliki atribut. Tapi bukan itu saja! Spesifikasi CSS memungkinkan manipulasi elemen dengan lebih nyaman!

Bayangkan halaman Anda memiliki masukan dengan atribut placeholder = “Masukkan nama” dan masukan placeholder = “Masukkan kata sandi.” Mereka juga dapat dipilih menggunakan pemilih! Konstruksi berikut digunakan untuk ini:

masukan() atau masukan

Pekerjaan yang lebih fleksibel dengan atribut dimungkinkan. Katakanlah Anda memiliki beberapa tag dengan atribut judul yang serupa (misalnya, “Caspian” dan “Caspian”). Untuk memilih keduanya, gunakan pemilih berikut:

CSS akan memilih semua elemen yang judulnya mengandung karakter “Kaspiysk”, yaitu “Kaspiyskiy” dan “Kaspiyskaya”.

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

atau akhiri dengan mereka:

{}.

Keuntungan - fleksibilitas maksimum. Anda dapat memilih elemen halaman apa pun yang ada tanpa mengutak-atik kelas.

Kekurangan - relatif jarang digunakan, hanya dalam kasus tertentu. Banyak desainer tata letak lebih memilih metodologi, karena menentukan kelas bisa lebih mudah daripada mengatur banyak tanda yang sama. Selain itu, penyeleksi ini tidak berfungsi di Internet Versi penjelajah 7 ke bawah. Namun, siapa yang membutuhkannya saat ini? Internet lama Penjelajah?

Penyeleksi kelas semu

Kelas semu menunjukkan keadaan suatu elemen. Misalnya, :hover adalah apa yang terjadi pada bagian halaman ketika kursor diarahkan, :visited adalah link yang dikunjungi. Ini juga mencakup elemen seperti:anak pertama dan:anak terakhir.

Jenis pemilih ini aktif digunakan tata letak modern, karena berkat itu Anda dapat membuat halaman tersebut “hidup” tanpa menggunakan JavaScript. Misalnya, Anda ingin memastikan bahwa saat Anda mengarahkan kursor ke tombol dengan kelas btn, warnanya berubah. Untuk melakukan ini kami menggunakan konstruksi berikut:

btn: arahkan (

Warna latar belakang: merah;

Untuk kecantikan, Anda dapat menentukan properti transisi di properti utama tombol ini, misalnya, pada 0,5 detik - dalam hal ini, tombol tidak akan langsung berubah menjadi merah, tetapi selama setengah detik.

Keuntungannya - mereka secara aktif digunakan untuk "menghidupkan kembali" halaman. Mudah digunakan.

Kekurangan - tidak ada. Ini adalah alat yang sangat berguna. Namun, desainer tata letak yang tidak berpengalaman mungkin bingung dengan banyaknya kelas semu. Masalahnya diselesaikan dengan belajar dan berlatih.

Pemilih elemen semu

"Elemen semu" adalah bagian halaman yang tidak ada dalam HTML, namun masih dapat dimanipulasi. Tidak mengerti apa-apa? Semuanya lebih sederhana dari yang terlihat. Misalnya, Anda ingin membuat huruf pertama dalam sebuah baris menjadi besar dan berwarna merah, namun membiarkan sisa teksnya kecil dan berwarna hitam. Tentu saja, Anda dapat melampirkan surat ini dalam rentang dengan kelas tertentu, tapi ini panjang dan membosankan. Jauh lebih mudah untuk memilih seluruh paragraf dan menggunakan elemen semu::huruf pertama. Ini memungkinkan Anda mengontrol tampilan huruf pertama.

Ada cukup jumlah besar elemen semu. Kecil kemungkinannya untuk mencantumkannya dalam satu artikel. Anda dapat menemukan informasi yang relevan di mesin pencari favorit Anda.

Keuntungannya - memungkinkan Anda menyesuaikan tampilan halaman secara fleksibel.

Kekurangan - pemula sering kali bingung tentangnya. Banyak penyeleksi jenis ini hanya berfungsi di browser tertentu.

Mari kita simpulkan

Pemilih - alat yang ampuh pengendalian aliran dokumen. Berkat itu, Anda benar-benar dapat memilih setiap komponen halaman (bahkan yang hanya ada secara kondisional). Pastikan untuk mempelajari semua pilihan Anda atau setidaknya menuliskannya. Ini sangat penting jika Anda sedang berkreasi halaman yang rumit Dengan desain modern dan sejumlah besar elemen interaktif.

CSS (Cascading Style Sheets), atau lembar gaya berjenjang, digunakan untuk mendeskripsikan tampilan dokumen yang ditulis dalam bahasa markup. Biasanya, gaya CSS digunakan untuk membuat dan mengubah gaya elemen halaman web dan antarmuka pengguna tertulis di bahasa HTML dan XHTML, namun juga dapat diterapkan pada semua jenis dokumen XML, termasuk XML, SVG, dan XUL.

Lembar gaya berjenjang menjelaskan aturan untuk memformat elemen menggunakan properti dan nilai yang diizinkan untuk properti tersebut. Untuk setiap elemen, Anda dapat menggunakan sekumpulan properti terbatas; properti lain tidak akan berpengaruh apa pun padanya.

Deklarasi gaya terdiri dari dua bagian: elemen halaman web − pemilih, dan perintah pemformatan - blok iklan. Pemilih memberi tahu browser elemen mana yang akan diformat, dan blok deklarasi (kode dalam kurung kurawal) mencantumkan perintah pemformatan - properti dan nilainya.

Beras. 1. Struktur deklarasi gaya CSS

Jenis-jenis cascading style sheet dan spesifikasinya

1. Jenis style sheet

1.1. Lembar gaya eksternal

Lembar gaya eksternal mewakili berkas teks dengan ekstensi .css, yang berisi sekumpulan gaya CSS untuk elemen. File dibuat dalam editor kode, seperti halaman HTML. File hanya dapat berisi gaya, tanpa markup HTML. Style sheet eksternal terhubung ke halaman web menggunakan tag , terletak di dalam bagian . Gaya ini berfungsi untuk semua halaman situs.

Anda dapat melampirkan beberapa style sheet ke setiap halaman web dengan menambahkan beberapa tag secara berurutan , menunjukkan tujuan style sheet ini dalam atribut tag media. rel="stylesheet" menentukan jenis tautan (tautan ke lembar gaya).

Atribut type="text/css" tidak diperlukan oleh standar HTML5, sehingga dapat dihilangkan. Jika atributnya hilang, nilai defaultnya adalah type="text/css" .

1.2. Gaya dalaman

Gaya dalaman tertanam dalam suatu bagian Dokumen HTML dan didefinisikan di dalam tag. Gaya internal lebih diutamakan daripada gaya eksternal, tetapi lebih rendah daripada gaya sebaris (ditentukan melalui atribut style).

...

1.3. Gaya bawaan

Saat kita menulis gaya sebaris, kita menulis kode CSS ke dalam file HTML, langsung di dalam tag elemen menggunakan atribut gaya:

Perhatikan teks ini.

Gaya seperti itu hanya memengaruhi elemen yang ditetapkannya.

1.4. @ aturan impor

@ aturan impor Memungkinkan Anda memuat style sheet eksternal. Agar arahan @import berfungsi, arahan tersebut harus muncul di style sheet (eksternal atau internal) sebelum semua aturan lainnya:

Aturan @import juga digunakan untuk menyertakan font web:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. Jenis penyeleksi

Penyeleksi mewakili struktur halaman web. Mereka membantu membuat aturan untuk memformat elemen halaman web. Selector dapat berupa elemen, kelas dan pengidentifikasinya, serta kelas semu dan elemen semu.

2.1. Pemilih universal

Cocok dengan elemen HTML apa pun. Misalnya, * (margin: 0;) akan mengatur ulang margin untuk semua elemen situs. Pemilih juga dapat digunakan dalam kombinasi dengan kelas semu atau elemen semu: *:after (CSS style) , *:checked (CSS style) .

2.2. Pemilih elemen

Pemilih elemen memungkinkan Anda memformat semua elemen dari jenis tertentu di semua halaman situs. Misalnya, h1 (font-family: Lobster, kursif;) akan mengatur gaya pemformatan keseluruhan untuk semua judul h1.

2.3. Pemilih kelas

Pemilih kelas memungkinkan Anda memberi gaya pada satu atau lebih elemen dengan nama kelas yang sama tempat yang berbeda halaman atau seterusnya halaman yang berbeda lokasi. Misalnya, untuk membuat judul dengan kelas headline, Anda perlu menambahkan atribut class dengan nilai headline ke tag pembuka

dan atur gaya untuk kelas yang ditentukan. Gaya yang dibuat menggunakan kelas dapat diterapkan ke elemen lain, tidak harus bertipe tersebut.

Petunjuk penggunaan komputer pribadi

.headline ( transformasi teks: huruf besar; warna: biru muda; )

2.4. pemilih ID

Pemilih ID memungkinkan Anda memformat satu elemen tertentu. Idnya harus unik dan hanya bisa muncul satu kali dalam satu halaman.

#sidebar ( lebar: 300px; float: kiri; )

2.5. Pemilih keturunan

Pemilih turunan menerapkan gaya ke elemen dalam elemen penampung. Misalnya, ul li (transformasi teks: huruf besar;) - akan memilih semua elemen li yang merupakan turunan dari semua elemen ul.

Jika Anda ingin memformat turunan dari elemen tertentu, Anda perlu memberikan kelas gaya pada elemen tersebut:

p.pertama a (warna: hijau;) — gaya ini akan berlaku untuk semua tautan turunan paragraf dengan kelas satu;

p .first a (warna: hijau;) - jika Anda menambahkan spasi, tautan yang terletak di dalam tag kelas .first yang merupakan turunan dari elemen akan diberi gaya

First a (color: green;) - gaya ini akan diterapkan ke tautan mana pun yang terletak di dalam elemen lain, yang ditunjuk oleh class.first .

2.6. Pemilih anak

Elemen anak adalah anak langsung dari elemen yang memuatnya. Satu elemen dapat memiliki beberapa elemen turunan, namun setiap elemen hanya dapat memiliki satu elemen induk. Pemilih anak memungkinkan Anda menerapkan gaya hanya jika elemen anak muncul tepat setelah elemen induk dan tidak ada elemen lain di antara elemen tersebut, yaitu elemen anak tidak bersarang di dalam elemen lainnya.
Misalnya, p > strong akan memilih semua elemen kuat yang merupakan anak dari elemen p.

2.7. Pemilih saudara perempuan

Persaudaraan terjadi antara unsur-unsur yang memiliki orangtua yang sama. Pemilih saudara memungkinkan Anda memilih elemen dari sekelompok elemen pada level yang sama.

h1 + p - akan memilih semua paragraf pertama segera setelah tag apa pun

tanpa mempengaruhi paragraf lainnya;

h1 ~ p - akan memilih semua paragraf yang merupakan saudara dari judul h1 mana pun dan segera setelahnya.

2.8. Pemilih atribut

Pemilih atribut memilih elemen berdasarkan nama atribut atau nilai atribut:

[atribut] - semua elemen yang mengandung atribut yang ditentukan, — semua elemen yang atribut altnya ditentukan;

selector[atribut] - elemen jenis ini yang berisi atribut yang ditentukan, img - hanya gambar yang atribut altnya ditentukan;

selector[attribute="value"] - elemen jenis ini berisi atribut tertentu dengan nilai tertentu, img - semua gambar yang judulnya mengandung kata bunga;

selector[attribute~="value"] - elemen yang sebagian mengandung nilai tertentu, misalnya, jika beberapa kelas ditentukan untuk elemen yang dipisahkan oleh spasi, p - paragraf yang nama kelasnya berisi fitur ;

selector[attribute|="value"] - elemen yang daftar nilai atributnya dimulai dengan kata yang ditentukan, p - paragraf yang nama kelasnya feature atau dimulai dengan feature ;

selector[attribute^="value"] - elemen yang nilai atributnya dimulai dengan nilai yang ditentukan, a - semua tautan dimulai dengan http:// ;

selector[attribute$="value"] - elemen yang nilai atributnya diakhiri dengan nilai yang ditentukan, img - semua gambar dalam format png;

selector[attribute*="value"] - elemen yang nilai atributnya berisi kata tertentu di mana saja, a - semua tautan yang namanya mengandung book .

2.9. Pemilih kelas semu

Kelas semu adalah kelas yang sebenarnya tidak melekat pada tag HTML. Mereka memungkinkan Anda menerapkan aturan CSS ke elemen ketika suatu peristiwa terjadi atau mematuhi aturan tertentu. Kelas semu mengkarakterisasi elemen dengan properti berikut:

:hover - elemen apa pun yang menjadi tempat kursor mouse diarahkan;

:fokus - elemen interaktif yang dinavigasi menggunakan keyboard atau diaktifkan menggunakan mouse;

:aktif - elemen yang diaktifkan oleh pengguna;

:valid - kolom formulir yang isinya telah diperiksa di browser untuk kesesuaian dengan tipe data yang ditentukan;

:tidak valid — kolom formulir yang isinya tidak cocok dengan tipe data yang ditentukan;

:enabled - semua kolom formulir aktif;

:disabled — kolom formulir yang diblokir, yaitu dalam keadaan tidak aktif;

:in-range - bidang formulir yang nilainya berada dalam rentang yang ditentukan;

:out-of-range - bidang formulir yang nilainya tidak berada dalam kisaran yang ditentukan;

:lang() - elemen dengan teks dalam bahasa tertentu;

:not(selector) - elemen yang tidak mengandung selector yang ditentukan - kelas, pengidentifikasi, nama atau tipe kolom formulir - :not() ;

:target adalah elemen dengan simbol # yang direferensikan dalam dokumen;

:diperiksa — elemen formulir yang dipilih (dipilih pengguna).

2.10. Pemilih kelas semu struktural

Kelas semu struktural memilih elemen anak sesuai dengan parameter yang ditentukan dalam tanda kurung:

:nth-child(ganjil) - elemen anak ganjil;

:nth-child(even) - elemen anak genap;

:nth-child(3n) - setiap elemen ketiga di antara anak-anak;

:nth-child(3n+2) - memilih setiap elemen ketiga, dimulai dengan anak kedua (+2) ;

:nth-child(n+2) - memilih semua elemen mulai dari yang kedua;

:nth-child(3) - memilih elemen anak ketiga;

:nth-last-child() - dalam daftar elemen anak, pilih elemen dengan lokasi yang ditentukan, mirip dengan:nth-child() , tetapi dimulai dari yang terakhir, dengan arah yang berlawanan;

:first-child - memungkinkan Anda memberi gaya hanya pada elemen anak pertama dari tag;

:last-child - memungkinkan Anda memformat elemen anak terakhir dari tag;

:only-child - memilih elemen yang merupakan satu-satunya elemen anak;

:empty - memilih elemen yang tidak memiliki anak;

:root - memilih elemen yang menjadi root dalam dokumen - elemen html.

2.11. Pemilih kelas semu tipe struktural

Menunjukkan jenis tag anak tertentu:

:nth-of-type() - memilih elemen yang mirip dengan :nth-child() , tetapi hanya memperhitungkan jenis elemen;

:first-of-type - memilih anak pertama dari tipe tertentu;

:last-of-type - memilih elemen terakhir dari tipe ini;

:nth-last-of-type() - memilih elemen dari tipe tertentu dalam daftar elemen sesuai dengan lokasi yang ditentukan, mulai dari akhir;

:only-of-type - memilih satu-satunya elemen dari tipe yang ditentukan di antara elemen anak dari elemen induk.

2.12. Pemilih elemen semu

Elemen semu digunakan untuk menambahkan konten, yang dihasilkan menggunakan properti konten:

:huruf pertama - memilih huruf pertama setiap paragraf, hanya berlaku untuk elemen blok;

:first-line - memilih baris pertama teks elemen, hanya berlaku untuk elemen blok;

:sebelum - menyisipkan konten yang dihasilkan sebelum elemen;

:after - menambahkan konten yang dihasilkan setelah elemen.

3. Kombinasi pemilih

Untuk memilih elemen pemformatan dengan lebih akurat, Anda dapat menggunakan kombinasi pemilih:

img:nth-of-type(even) - akan memilih semua gambar bernomor genap yang berisi teks alternatif kata css.

4. Mengelompokkan penyeleksi

Gaya yang sama dapat diterapkan ke beberapa elemen secara bersamaan. Untuk melakukan ini, Anda perlu mencantumkan penyeleksi yang diperlukan di sisi kiri deklarasi, dipisahkan dengan koma:

H1, h2, p, span (warna: tomat; latar belakang: putih; )

5. Warisan dan riam

Warisan dan cascade adalah dua konsep dasar dalam CSS yang terkait erat. Warisan adalah elemen yang mewarisi properti dari induknya (elemen yang memuatnya). Kaskade memanifestasikan dirinya dalam caranya jenis yang berbeda style sheet diterapkan pada dokumen, dan bagaimana aturan yang bertentangan saling mengesampingkan satu sama lain.

5.1. Warisan

Warisan adalah mekanisme pewarisan sifat-sifat tertentu dari nenek moyang kepada keturunannya. Spesifikasi CSS memungkinkan pewarisan properti yang berkaitan dengan konten teks halaman, seperti warna, font, spasi huruf, tinggi baris, gaya daftar, perataan teks, indentasi teks, transformasi teks, visibilitas, putih -spasi dan spasi kata. Dalam banyak kasus, ini nyaman karena Anda tidak perlu mengatur ukuran font dan jenis font untuk setiap elemen di halaman web.

Properti yang terkait dengan pemformatan blok tidak diwariskan. Ini adalah background , border , display , float dan clear , height dan width , margin , min-max-height dan -width , outline , overflow , padding , position , text-decoration , vertical-align dan z-index .

Warisan yang dipaksakan

Dengan menggunakan kata kunci mewarisi dapat memaksa suatu elemen untuk mewarisi nilai properti apa pun dari elemen induknya. Ini berfungsi bahkan untuk properti yang tidak diwarisi secara default.

Bagaimana gaya CSS diatur dan bekerja

1) Gaya dapat diwarisi dari elemen induk (properti yang diwarisi atau menggunakan nilai warisan);

2) Gaya yang terletak pada lembar gaya di bawah mengesampingkan gaya yang terletak pada tabel di atas;

3) Gaya dari sumber berbeda dapat diterapkan ke satu elemen. Anda dapat memeriksa gaya mana yang diterapkan dalam mode pengembang browser. Untuk melakukan ini, klik pada elemen tersebut klik kanan mouse dan pilih "Lihat kode" (atau yang serupa). Kolom kanan akan mencantumkan semua properti yang disetel pada elemen ini atau diwarisi dari elemen induk, bersama dengan file gaya yang menentukannya, dan nomor seri baris kode.

Beras. 2. Mode pengembang masuk peramban Google krom

4) Saat mendefinisikan gaya, Anda dapat menggunakan kombinasi pemilih apa pun - pemilih elemen, kelas semu elemen, kelas, atau pengidentifikasi elemen.

div (batas: 1px solid #eee;) #wrap (lebar: 500px;).box (float: kiri;).clear (hapus: keduanya;)

5.2. Riam

Bertingkat adalah mekanisme yang mengontrol hasil akhir dalam situasi di mana aturan CSS berbeda diterapkan pada elemen yang sama. Ada tiga kriteria yang menentukan urutan penerapan properti—aturan penting, kekhususan, dan urutan pemasukan style sheet.

Aturan! penting

Bobot aturan dapat ditentukan menggunakan kata kunci!important, yang ditambahkan segera setelah nilai properti, misalnya span (font-weight: bold!important;) . Aturan tersebut harus ditempatkan di akhir deklarasi sebelum tanda kurung tutup, tanpa spasi. Pengumuman tersebut akan didahulukan dari semua peraturan lainnya. Aturan ini memungkinkan Anda untuk membatalkan nilai properti dan menetapkan nilai baru untuk elemen dari sekelompok elemen jika tidak ada akses langsung ke file gaya.

Kekhususan

Untuk setiap aturan, browser menghitung kekhususan pemilih, dan jika suatu elemen memiliki deklarasi properti yang bertentangan, aturan yang memiliki kekhususan paling tinggi akan diperhitungkan. Nilai spesifisitas memiliki empat bagian: 0, 0, 0, 0. Kekhususan pemilih didefinisikan sebagai berikut:

untuk id, 0, 1, 0, 0 ditambahkan;
untuk kelas 0, 0, 1, 0 ditambahkan;
untuk setiap elemen dan elemen semu, 0, 0, 0, 1 ditambahkan;
untuk gaya sebaris yang ditambahkan langsung ke elemen - 1, 0, 0, 0 ;
Selektor universal tidak memiliki kekhususan.

H1 (warna: biru muda;) /*kekhususan 0, 0, 0, 1*/ em (warna: perak;) /*kekhususan 0, 0, 0, 1*/ h1 em (warna: emas;) /*kekhususan: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#hal utama.tentang (warna: biru;) /*kekhususan: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar (warna: abu-abu;) /*kekhususan 0, 0, 1, 0 */ #sidebar (warna: oranye;) /*kekhususan 0, 1, 0, 0*/ li#sidebar (warna: aqua;) /*kekhususan: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

Akibatnya, aturan-aturan yang lebih spesifik akan diterapkan pada elemen tersebut. Misalnya, jika suatu elemen memiliki dua kekhususan dengan nilai 0, 0, 0, 2 dan 0, 1, 0, 1, maka aturan kedua akan menang.

Urutan tabel yang terhubung

Anda dapat membuat beberapa style sheet eksternal dan menghubungkannya ke satu halaman web. Jika di tabel yang berbeda akan bertemu arti yang berbeda properti dari satu elemen, maka sebagai hasilnya aturan dalam style sheet yang tercantum di bawah ini akan diterapkan pada elemen tersebut.

Penyeleksi
Penyeleksi di bahasa CSS

Untuk pertama kalinya kami bertemu Pemilih CSS dalam pelajaran sembilan tutorial CSS. Pada artikel ini kita akan mempelajari selector lebih detail, dan juga melihat tipe selector CSS lainnya.

Pemilih(dari pemilih bahasa Inggris) - penyortiran, pengambilan sampel. Dalam CSS, penyeleksi berarti cara memilih elemen (tag) pada suatu halaman.

Seperti yang kita ketahui dari , skema kode CSSnya terlihat seperti ini:

Pemilih (properti CSS: nilai; properti CSS: nilai; ... dll.)

Jenis pemilih CSS

Ada tiga tipe utama penyeleksi dan hubungannya yang berbeda. Selain itu, terdapat pemilih universal, pemilih atribut, pemilih atribut dan nilai serta pemilihannya menggunakan ekspresi reguler.

Biasanya, saat membuat website, hanya selector dasar yang digunakan.

Jenis Utama Pemilih CSS

1. Pemilih tag— memilih elemen halaman berdasarkan nama tagnya Tagname ( )
2. Kelas pemilih— memilih elemen halaman berdasarkan nama kelasnya. Nama Kelas ( )
3. pemilih ID— memilih elemen halaman berdasarkan namanya pengenal unik#NamaPengidentifikasiUnik ( )

Hubungan Antar Pemilih CSS

Hubungan antara penyeleksi adalah ketika beberapa tanda ditempatkan di antara mereka dalam kode CSS: spasi, koma, tanda kurung siku, dll. Dengan cara ini, Anda dapat memilih elemen mana pun di halaman dengan lebih tepat.

1. Pemilih konteks— pemilihan elemen turunan pemilih pemilih ( ) (beri spasi di antara pemilih).
2. Pemilih anak— pemilihan elemen anak pemilih > pemilih ( ) (tanda lebih besar ditempatkan di antara penyeleksi).
3. Penyeleksi yang berdekatan— pemilihan elemen tetangga (saudara laki-laki, saudara perempuan) pemilih + pemilih ( ) (tanda tambah ditempatkan di antara penyeleksi).

Jika ada yang kurang jelas, jangan khawatir, kami akan melihat masing-masing pemilih dan hubungannya secara terpisah, dalam artikel yang didedikasikan hanya untuk mereka, saya akan menambahkan artikel ini saja :)

Pemilih atribut dan nilai

Pemilih atribut dan nilai- pilih elemen berdasarkan atribut atau atribut dan nilainya.

1. Pemilih atribut— memilih elemen berdasarkan nama atribut [atribut] ( )
2. Pemilih atribut dan nilai— memilih elemen berdasarkan nama dan nilai atributnya [atribut = "nilai"] ( )

Pemilih universal

Dalam kode CSS, pemilih universal ditulis sebagai tanda bintang * Diperlukan pemilih universal untuk melakukannya
untuk mengatur properti CSS ke semua elemen halaman sekaligus. Biasanya digunakan untuk mengatur ulang padding elemen, misalnya:

* (margin:0; bantalan:0; )

Semua elemen halaman memiliki 0 padding.

Pengelompokan penyeleksi

Pengelompokan penyeleksi— memilih beberapa penyeleksi dan menetapkan properti CSS tertentu padanya, diagram:

Pemilih, pemilih ( )

Gunakan koma di antara pemilih.