:before и :after. Возможно ли повторное применение?

[sologub]

Здравствуйте.
Можно ли использовать несколько :before и :after в одном элементе?

Типа:

<div id="one"></div>

#one {
  ...
}

#one:before{
  ...
}

#one:{[B]ещеодин[/B]}before{
  ...
}

#one:after{
  ...
}

Спасибо.

[Naive]

Нельзя. Потихоньку приходят web-elements, но поддерживаются пока только хромом вроде. Для всех остальных — только бефор и афтер. Впрочем для твоей задачи (из соседнего поста) вполне их хватит.

[Вадим Мошев]

Можно попробовать так сделать (выяснил, что нельзя - так не работает!):

<div class="one two three"></div>

Где

.one:before {

}

.one:after {

}

.two:before {

}

.two:after {

}

.three:before {

}

.three:after {

}

[Naive]

Сообщение от Вадим Мошев

Можно попробовать так сделать:

<div class="one two three"></div>

Где

.one:before {

}

.one:after {

}

.two:before {

}

.two:after {

}

.three:before {

}

.three:after {

}

Сам бы попробовал сперва)
Тест на сообразительность:

.one {
  color: #f00;
}

.two {
  color: #ff0;
}

.three {
  color: #00f;
}

какой цвет текста будет у элемента?

[Вадим Мошев]

Полагаю, color: #00f; то есть, синий, так как это свойство самое последнее.
Я прав? Или лев?

Впрочем, ответ я уже знаю, так как сам прибегал к приёмам переопределения свойств, тем более, что на jsfiddle всё проверил, хотя знал, какой будет результат заранее.

А вот что касается псевдо-элементов... если мне не изменяет память, у меня такое прокатывало, хотя здесь

.two:before {

}

.two:after {

}

...предыдущий (one) затёрся.
В любом случае, даже если такой приём ошибочный, что нам мешает сделать несколько вложенных друг в друга дивов, задать классы у них, а потом применить тот CSS, что я написал?

[Naive]

Сообщение от Вадим Мошев

В любом случае, даже если такой приём ошибочный, что нам мешает сделать несколько вложенных друг в друга дивов, задать классы у них, а потом применить тот CSS, что я написал?

Это и есть единственное решение.
Там видишь как получилось, по w3c предполагалось, что будет элемент <quote>, у которого должны быть кавычки. Предложили они это сделать псевдо-элементами, ведь в зависимости от языка и уровня применения кавычки меняются (курим типографику кавычек, особенно советую прихрунеть за правила польских кавычек). Все разрабы браузеров весело воскликнули: "хренали мы будем делать псевды тока для куота? сделаем для всех элементов, а отображение решим делать/неделать в зависимости от наличия свойства content" — так появились они. Резонно разрабы решили, что предыдущее подходит по певдоклассы и запилили синтаксис как у них, :before. Однако в W3C быстро пришло понимание, что это не совсем то... это не состояние, а реальный элемент, хоть и псевдо.
И быренько запилили новый стандарт на бефо-афтэ, собсна и обозвав их псевдоэлементами. Естественно, для них сделали новый синтаксис, правильно их писать ::before, но в ИЕ8 был уже заюзан старый синтаксис на псевдоклассы, а все современные браузеры оставили оба написания
И так, теперь мы имеем: у каждой дом-ноды имеется два дополнительных внутренних объекта, которые полностью неизвестны инспектору и рендеру только если у них content === null, но можем на них лепить любые элементы оформления.
То, как их стали юзать разработчики и стало предвестником разработки в браузерах компонента web-elements, это будет следующий шаг. Будет шаблонизатор внутри браузера и разработчики приложений сами будут создавать свои элементы со сложным оформлением. А-ля как сейчас мы делаем инпут с двумя видами контента: value && placeholder, web-elements позволят создавать целые кортежи из контента... Будет что-то вроде:

<newslist>
  <news pic="/news/pics/1.png">
    Вадим Мошев опять смарозил фигню
  </news>
  <news pic="/news/pics/2.png">
    Владимир Путин опять спас мир
  </news>
</news>

- и там можно будет допинать всякие иконки, аннотацию, дату... и все это можно будет указать в нормальном виде для поисковиков. Все СЕО превратится в нормальный копирайтинг наконец.

[Вадим Мошев]

Это и есть единственное решение.

Я немного неправильно выразился, из-за чего ты меня неправильно понял. Говоря про неверное решение, я имел в виду последовательное применение стилей с последующим заданием у них псевдоэлементов.

Применение нескольких вложенных друг в друга блоков я считал альтернативным решением, а не ошибочным. Как мы выяснили, оно же является единственно верным.

А-ля как сейчас мы делаем инпут с двумя видами контента: value && placeholder, web-elements позволят создавать целые кортежи из контента... Будет что-то вроде:

В принципе, это интересно. Это - скажем там, ещё один шаг в сторону абстрагированности или инкапсуляции. То есть, для создания той или иной сущности, мы сможем создать минимально похожие друг на друга структуры. Но я сейчас для достижения таких целей строю примерно такую структуру (в зависимости от целей, конечно):

<div class="news-list-wrapper">
	<div class="news-item">
		<div class="news-picture"></div>

		<div class="news-fields">
			<div class="news-date"> 31 декабря 2099 года</div>

			<div class="news-header">
				Naive забыл побриться и стал похож на одного из мужиков, которые нарисованы на подаренных ему рисунках
			</div>

			<div class="news-text">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</div>
		</div>
	</div>
</div>

Что скажешь?

[Naive]

Сообщение от Вадим Мошев

Что скажешь?

Сейчас для этого надо юзать хтмл5:
.news-list станет <aside>
.news-item будет <article>
.news-item_caption — <h1>
.news-item_description — <p>
.news-item_date — <time datetime="<%=new Date(create_at).getTime()%>">