Возможно ли иметь псевдоэлемент внутри псевдоэлемента?

div { position: relative; width: 100px; height: 100px; background: #f00; }
div::before { position: absolute; content: ''; width: 75px; height: 75px; background: #0f0; }
div::before::before { position: absolute; content: ''; width: 50px; height: 50px; background: #00f; }

Является ли мой синтаксис неправильным или псевдоэлемент внутри псевдоэлемента не поддерживается?

Обратите внимание, что я знаю о псевдоэлементе ::after, хотя мне нужен фактический элемент внутри другого псевдоэлемента для достижения, например. где ::after недостаточно:

div { position: relative; width: 100px; height: 100px; background: #f00; }
div::before { position: absolute; content: ''; right: 0; bottom: 0; width: 75px; height: 75px; background: #0f0; }
div::after { position: absolute; content: ''; left: 0; top: 0; width: 50px; height: 50px; background: #00f; }

Потому что ::after относится к элементу, а не ::before.


css css-selectors pseudo-element
person Gajus    schedule 25.07.2013    source источник
comment
см. этот пост stackoverflow.com/q/9007546/703717   -  person Danield    schedule 26.07.2013
comment
Поскольку вы выполняете позиционирование absolute, нет причин не использовать :after, просто нужно, чтобы его позиция в некотором отношении вычислялась по позиции :before (см. jsfiddle.net/dBj3c/4, который помещает :after туда, где он был бы, если бы на самом деле было возможно быть :before:before на основе вашего кода выше).   -  person ScottS    schedule 26.07.2013

Ответы (1)


arrow_upward
14
arrow_downward

Является ли мой синтаксис неправильным или псевдоэлемент внутри псевдоэлемента не поддерживается?

Если я правильно вас понял, это невозможно. Вы не можете связать несколько псевдоэлементов, начиная с селекторов уровня 3. хотя это, по-видимому, может быть разрешено в будущем.

Для каждого селектора может появиться только один псевдоэлемент, и если он присутствует, он должен появиться после последовательности простых селекторов, представляющих объекты селектора. Примечание. В будущей версии этой спецификации может быть разрешено использование нескольких псевдоэлементов для каждого селектора.

Интересно, что вы можете объединить псевдоэлементы ::first-letter и ::before / ::after с псевдоэлементом-заполнителем, например

::-webkit-input-placeholder::first-letter {
color: purple;  
}

http://jsfiddle.net/k3yb6/1/

person Jason Yaraghi    schedule 25.07.2013
comment
«очевидно, это будет разрешено, как только браузеры примут Selectors Level 4» — Selectors level 4 также не позволяет (в настоящее время) использовать несколько псевдоэлементов: dev.w3.org/csswg/selectors4/#псевдоэлементы. - person Paul D. Waite; 26.07.2013
comment
@ Пол Д. Уэйт: Верно, но, учитывая, что это WD, все может измениться к тому времени, когда это будет CR или позже. Спасибо, что указали на это. - person Jason Yaraghi; 26.07.2013
comment
действительно Я думаю, что такие строки иногда помещаются в спецификации W3C довольно спекулятивно (т. е. не из-за реальных планов реализации того, что они описывают), но в любом случае у меня нет реальных знаний. - person Paul D. Waite; 26.07.2013
comment
@Paul, Adrift: он был изучен еще на уровне 3 сгенерированного контента: w3.org /TR/css3-content/#nesting Излишне говорить, однако, что он так и не стал популярным. Также обратите внимание на возраст модуля — если он не ожидает перезаписи, вероятно, он заброшен. - person BoltClock; 26.07.2013