Bagaimana cara menargetkan saudara pertama saya di css?

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

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 dan

  This headline 
  is very important
  

  3 setara

• This headline 
  is very important
  

  4 dan

  This headline 
  is very important
  

  5 setara

• This headline 
  is very important
  

  6 dan

  This 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

This headline 
is very important

div * p 

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 }

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 }

Contoh berikutnya mengurangi ruang vertikal yang memisahkan H1 dan H2 yang langsung mengikutinya

h1, h2, h3 { font-family: sans-serif }

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 }

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 * p 

div * p 

div * p 

div * p 

div * p 

div * p 

div * p 

div * p 

div p *[href]

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 }

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 }

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 }

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 }

Contoh

Aturan berikut menyembunyikan semua elemen yang nilai atribut "lang" adalah "fr" (i. e. , bahasanya Perancis)

h1, h2, h3 { font-family: sans-serif }

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 }

Contoh

Demikian pula, aturan lembar gaya aural berikut memungkinkan skrip dibacakan dengan suara yang berbeda untuk setiap peran

h1 { font-family: sans-serif }

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 }

Jika style sheet berisi aturan

h1 { font-family: sans-serif }

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 }

Di sini, karena pemilih

div p *[href]

Bekerja dengan HTML, penulis dapat menggunakan notasi titik (

div p *[href]

div p *[href]

div p *[href]

div p *[href]

div p *[href]

div p *[href]

Contoh

Sebagai contoh, kita dapat menetapkan informasi gaya ke semua elemen dengan class~="pastoral" sebagai berikut

h1 { font-family: sans-serif }

h1 { font-family: sans-serif }

Berikut ini memberikan gaya hanya untuk elemen H1 dengan class~="pastoral"

h1 { font-family: sans-serif }

Mengingat aturan ini, contoh H1 pertama di bawah tidak akan memiliki teks hijau, sedangkan yang kedua akan

h1 { font-family: sans-serif }

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 }

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 }

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 }

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 }

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]

body > P { line-height: 1.3 }

body > P { line-height: 1.3 }

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 }

h1 { color: red }
em { color: red }

h1 { color: red }
em { color: red }

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 }

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 }

Dua pemilih berikut ini setara

h1 { color: red }
em { color: red }

Agen pengguna biasanya menampilkan tautan yang belum dikunjungi secara berbeda dari tautan yang dikunjungi sebelumnya. CSS menyediakan kelas semu '. tautan' dan '. dikunjungi' untuk membedakan mereka

• 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 }

Contoh

Jika tautan berikut

This headline is very important

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 important

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 important

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 important

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 important

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 important

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 important

yang garis-garisnya terputus sebagai berikut

This headline is very important

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 important

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

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 }

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 }

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 }

body > P { line-height: 1.3 }

Perhatikan bahwa baris pertama P dalam fragmen ini

body > P { line-height: 1.3 }

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 }

adalah

h1 { color: red }
em { color: red }
h1 em { color: blue }

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 }

CSS 2 berikut. 1 akan membuat drop cap huruf awal membentang sekitar dua baris

h1 { color: red }
em { color: red }
h1 em { color: blue }

Contoh ini mungkin diformat sebagai berikut

Urutan tag fiksi adalah

h1 { color: red }
em { color: red }
h1 em { color: blue }

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 }

adalah

h1 { color: red }
em { color: red }
h1 em { color: blue }

Huruf pertama dari sel-tabel atau blok-sebaris tidak boleh menjadi huruf pertama dari elemen leluhur. Jadi, di

body > P { line-height: 1.3 }

body > P { line-height: 1.3 }

Huruf pertama harus muncul di Misalnya, di fragmen ini

body > P { line-height: 1.3 }

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 }

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 }

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 }

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

Ketika. 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

Bagaimana cara memilih saudara pertama di CSS?

Bagaimana cara memilih saudara kandung di CSS?

Bagaimana cara menargetkan anak pertama saya di CSS?

Bagaimana cara menargetkan elemen pertama di CSS?