Bisakah saya memiliki beberapa: sebelum pseudo-elemen untuk elemen yang sama?

116

Apakah mungkin memiliki beberapa :beforepseudo untuk elemen yang sama?

.circle:before {
    content: "\25CF";
    font-size: 19px;
}
.now:before{
    content: "Now";
    font-size: 19px;
    color: black;
}

Saya mencoba menerapkan gaya di atas ke elemen yang sama menggunakan jQuery, tetapi hanya yang terbaru yang diterapkan, tidak pernah keduanya.

ChrisOdney
sumber

Jawaban:

94

Di CSS2.1, sebuah elemen hanya dapat memiliki paling banyak satu dari semua jenis elemen semu kapan saja. (Ini berarti sebuah elemen dapat memiliki a :beforedan :afterpseudo-element - tidak dapat memiliki lebih dari satu dari setiap jenis.)

Akibatnya, ketika Anda memiliki beberapa :beforeaturan yang cocok dengan elemen yang sama, semuanya akan menurun dan diterapkan ke satu :beforeelemen semu, seperti pada elemen normal. Dalam contoh Anda, hasil akhirnya terlihat seperti ini:

.circle.now:before {
    content: "Now";
    font-size: 19px;
    color: black;
}

Seperti yang Anda lihat, hanya contentdeklarasi yang memiliki prioritas tertinggi (seperti yang disebutkan, yang datang terakhir) yang akan berlaku - deklarasi lainnya akan dibuang, seperti halnya dengan properti CSS lainnya.

Perilaku ini dijelaskan di bagian Selektor CSS2.1 :

Elemen semu berperilaku seperti elemen nyata di CSS dengan pengecualian yang dijelaskan di bawah dan di tempat lain.

Ini menyiratkan bahwa penyeleksi dengan pseudo-elemen bekerja seperti penyeleksi untuk elemen normal. Ini juga berarti kaskade harus bekerja dengan cara yang sama. Anehnya, CSS2.1 tampaknya menjadi satu-satunya referensi; baik css3-selector maupun css3-cascade menyebutkan hal ini sama sekali, dan masih harus dilihat apakah itu akan dijelaskan dalam spesifikasi yang akan datang.

Jika sebuah elemen dapat mencocokkan lebih dari satu selektor dengan elemen semu yang sama, dan Anda ingin semuanya diterapkan, Anda perlu membuat aturan CSS tambahan dengan pemilih gabungan sehingga Anda dapat menentukan dengan tepat apa yang harus dilakukan browser pada elemen tersebut. kasus. Saya tidak dapat memberikan contoh lengkap termasuk contentproperti di sini, karena tidak jelas misalnya apakah simbol atau teks harus diutamakan. Tetapi pemilih yang Anda perlukan untuk aturan gabungan ini adalah salah satu .circle.now:beforeatau .now.circle:before- pemilih mana pun yang Anda pilih adalah preferensi pribadi karena kedua penyeleksi setara, Anda hanya contentperlu menentukan nilai properti itu sendiri.

Jika Anda masih membutuhkan contoh konkret, lihat jawaban saya untuk pertanyaan serupa ini .

Spesifikasi konten css3 yang lama berisi bagian tentang menyisipkan beberapa elemen ::beforedan ::afterpseudo menggunakan notasi yang kompatibel dengan kaskade CSS2.1, tetapi perhatikan bahwa dokumen tersebut sudah usang - belum diperbarui sejak 2003, dan tidak ada yang memilikinya menerapkan fitur itu dalam dekade terakhir. Kabar baiknya adalah bahwa dokumen yang ditinggalkan secara aktif menjalani penulisan ulang dengan kedok css-content-3 dan css-pseudo-4 . Kabar buruknya adalah bahwa fitur beberapa elemen semu tidak dapat ditemukan di kedua spesifikasi, mungkin karena, sekali lagi, kurangnya minat pelaksana.

BoltClock
sumber
12
Dalam kasus tertentu, jika sebuah elemen dimiliki oleh kelas circledan kelas now, kedua aturan tersebut berlaku untuk elemen :beforesemu elemen, tetapi CSS normal menyiratkan bahwa hanya satu dari contentpengaturan yang dapat diterapkan (dengan aturan kaskade normal). Intinya adalah agar contenttidak menumpuk.
Jukka K. Korpela
Ternyata pertanyaan yang saya jawab beberapa bulan kemudian ini adalah duplikat dari pertanyaan ini. Saya telah menggabungkan sebagian besar informasi dari jawaban lain, yang pada dasarnya memperluas semua yang dikatakan @Jukka di atas, menjadi yang ini karena lalu lintasnya jauh lebih banyak, selain menjadi yang pertama.
BoltClock
1
Setelah 13 tahun, draf css-content-3 akhirnya diperbarui . Bagian pseudo-elemen jelas telah dihapus demi css-pseudo-4, yang tidak mengizinkan banyak ::beforeatau ::afterpseudo-elemen.
Oriol
@Oriol: 12 tahun, sebenarnya. FPWD css-pseudo-4 diperkenalkan tahun lalu, di mana css-content-3 telah diperbarui untuk mengarah ke spesifikasi baru.
BoltClock
@BoltClock Draf editor css-content-3 di drafts.csswg.org telah diupdate beberapa waktu yang lalu, tetapi draft kerja di w3.org masih merupakan draft tahun 2003 sampai saat ini. Saya masih memiliki beberapa harapan ...
Oriol
31

Jika elemen utama Anda memiliki beberapa elemen anak atau teks, Anda dapat memanfaatkannya.

Posisikan elemen utama Anda relatif (atau absolut / tetap) dan gunakan keduanya: sebelum dan: setelah diposisikan absolut (dalam situasi saya, itu harus absolut, tidak tahu tentang milik Anda).

Sekarang jika Anda menginginkan satu pseudo-element lagi, lampirkan absolute: before ke salah satu turunan elemen utama (jika Anda hanya memiliki teks, letakkan dalam sebuah span, sekarang Anda memiliki elemen), yang tidak relatif / absolut / tetap .

Elemen ini akan mulai bertindak seolah-olah pemiliknya adalah elemen utama Anda.

HTML

<div class="circle">
    <span>Some text</span>
</div>

CSS

.circle {
    position: relative; /* or absolute/fixed */
}

.circle:before {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

.circle:after {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

.circle span {
    /* not relative/absolute/fixed */
}

.circle span:before {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}
HydraOrc
sumber
2
Meskipun jawaban yang dipilih akurat, ini adalah solusi yang layak untuk kasus saya. Saya dapat mensimulasikan memiliki beberapa elemen psuedo tanpa perlu menambahkan lebih banyak node ke DOM!
matt.kauffman23
@ matt.kauffman23 jadi, dapatkah Anda memberi tahu bagaimana Anda mensimulasikan?
BbIKTOP
1
@BbIKTOP maaf baru saja melihat komentar Anda. Dalam kasus saya, saya sedang mengerjakan modal yang selalu memiliki anak jadi saya berakhir dengan sesuatu seperti:.modal:first-child:before { …
matt.kauffman23
@ matt.kauffman23 Untuk mengingat kembali detail seperti ini setelah lebih dari 6 tahun, Anda memiliki ingatan yang luar biasa!
ChrisOdney
1

Saya telah menyelesaikan ini menggunakan:

.element:before {
    font-family: "Font Awesome 5 Free" , "CircularStd";
    content: "\f017" " Date";
}

Menggunakan jenis font "font awesome 5 free" untuk ikonnya, dan setelah itu, kita harus menentukan font yang akan kita gunakan lagi karena jika kita tidak melakukannya, navigator akan menggunakan font default (times new roman atau semacamnya ini).

Keko Perera
sumber