Di CSS, aturan pencocokan pola menentukan aturan gaya mana yang berlaku untuk elemen di. Pola-pola ini, yang disebut pemilih, dapat berkisar dari nama elemen sederhana hingga pola kontekstual yang kaya. Jika semua kondisi dalam pola benar untuk elemen tertentu, pemilih cocok dengan elemen tersebut
Sensitivitas huruf besar-kecil nama elemen bahasa dokumen di pemilih bergantung pada bahasa dokumen. Misalnya, dalam HTML, nama elemen tidak peka huruf besar-kecil, tetapi dalam XML peka huruf besar-kecil
Tabel berikut meringkas CSS 2. 1 sintaks pemilih
PatternMeaningDescribed in section*Cocok dengan elemen apa pun. Cocok dengan elemen E apa pun [mis. e. , elemen tipe E]. E FMencocokkan setiap elemen F yang merupakan turunan dari elemen E. E > FMencocokkan setiap elemen F yang merupakan anak dari elemen E. E. first-childMencocokkan elemen E ketika E adalah anak pertama dari induknya. E. tautanE. visitMatches elemen E jika E adalah jangkar sumber dari hyperlink yang targetnya belum dikunjungi [. tautan] atau sudah dikunjungi [. dikunjungi]. E. aktif
E. melayang
E. focusMatches E selama tindakan pengguna tertentu. E. lang[c]Cocok dengan elemen tipe E jika dalam bahasa [manusia] c [bahasa dokumen menentukan bagaimana bahasa ditentukan]. E + FMencocokkan setiap elemen F yang langsung didahului oleh elemen saudara E. E[foo]Mencocokkan setiap elemen E dengan kumpulan atribut "foo" [berapa pun nilainya]. E[foo="warning"]Cocok dengan semua elemen E yang nilai atribut "foo"-nya sama persis dengan "warning". E[foo~="warning"]Cocok dengan semua elemen E yang nilai atribut "foo"-nya berupa daftar nilai yang dipisahkan spasi, salah satunya sama persis dengan "warning". E[lang. ="en"]Cocok dengan semua elemen E yang atribut "lang"-nya memiliki daftar nilai yang dipisahkan dengan tanda hubung yang diawali [dari kiri] dengan "en". DIV. khusus bahasa peringatan. [Dalam HTML, sama seperti DIV[class~="warning"]. ]E#myidMencocokkan setiap elemen E dengan ID sama dengan "myid"
Pemilih sederhana adalah a atau diikuti langsung oleh nol atau lebih , , atau , dalam urutan apa pun. Pemilih sederhana cocok jika semua komponennya cocok
Catatan. terminologi yang digunakan di sini di CSS 2. 1 berbeda dari apa yang digunakan di CSS3. Misalnya, "pemilih sederhana" mengacu pada bagian pemilih yang lebih kecil di CSS3 daripada di CSS 2. 1. Lihat modul Pemilih CSS3
Selektor adalah rantai satu atau lebih selektor sederhana yang dipisahkan oleh kombinator. Kombinator adalah. spasi putih, ">", dan "+". Ruang putih mungkin muncul di antara kombinator dan pemilih sederhana di sekitarnya
Elemen pohon dokumen yang cocok dengan pemilih disebut subjek pemilih. Pemilih yang terdiri dari satu pemilih sederhana cocok dengan elemen apa pun yang memenuhi persyaratannya. Mendahulukan pemilih dan kombinator sederhana ke rantai memberlakukan batasan pencocokan tambahan, sehingga subjek pemilih selalu merupakan bagian dari elemen yang cocok dengan pemilih sederhana terakhir
Satu dapat ditambahkan ke pemilih sederhana terakhir dalam rantai, dalam hal ini informasi gaya berlaku untuk subbagian dari setiap subjek
Ketika beberapa penyeleksi berbagi deklarasi yang sama, mereka dapat dikelompokkan ke dalam daftar yang dipisahkan koma
Contoh
Dalam contoh ini, kami memadatkan tiga aturan dengan deklarasi identik menjadi satu. Jadi,
h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif }
setara dengan
h1, h2, h3 { font-family: sans-serif }_
CSS juga menawarkan mekanisme "singkatan" lainnya, termasuk dan
Pemilih universal, ditulis "*", cocok dengan nama jenis elemen apa pun. Ini cocok dengan elemen tunggal apa pun di
Jika pemilih universal bukan satu-satunya komponen a , "*" dapat dihilangkan. Sebagai contoh
This headline is very important
2 danThis headline is very important
3 setaraThis headline is very important
4 danThis headline is very important
5 setaraThis headline is very important
6 danThis headline is very important
7 setara
Pemilih tipe cocok dengan nama tipe elemen bahasa dokumen. Pemilih tipe cocok dengan setiap instance tipe elemen di pohon dokumen
Contoh
Aturan berikut cocok dengan semua elemen H1 di pohon dokumen
h1 { font-family: sans-serif }_
Kadang-kadang, penulis mungkin ingin pemilih mencocokkan elemen yang merupakan turunan dari elemen lain di pohon dokumen [mis. g. , "Cocokkan elemen EM yang dikandung oleh elemen H1"]. Penyeleksi keturunan mengungkapkan hubungan seperti itu dalam suatu pola. Pemilih keturunan terdiri dari dua atau lebih pemilih yang dipisahkan oleh. Pemilih keturunan dari bentuk "
This headline
is very important
8" cocok ketika sebuah elemen This headline
is very important
9 adalah keturunan arbitrer dari beberapa elemen div * p0
Contoh
Sebagai contoh, perhatikan aturan berikut
h1 { color: red } em { color: red }
Meskipun maksud dari aturan ini adalah untuk menambahkan penekanan pada teks dengan mengubah warnanya, efeknya akan hilang dalam kasus seperti ini
This headline is very important
Kami mengatasi kasus ini dengan melengkapi aturan sebelumnya dengan aturan yang menyetel warna teks menjadi biru setiap kali EM muncul di mana saja dalam H1
h1 { color: red } em { color: red } h1 em { color: blue }
Aturan ketiga akan cocok dengan EM di fragmen berikut
This headline
is very important
Contoh
Pemilih berikut
div * p
cocok dengan elemen P yang merupakan cucu atau turunan selanjutnya dari elemen DIV. Perhatikan ruang putih di kedua sisi "*" bukan bagian dari pemilih universal;
Contoh
Pemilih dalam aturan berikut, yang menggabungkan keturunan dan , cocok dengan elemen apa pun yang [1] memiliki kumpulan atribut "href" dan [2] berada di dalam P yang berada di dalam DIV
div p *[href]
Seorang pemilih anak cocok ketika sebuah elemen adalah elemen dari beberapa elemen. Pemilih anak terdiri dari dua atau lebih pemilih yang dipisahkan oleh ">"
Contoh
Aturan berikut menentukan gaya dari semua elemen P yang merupakan anak dari BODY
body > P { line-height: 1.3 }
Contoh
Contoh berikut menggabungkan penyeleksi keturunan dan penyeleksi anak
h1, h2, h3 { font-family: sans-serif }_0
Cocok dengan elemen P yang merupakan turunan dari LI; . Perhatikan bahwa ruang putih opsional di sekitar kombinator ">" telah ditinggalkan
Untuk informasi tentang pemilihan anak pertama dari suatu elemen, silakan lihat bagian pseudo-class di bawah ini
Pemilih saudara yang berdekatan memiliki sintaks berikut. E1 + E2, di mana E2 adalah subjek pemilih. Pemilih cocok jika E1 dan E2 berbagi induk yang sama di pohon dokumen dan E1 segera mendahului E2, mengabaikan simpul non-elemen [seperti simpul teks dan komentar]
Contoh
Dengan demikian, aturan berikut menyatakan bahwa ketika elemen P segera mengikuti elemen MATEMATIKA, itu tidak boleh diindentasi
h1, h2, h3 { font-family: sans-serif }_1
Contoh berikutnya mengurangi ruang vertikal yang memisahkan H1 dan H2 yang langsung mengikutinya
h1, h2, h3 { font-family: sans-serif }_2
Contoh
Aturan berikut mirip dengan yang ada di contoh sebelumnya, kecuali menambahkan pemilih kelas. Dengan demikian, pemformatan khusus hanya terjadi ketika H1 memiliki class="opener"
h1, h2, h3 { font-family: sans-serif }_3
CSS 2. 1 memungkinkan penulis untuk menentukan aturan yang cocok dengan elemen yang memiliki atribut tertentu yang ditentukan dalam dokumen sumber
Pemilih atribut dapat cocok dalam empat cara
div * p1Cocokkan saat elemen menyetel atribut "att", berapa pun nilai atributnya.
div * p2Cocokkan ketika nilai atribut "att" elemen sama persis dengan "val".
div * p3Mewakili elemen dengan atribut
div * p4 yang nilainya berupa daftar kata yang dipisahkan spasi putih, salah satunya persis "val". Jika "val" mengandung spasi putih, itu tidak akan mewakili apa pun [karena kata-kata dipisahkan oleh spasi]. Jika "val" adalah string kosong, itu juga tidak akan mewakili apa pun.
div * p5Mewakili elemen dengan atribut
div * p4, nilainya bisa persis "val" atau dimulai dengan "val" yang langsung diikuti dengan "-" [U+002D]. Ini terutama dimaksudkan untuk memungkinkan kecocokan subkode bahasa [mis. g. , atribut
div * p7 pada elemen
div * p8 dalam HTML] sebagaimana dijelaskan dalam BCP 47 [] atau penggantinya. Untuk pencocokan subkode bahasa ________11______9 [atau
div p *[href]0], silakan lihat
Nilai atribut harus berupa pengidentifikasi atau string. Sensitivitas huruf besar-kecil dari nama dan nilai atribut dalam penyeleksi bergantung pada bahasa dokumen
Contoh
Misalnya, pemilih atribut berikut cocok dengan semua elemen H1 yang menentukan atribut "judul", berapa pun nilainya
h1, h2, h3 { font-family: sans-serif }_4
Contoh
Dalam contoh berikut, pemilih cocok dengan semua elemen SPAN yang atribut "class"-nya memiliki nilai persis "example"
h1, h2, h3 { font-family: sans-serif }_5
Beberapa pemilih atribut dapat digunakan untuk merujuk ke beberapa atribut elemen, atau bahkan beberapa kali ke atribut yang sama
Contoh
Di sini, pemilih cocok dengan semua elemen SPAN yang atribut "halo"-nya memiliki nilai persis "Cleveland" dan atribut "selamat tinggal" yang memiliki nilai persis "Columbus"
h1, h2, h3 { font-family: sans-serif }_6
Contoh
Pemilih berikut mengilustrasikan perbedaan antara "=" dan "~=". Pemilih pertama akan mencocokkan, misalnya, nilai "copyright copyleft copyeditor" untuk atribut "rel". Pemilih kedua hanya akan cocok jika atribut "href" memiliki nilai "http. // www. w3. org/"
h1, h2, h3 { font-family: sans-serif }_7
Contoh
Aturan berikut menyembunyikan semua elemen yang nilai atribut "lang" adalah "fr" [i. e. , bahasanya Perancis]
h1, h2, h3 { font-family: sans-serif }_8
Contoh
Aturan berikut akan cocok dengan nilai atribut "lang" yang dimulai dengan "en", termasuk "en", "en-US", dan "en-cockney"
h1, h2, h3 { font-family: sans-serif }_9
Contoh
Demikian pula, aturan lembar gaya aural berikut memungkinkan skrip dibacakan dengan suara yang berbeda untuk setiap peran
h1 { font-family: sans-serif }_0
Pencocokan terjadi pada nilai atribut di pohon dokumen. Nilai atribut default dapat ditentukan dalam DTD atau di tempat lain, tetapi tidak selalu dapat dipilih oleh pemilih atribut. Lembar gaya harus dirancang agar berfungsi bahkan jika nilai default tidak disertakan dalam pohon dokumen
Lebih tepatnya, UA mungkin, tetapi tidak diharuskan, membaca "subset eksternal" dari DTD tetapi diminta untuk mencari nilai atribut default di "subset internal" dokumen. " [Lihat untuk definisi himpunan bagian ini. ] Bergantung pada UA, nilai atribut default yang ditentukan di subset eksternal DTD mungkin muncul atau tidak muncul di pohon dokumen
UA yang mengenali namespace XML dapat, tetapi tidak diharuskan, menggunakan pengetahuannya tentang namespace tersebut untuk memperlakukan nilai atribut default seolah-olah ada dalam dokumen. [E. g. , XHTML UA tidak diharuskan untuk menggunakan pengetahuan bawaannya tentang DTD XHTML. ]
Perhatikan bahwa, biasanya, implementasi memilih untuk mengabaikan subset eksternal
Contoh
Contoh
Misalnya, perhatikan elemen CONTOH dengan atribut "notasi" yang memiliki nilai default "desimal". Fragmen DTD mungkin
h1 { font-family: sans-serif }_1
Jika style sheet berisi aturan
h1 { font-family: sans-serif }_2
aturan pertama mungkin tidak cocok dengan elemen yang atribut "notasi"-nya disetel secara default, mis. e. , tidak disetel secara eksplisit. Untuk menangkap semua kasus, pemilih atribut untuk nilai default harus dibuang
h1 { font-family: sans-serif }_3
Di sini, karena pemilih
div p *[href]_2 lebih dari pemilih jenis saja, deklarasi gaya pada aturan kedua akan menimpa yang pertama untuk elemen yang memiliki nilai atribut "notasi" dari "oktal". Perhatian harus diambil bahwa semua deklarasi properti yang berlaku hanya untuk kasus default diganti dalam aturan gaya kasus non-default
Bekerja dengan HTML, penulis dapat menggunakan notasi titik [
div p *[href]3] sebagai alternatif dari notasi
div p *[href]4 saat merepresentasikan atribut
div p *[href]5. Jadi, untuk HTML,
div p *[href]6 dan
div p *[href]7 memiliki arti yang sama. Nilai atribut harus segera mengikuti "periode" [
div p *[href]3]. UA dapat menerapkan pemilih menggunakan periode [. ] notasi dalam dokumen XML jika UA memiliki pengetahuan khusus namespace yang memungkinkannya untuk menentukan atribut mana yang merupakan atribut "class" untuk namespace masing-masing. Salah satu contoh pengetahuan khusus namespace adalah prosa dalam spesifikasi untuk namespace tertentu [mis. g. , SVG 1. 1 menjelaskan dan bagaimana UA harus menafsirkannya, dan juga MathML 3. 0 menjelaskan. ]
Contoh
Sebagai contoh, kita dapat menetapkan informasi gaya ke semua elemen dengan class~="pastoral" sebagai berikut
h1 { font-family: sans-serif }4atau hanya
h1 { font-family: sans-serif }5
Berikut ini memberikan gaya hanya untuk elemen H1 dengan class~="pastoral"
h1 { font-family: sans-serif }_6
Mengingat aturan ini, contoh H1 pertama di bawah tidak akan memiliki teks hijau, sedangkan yang kedua akan
h1 { font-family: sans-serif }_7
Untuk mencocokkan subkumpulan nilai "kelas", setiap nilai harus diawali dengan ". "
Contoh
Misalnya, aturan berikut cocok dengan elemen P mana pun yang atribut "kelasnya" telah diberi daftar nilai yang dipisahkan ruang yang mencakup "pastoral" dan "marine"
h1 { font-family: sans-serif }_8
Aturan ini cocok ketika class="pastoral blue aqua marine" tetapi tidak cocok dengan class="pastoral blue"
Catatan. CSS memberikan begitu banyak kekuatan pada atribut "kelas", sehingga penulis dapat merancang "bahasa dokumen" mereka sendiri berdasarkan elemen yang hampir tidak memiliki presentasi terkait [seperti DIV dan SPAN dalam HTML] dan menetapkan informasi gaya melalui atribut "kelas". Penulis harus menghindari praktik ini karena elemen struktural dari bahasa dokumen seringkali telah mengenali dan menerima makna dan kelas yang ditentukan oleh penulis mungkin tidak
Catatan. Jika suatu elemen memiliki beberapa atribut kelas, nilainya harus digabungkan dengan spasi di antara nilai sebelum mencari kelas. Sampai saat ini kelompok kerja tidak mengetahui cara apa pun di mana situasi ini dapat dicapai, sehingga perilaku ini secara eksplisit tidak normatif dalam spesifikasi ini.
Bahasa dokumen mungkin berisi atribut yang dinyatakan sebagai tipe ID. Apa yang membuat atribut tipe ID spesial adalah tidak ada dua atribut yang memiliki nilai yang sama; . Dalam HTML semua atribut ID diberi nama "id";
Atribut ID dari bahasa dokumen memungkinkan penulis untuk menetapkan pengenal ke satu contoh elemen di pohon dokumen. Pemilih ID CSS cocok dengan instance elemen berdasarkan pengidentifikasinya. Pemilih ID CSS berisi "#" yang langsung diikuti dengan nilai ID, yang harus berupa pengidentifikasi
Perhatikan bahwa CSS tidak menentukan bagaimana UA mengetahui atribut ID dari suatu elemen. UA mungkin, e. g. , baca DTD dokumen, minta informasinya di-hard-code atau tanyakan kepada pengguna
Contoh
Pemilih ID berikut cocok dengan elemen H1 yang atribut ID-nya memiliki nilai "bab1"
h1 { font-family: sans-serif }_9
Dalam contoh berikut, aturan gaya cocok dengan elemen yang memiliki nilai ID "z98y". Aturan demikian akan cocok untuk elemen P
h1 { color: red } em { color: red }0
Namun, dalam contoh berikutnya, aturan gaya hanya akan cocok dengan elemen H1 yang memiliki nilai ID "z98y". Aturan tidak akan cocok dengan elemen P dalam contoh ini
h1 { color: red } em { color: red }1
Pemilih ID memiliki kekhususan yang lebih tinggi daripada pemilih atribut. Misalnya, dalam HTML, pemilih #p123 lebih spesifik daripada [id=p123] dalam hal kaskade
Catatan. Dalam XML 1. 0 , informasi tentang atribut mana yang berisi ID elemen terdapat dalam DTD. Saat mem-parsing XML, UA tidak selalu membaca DTD, sehingga mungkin tidak mengetahui ID elemen apa. Jika perancang style sheet mengetahui atau menduga bahwa ini akan terjadi, dia harus menggunakan pemilih atribut normal sebagai gantinya.
div p *[href]9 bukannya
body > P { line-height: 1.3 }0. Namun, urutan kaskade pemilih atribut normal berbeda dari pemilih ID. Mungkin perlu menambahkan ". penting" prioritas untuk deklarasi.
body > P { line-height: 1.3 }_1
Jika suatu elemen memiliki beberapa atribut ID, semuanya harus diperlakukan sebagai ID untuk elemen tersebut untuk keperluan pemilih ID. Situasi seperti itu dapat dicapai dengan menggunakan campuran xml. id , DOM3 Core , DTD XML dan pengetahuan khusus namespace
Di CSS 2. 1, gaya biasanya melekat pada suatu elemen berdasarkan posisinya di dalam. Model sederhana ini cukup untuk banyak kasus, tetapi beberapa skenario penerbitan umum mungkin tidak dapat dilakukan karena struktur dari. Misalnya, dalam HTML 4 [lihat ], tidak ada elemen yang mengacu pada baris pertama paragraf, dan oleh karena itu tidak ada pemilih CSS sederhana yang dapat merujuknya.
CSS memperkenalkan konsep elemen semu dan kelas semu untuk mengizinkan pemformatan berdasarkan informasi yang terletak di luar pohon dokumen
- Elemen semu membuat abstraksi tentang pohon dokumen di luar yang ditentukan oleh bahasa dokumen. Misalnya, bahasa dokumen tidak menawarkan mekanisme untuk mengakses huruf pertama atau baris pertama konten elemen. Elemen semu CSS memungkinkan desainer style sheet merujuk ke informasi yang tidak dapat diakses ini. Pseudo-elements juga dapat memberikan desainer style sheet cara untuk menetapkan gaya ke konten yang tidak ada dalam dokumen sumber [mis. g. , elemen pseudo memberikan akses ke konten yang dihasilkan]
- Kelas semu mengklasifikasikan elemen berdasarkan karakteristik selain nama, atribut, atau kontennya; . Kelas semu mungkin dinamis, dalam arti bahwa suatu elemen dapat memperoleh atau kehilangan kelas semu saat pengguna berinteraksi dengan dokumen. Pengecualian adalah , yang dapat dideduksi dari pohon dokumen, dan , yang dapat dideduksi dari pohon dokumen dalam beberapa kasus
Baik elemen semu maupun kelas semu tidak muncul di sumber dokumen atau pohon dokumen
Kelas semu diperbolehkan di mana saja di pemilih sementara elemen semu hanya dapat ditambahkan setelah pemilih sederhana terakhir dari pemilih
Nama pseudo-element dan pseudo-class tidak peka huruf besar-kecil
Beberapa pseudo-class saling eksklusif, sementara yang lain dapat diterapkan secara bersamaan ke elemen yang sama. Dalam kasus aturan yang bertentangan, yang normal menentukan hasilnya
Itu. first-child pseudo-class cocok dengan elemen yang merupakan elemen anak pertama dari beberapa elemen lainnya
Contoh
Dalam contoh berikut, pemilih mencocokkan setiap elemen P yang merupakan anak pertama dari elemen DIV. Aturan menekan lekukan untuk paragraf pertama DIV
h1 { color: red } em { color: red }2Pemilih ini akan cocok dengan P di dalam DIV dari fragmen berikut.
h1 { color: red } em { color: red }3tetapi tidak akan cocok dengan P kedua dalam fragmen berikut.
h1 { color: red } em { color: red }4
Contoh
Aturan berikut mengatur bobot font menjadi 'tebal' untuk setiap elemen EM yang merupakan turunan dari elemen P yang merupakan anak pertama
h1 { color: red } em { color: red }5
Perhatikan bahwa karena kotak bukan bagian dari pohon dokumen, kotak tidak dihitung saat menghitung anak pertama
Misalnya, EM di
h1 { color: red } em { color: red }6adalah anak pertama dari P
Dua pemilih berikut ini setara
h1 { color: red } em { color: red }7
Agen pengguna biasanya menampilkan tautan yang belum dikunjungi secara berbeda dari tautan yang dikunjungi sebelumnya. CSS menyediakan kelas semu '. tautan' dan '. dikunjungi' untuk membedakannya
- Itu. link pseudo-class berlaku untuk link yang belum dikunjungi
- Itu. kelas semu yang dikunjungi berlaku setelah tautan dikunjungi oleh pengguna
UA dapat mengembalikan tautan yang telah dikunjungi ke [belum dikunjungi] '. link' negara di beberapa titik
Kedua negara saling eksklusif
Bahasa dokumen menentukan elemen mana yang merupakan jangkar sumber hyperlink. Misalnya, dalam HTML4, link pseudo-class berlaku untuk elemen A dengan atribut "href". Jadi, berikut dua CSS 2. 1 deklarasi memiliki efek yang serupa
h1 { color: red } em { color: red }8
Contoh
Jika tautan berikut
________12______9telah dikunjungi, aturan ini.This headline is very important0akan menyebabkannya menjadi biru
Catatan. Ada kemungkinan bagi penulis style sheet untuk menyalahgunakan. tautan dan. mengunjungi kelas semu untuk menentukan situs mana yang telah dikunjungi pengguna tanpa persetujuan pengguna
Oleh karena itu, UA dapat memperlakukan semua tautan sebagai tautan yang belum dikunjungi, atau menerapkan langkah-langkah lain untuk menjaga privasi pengguna sambil menampilkan tautan yang telah dikunjungi dan yang belum dikunjungi secara berbeda. Lihat untuk informasi lebih lanjut tentang menangani privasi
Agen pengguna interaktif terkadang mengubah rendering sebagai respons terhadap tindakan pengguna. CSS menyediakan tiga pseudo-class untuk kasus umum
- Itu. hover pseudo-class berlaku saat pengguna menunjuk elemen [dengan beberapa perangkat penunjuk], tetapi tidak mengaktifkannya. Misalnya, agen pengguna visual dapat menerapkan kelas semu ini saat kursor [penunjuk mouse] melayang di atas kotak yang dihasilkan oleh elemen. Agen pengguna yang tidak mendukung tidak harus mendukung kelas semu ini. Beberapa pendukung agen pengguna yang sesuai mungkin tidak dapat mendukung kelas semu ini [mis. g. , perangkat pena]
- Itu. kelas semu aktif berlaku saat elemen sedang diaktifkan oleh pengguna. Misalnya, antara waktu pengguna menekan tombol mouse dan melepaskannya
- Itu. fokus pseudo-class berlaku saat elemen memiliki fokus [menerima acara keyboard atau bentuk input teks lainnya]
Sebuah elemen dapat cocok dengan beberapa pseudo-class pada saat yang bersamaan
CSS tidak menentukan elemen mana yang mungkin berada di status di atas, atau bagaimana status dimasukkan dan ditinggalkan. Pembuatan skrip dapat mengubah apakah elemen bereaksi terhadap peristiwa pengguna atau tidak, dan perangkat serta UA yang berbeda mungkin memiliki cara berbeda untuk menunjuk, atau mengaktifkan elemen
CSS 2. 1 tidak menentukan apakah induk dari elemen itu adalah '. aktif' atau '. hover' juga dalam keadaan itu
Agen pengguna tidak diharuskan untuk mengubah posisi dokumen yang saat ini ditampilkan karena transisi kelas semu. Misalnya, sebuah style sheet dapat menentukan bahwa dari sebuah. tautan aktif harus lebih besar daripada tautan tidak aktif, tetapi karena hal ini dapat menyebabkan huruf berubah posisi saat pembaca memilih tautan, UA dapat mengabaikan aturan gaya yang sesuai
Contoh
This headline is very important1
Perhatikan bahwa A. hover harus ditempatkan setelah A. tautan dan A. aturan yang dikunjungi, karena jika tidak, aturan kaskade akan menyembunyikan properti A. aturan melayang. Demikian pula karena A. aktif ditempatkan setelah A. arahkan kursor, warna aktif [kapur] akan diterapkan saat pengguna mengaktifkan dan mengarahkan kursor ke elemen A
Contoh
Contoh menggabungkan kelas semu dinamis
This headline is very important2
Pemilih terakhir cocok dengan elemen A yang berada di kelas semu. fokus dan di kelas semu. melayang
Untuk informasi tentang penyajian kerangka fokus, silakan lihat bagian tentang
Catatan. Di CSS1, '. aktif' pseudo-class saling eksklusif dengan '. tautan' dan '. dikunjungi'. Itu tidak lagi terjadi. Sebuah elemen dapat berupa '. dikunjungi' dan '. aktif' [atau '. tautan' dan '. active'] dan aturan kaskade normal menentukan deklarasi gaya mana yang berlaku
Catatan. Perhatikan juga bahwa di CSS1, '. active' pseudo-class hanya diterapkan pada tautan
Jika bahasa dokumen menentukan bagaimana bahasa manusia dari suatu elemen ditentukan, dimungkinkan untuk menulis pemilih dalam CSS yang cocok dengan elemen berdasarkan bahasanya. Misalnya, dalam HTML, bahasa ditentukan oleh kombinasi atribut "lang", elemen META, dan kemungkinan oleh informasi dari protokol [seperti header HTTP]. XML menggunakan atribut yang disebut xml. lang, dan mungkin ada metode khusus bahasa dokumen lainnya untuk menentukan bahasa
Kelas semu '. lang[C]' cocok jika elemennya dalam bahasa C. Apakah ada kecocokan semata-mata didasarkan pada pengidentifikasi C yang sama dengan, atau substring yang dipisahkan dengan tanda hubung, nilai bahasa elemen, dengan cara yang sama seperti jika dilakukan oleh operator. Pencocokan C dengan nilai bahasa elemen dilakukan tanpa peka huruf besar-kecil untuk karakter dalam rentang ASCII. Pengidentifikasi C tidak harus berupa nama bahasa yang valid
C tidak boleh kosong
Catatan. Sebaiknya dokumen dan protokol menunjukkan bahasa menggunakan kode dari BCP 47 atau penggantinya, dan melalui "xml. lang" untuk dokumen berbasis XML. Lihat "FAQ. Kode bahasa dua huruf atau tiga huruf. "
Contoh
Aturan berikut menetapkan tanda kutip untuk dokumen HTML dalam bahasa Prancis Kanada atau Jerman
This headline is very important3
Pasangan aturan kedua sebenarnya mengatur properti pada elemen Q sesuai dengan bahasa induknya. Ini dilakukan karena pemilihan tanda kutip biasanya didasarkan pada bahasa elemen di sekitar kutipan, bukan kutipan itu sendiri. seperti potongan bahasa Prancis "à l'improviste" di tengah teks bahasa Inggris ini menggunakan tanda kutip bahasa Inggris
Perhatikan perbedaan antara [lang. =xx] dan. bahasa [xx]. Dalam contoh HTML ini, hanya BODY yang cocok dengan [lang. =fr] [karena memiliki atribut LANG] tetapi BODY dan P cocok. lang[fr] [karena keduanya dalam bahasa Prancis]
This headline is very important4
Elemen semu berperilaku seperti elemen nyata di CSS dengan pengecualian yang dijelaskan di bawah dan
Perhatikan bahwa bagian di bawah ini tidak menentukan rendering yang tepat dari '. baris pertama' dan '. huruf pertama' dalam semua kasus. Tingkat CSS di masa mendatang dapat mendefinisikannya dengan lebih tepat
5. 12. 1. elemen pseudo baris pertama
Itu. elemen semu baris pertama menerapkan gaya khusus pada konten baris pertama yang diformat dari sebuah paragraf. Contohnya
This headline is very important5
Aturan di atas berarti "ubah huruf baris pertama setiap paragraf menjadi huruf besar". Namun, pemilih "P. first-line" tidak cocok dengan elemen HTML asli mana pun. Itu cocok dengan elemen semu yang akan disisipkan di awal setiap paragraf
Perhatikan bahwa panjang baris pertama bergantung pada beberapa faktor, termasuk lebar halaman, ukuran font, dll. Jadi, paragraf HTML biasa seperti
This headline is very important6
yang garis-garisnya terputus sebagai berikut
This headline is very important7
mungkin "ditulis ulang" oleh agen pengguna untuk menyertakan urutan tag fiktif untuk. garis pertama. Urutan tag fiktif ini membantu menunjukkan bagaimana properti diwariskan
This headline is very important8
Jika elemen semu memecah elemen nyata, efek yang diinginkan seringkali dapat dijelaskan dengan urutan tag fiktif yang menutup dan kemudian membuka kembali elemen tersebut. Jadi, jika kita menandai paragraf sebelumnya dengan elemen SPAN
This headline is very important_9
agen pengguna dapat mensimulasikan tag awal dan akhir untuk SPAN saat memasukkan urutan tag fiktif untuk. garis pertama
h1 { color: red } em { color: red } h1 em { color: blue }_0
Itu. elemen semu baris pertama hanya dapat dilampirkan ke a
"Baris terformat pertama" dari suatu elemen dapat terjadi di dalam turunan tingkat blok dalam aliran yang sama [mis. e. , turunan level blok yang tidak diposisikan dan bukan pelampung]. e. g. , baris pertama DIV di
body > P { line-height: 1.3 }_2adalah baris pertama dari P [dengan asumsi bahwa P dan DIV adalah level blok]
Baris pertama sel-tabel atau blok-sebaris tidak boleh menjadi baris pertama yang diformat dari elemen leluhur. Jadi, di
body > P { line-height: 1.3 }_3
body > P { line-height: 1.3 }_4baris pertama DIV yang diformat bukanlah baris "Halo"
Perhatikan bahwa baris pertama P dalam fragmen ini
body > P { line-height: 1.3 }_5 tidak mengandung huruf apa pun [dengan asumsi gaya default untuk BR dalam HTML 4]. Kata "Pertama" tidak ada di baris pertama yang diformat
UA harus bertindak seolah-olah tag awal fiktif dari elemen semu baris pertama bersarang tepat di dalam elemen level blok terlampir terdalam. [Karena CSS1 dan CSS2 diam dalam kasus ini, penulis tidak boleh mengandalkan perilaku ini. ] Berikut adalah contohnya. Urutan tag fiktif untuk
h1 { color: red } em { color: red } h1 em { color: blue }_1
adalah
h1 { color: red } em { color: red } h1 em { color: blue }_1
Itu. elemen semu baris pertama mirip dengan elemen level sebaris, tetapi dengan batasan tertentu. Sifat-sifat berikut berlaku untuk a. elemen pseudo baris pertama. properti font, properti warna, dan. UA juga dapat menerapkan properti lain
Itu. elemen semu huruf pertama harus memilih huruf pertama dari baris pertama blok, jika tidak didahului oleh konten lain [seperti gambar atau tabel sebaris] pada barisnya. Itu. pseudo-element huruf pertama dapat digunakan untuk "initial caps" dan "drop caps", yang merupakan efek tipografi yang umum. Jenis huruf awal ini mirip dengan elemen tingkat sebaris jika propertinya adalah 'tidak ada', selain itu mirip dengan elemen mengambang
Ini adalah properti yang berlaku untuk. elemen semu huruf pertama. properti font, [bila sesuai], [hanya jika 'float' adalah 'tidak ada'], properti warna, UA juga dapat menerapkan properti lain. Untuk memungkinkan UA merender drop cap atau initial cap yang benar secara tipografis, UA dapat memilih tinggi garis, lebar, dan tinggi berdasarkan bentuk huruf, tidak seperti elemen normal. CSS3 diharapkan memiliki properti khusus yang berlaku untuk huruf pertama
Contoh ini menunjukkan kemungkinan rendering dari batas awal. Perhatikan bahwa 'line-height' yang diwarisi oleh elemen semu huruf pertama adalah 1. 1, tetapi UA dalam contoh ini telah menghitung tinggi huruf pertama secara berbeda, sehingga tidak menimbulkan spasi yang tidak perlu di antara dua baris pertama. Perhatikan juga bahwa tag awal fiktif dari huruf pertama ada di dalam SPAN, sehingga berat font huruf pertama normal, tidak tebal seperti SPAN
h1 { color: red } em { color: red } h1 em { color: blue }_3
CSS 2 berikut. 1 akan membuat drop cap huruf awal membentang sekitar dua baris
h1 { color: red } em { color: red } h1 em { color: blue }_4
Contoh ini mungkin diformat sebagai berikut
Urutan tag fiksi adalah
h1 { color: red } em { color: red } h1 em { color: blue }_5
Perhatikan bahwa. tag elemen semu huruf pertama berbatasan dengan konten [mis. e. , karakter awal], sedangkan. tag awal elemen semu baris pertama dimasukkan tepat setelah tag awal elemen blok
Untuk mencapai pemformatan drop cap tradisional, agen pengguna dapat memperkirakan ukuran font, misalnya untuk menyelaraskan baseline. Juga, garis besar mesin terbang dapat diperhitungkan saat memformat
Tanda baca [i. e, karakter yang didefinisikan dalam Unicode di "buka" [Ps], "tutup" [Pe], "awal" [Pi]. kelas tanda baca "final" [Pf] dan "lainnya" [Po], yang mendahului atau mengikuti huruf pertama harus disertakan, seperti pada
The '. first-letter' juga berlaku jika huruf pertama sebenarnya adalah digit, e. g. , angka "6" dalam "67 juta dolar adalah uang yang banyak. "
Itu. elemen semu huruf pertama berlaku untuk
Itu. elemen semu huruf pertama dapat digunakan dengan semua elemen yang berisi teks, atau yang memiliki turunan dalam aliran yang sama yang berisi teks. UA harus bertindak seolah-olah tag awal fiktif dari elemen semu huruf pertama tepat sebelum teks pertama elemen, bahkan jika teks pertama tersebut adalah turunan
Contoh
Ini sebuah contoh. Urutan tag fiktif untuk fragmen HTML ini
h1 { color: red } em { color: red } h1 em { color: blue }_6
adalah
h1 { color: red } em { color: red } h1 em { color: blue }_6
Huruf pertama dari sel-tabel atau blok-sebaris tidak boleh menjadi huruf pertama dari elemen leluhur. Jadi, di
body > P { line-height: 1.3 }_3
body > P { line-height: 1.3 }_4huruf pertama DIV bukan huruf "H". Faktanya, DIV tidak memiliki huruf pertama
Huruf pertama harus muncul di Misalnya, di fragmen ini
body > P { line-height: 1.3 }_5 baris pertama tidak mengandung huruf apapun dan '. first-letter' tidak cocok dengan apa pun [dengan asumsi gaya default untuk BR dalam HTML 4]. Secara khusus, itu tidak cocok dengan "F" dari "Pertama. "
Jika suatu elemen adalah ['display. daftar-item'], '. first-letter' berlaku untuk huruf pertama di kotak utama setelah penanda. UA mungkin mengabaikan '. huruf pertama' pada item daftar dengan 'posisi-gaya-daftar. dalam'. Jika suatu elemen memiliki '. sebelumnya' atau '. setelah 'isi,'. first-letter berlaku untuk huruf pertama elemen termasuk konten tersebut
E. g. , setelah aturan 'p. sebelum {konten. "Catatan. "}', pemilih 'p. huruf pertama' cocok dengan "N" dari "Note"
Beberapa bahasa mungkin memiliki aturan khusus tentang cara memperlakukan kombinasi huruf tertentu. Dalam bahasa Belanda, misalnya, jika kombinasi huruf "ij" muncul di awal kata, maka kedua huruf tersebut harus diperhitungkan dalam. elemen semu huruf pertama
Jika huruf yang akan membentuk huruf pertama tidak berada dalam elemen yang sama, seperti "'T" in
body > P { line-height: 1.3 }_9, UA dapat membuat elemen semu huruf pertama dari salah satu elemen, kedua elemen, atau tidak membuat elemen semu
Demikian pula, jika huruf pertama dari blok tidak berada di awal baris [misalnya karena penataan ulang dua arah], maka UA tidak perlu membuat pseudo-element[s]
Contoh
Contoh berikut mengilustrasikan bagaimana elemen semu yang tumpang tindih dapat berinteraksi. Huruf pertama dari setiap elemen P akan berwarna hijau dengan ukuran font '24pt'. Sisa dari baris pertama yang diformat akan menjadi 'biru' sedangkan sisa paragraf akan menjadi 'merah'
h1 { color: red } em { color: red } h1 em { color: blue }_8
Dengan asumsi bahwa jeda baris akan muncul sebelum kata "berakhir", urutan tag fiktif untuk fragmen ini mungkin
h1 { color: red } em { color: red } h1 em { color: blue }_9
Perhatikan bahwa. elemen huruf pertama ada di dalam. elemen baris pertama. Properti diaktifkan. lini pertama diwarisi oleh. huruf pertama, tetapi diganti jika properti yang sama diaktifkan. surat pertama
The '. sebelum' dan '. after' pseudo-elements dapat digunakan untuk menyisipkan konten yang dihasilkan sebelum atau sesudah konten elemen. Mereka dijelaskan di bagian teks yang dihasilkan
Contoh
This headline
is very important
0Ketika. huruf pertama dan. elemen semu baris pertama diterapkan ke elemen yang memiliki konten yang dihasilkan menggunakan. sebelum dan. setelah itu, mereka berlaku untuk huruf atau baris pertama elemen termasuk konten yang dihasilkan