Чи можу я мати кілька: перед псевдоелементами для одного елемента?


116

Чи можливо мати кілька :beforeпсевдо для одного елемента?

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

Я намагаюся застосувати вищевказані стилі до одного і того ж елемента за допомогою jQuery, але застосовується лише останній, ніколи не обидва.

Відповіді:


94

У CSS2.1 елемент може мати лише максимум один із псевдоелементів у будь-який час. (Це означає, що елемент може мати як а, так :beforeі :afterпсевдоелемент - він просто не може мати більше одного з кожного виду.)

Як результат, коли у вас є кілька :beforeправил, що відповідають одному і тому ж елементу, всі вони будуть каскадно застосовуватись до одного :beforeпсевдоелемента, як до нормального елемента. У вашому прикладі кінцевий результат виглядає приблизно так:

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

Як бачите, contentнабирає чинності лише декларація, яка має найвищий пріоритет (як уже згадувалося, та, яка є останньою) - решта декларацій відкидаються, як це стосується будь-якого іншого властивості CSS.

Така поведінка описана в розділі " Селектори" CSS2.1 :

Псевдоелементи поводяться так само, як реальні елементи в CSS, за винятком, описаним нижче та в інших місцях.

Це означає, що селектори з псевдоелементами працюють так само, як і селектори для нормальних елементів. Це також означає, що каскад повинен працювати так само. Як не дивно, CSS2.1 видається єдиним посиланням; ні css3-селектори, ні css3-каскад про це взагалі не згадують, і залишається зрозуміти, чи буде це уточнено в майбутній специфікації.

Якщо елемент може збігатися з декількома селекторами з одним і тим же псевдоелементом, і ви хочете, щоб усі вони якось застосовувались, вам потрібно буде створити додаткові правила CSS з комбінованими селекторами, щоб ви могли точно вказати, що повинен робити браузер у цих справ. Я не можу навести повний приклад, включаючи contentтут властивість, оскільки не зрозуміло, наприклад, чи символ або текст мають бути першими. Але селектор, який вам потрібен для цього комбінованого правила, є .circle.now:beforeабо .now.circle:before- будь-який вибраний вами вибір - це особисті переваги, оскільки обидва селектори еквівалентні, це лише значення contentвластивості, яке вам потрібно буде визначити самостійно.

Якщо вам ще потрібен конкретний приклад, дивіться мою відповідь на це подібне запитання .

Спадкова специфікація вмісту css3 містить розділ про вставлення декількох ::beforeта ::afterпсевдоелементів за допомогою позначень, сумісних із каскадом CSS2.1, але зауважте, що цей конкретний документ є застарілим - він не оновлювався з 2003 року, і ніхто не має реалізував цю функцію за останнє десятиліття. Хороша новина полягає в тому, що покинутий документ активно переживає переписування під виглядом css-content-3 та css-pseudo-4 . Погана новина полягає в тому, що особливості псевдоелементів ніде не зустрічаються в жодній специфікації, імовірно, знову ж таки через відсутність інтересу до реалізатора.


12
У даному випадку, якщо елемент належить circleі до класу now, і до класу , обидва правила застосовуються до :beforeпсевдоелемента елемента, але звичайний CSS означає, що тільки одне з contentпараметрів може набути чинності (за нормальними правилами каскаду). Справа в тому, що contentне накопичується.
Jukka K. Korpela

Виявляється, це питання, на яке я відповів кілька місяців пізніше, є дублікатом цього. З того часу я об'єднав більшу частину інформації з іншої відповіді, яка в основному розширюється на все, що @Jukka сказав вище, в цю, оскільки вона отримує набагато більше трафіку, крім того, що йде першою.
BoltClock

1
Через 13 років проект css-content-3 остаточно оновився . Розділ псевдоелементів, безумовно, видалено на користь css-pseudo-4, який не допускає множинних ::beforeта ::afterпсевдоелементів.
Оріол

@Oriol: фактично 12 років. FPWD css-pseudo-4 було введено минулого року, в цей час css-content-3 вже було оновлено, щоб вказати на нову специфікацію.
BoltClock

@BoltClock Проект редактора css-content-3 на drafts.csswg.org був оновлений деякий час тому, але робочий проект на w3.org був ще 2003-м до недавнього часу. Я все ще мав надії ...
Оріол

31

Якщо ваш основний елемент містить деякі дочірні елементи або текст, ви можете ним скористатися.

Розташуйте свій основний відносний елемент (або абсолютний / фіксований) і використовуйте обидва: до і: після позиціонування абсолютного (у моїй ситуації він повинен був бути абсолютним, не знаю про ваше).

Тепер, якщо ви хочете ще один псевдоелемент, прикріпіть абсолют: раніше до одного з дітей основного елемента (якщо у вас є лише текст, покладіть його в проміжок, тепер у вас є елемент), який не є відносним / абсолютним / фіксованим .

Цей елемент почне діяти так, як його власник - ваш головний елемент.

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 */
}

2
Незважаючи на те, що обрана відповідь є точною, для мого випадку це було життєздатною справою. Мені вдалося імітувати наявність декількох елементів psuedo без необхідності додавати більше вузлів у DOM!
matt.kauffman23

@ matt.kauffman23 так, скажіть, будь ласка, як ви імітували?
BbIKTOP

1
@BbIKTOP вибачте щойно побачив ваш коментар. У моєму випадку я працював над модалом, у якого завжди були діти, тому я закінчився чимось на зразок:.modal:first-child:before { …
matt.kauffman23

@ matt.kauffman23 Щоб пригадати подібну деталь після більш ніж 6 років, у вас є чудова пам’ять!
ChrisOdney

1

Я вирішив це за допомогою:

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

Використовуючи сімейство шрифтів "font awesome 5 free" для піктограми, і після цього, ми повинні вказати шрифт, який ми використовуємо знову, тому що, якщо ми цього не зробимо, навігатор буде використовувати шрифт за замовчуванням (рази нові римські або щось подібне це).

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.