Как через псевдоэлементы выбрать первый CSS класс «et_pb_blurb_content»?

Question

[Vladimir Kalaganov]

Друзья подскажите пожалуйста как выбрать только первый элемент имея код ниже?
Сейчас выбирается все элементы

А нужно только выделенный красным квадратом

CSS

.popast-na-urok .et_pb_blurb_content:nth-of-type(1) .et_pb_main_blurb_image:before{
    content:"1";
}

HTML

<div class="popast-na-urok">
				<div>
				<div>
				<div class="et_pb_blurb_content">
					<div class="et_pb_main_blurb_image"><span class="et_pb_image_wrap"><span class="et-pb-icon et-waypoint et_pb_animation_off divi_elegant-themes_icon_gtm et-animated" data-family="elegant-themes"></span></span></div>
				</div> <!-- .et_pb_blurb_content -->
			</div> <!-- .et_pb_blurb -->
			</div> <!-- .et_pb_column -->
			
			<div>
				<div>
				<div class="et_pb_blurb_content">
					<div class="et_pb_main_blurb_image"><span class="et_pb_image_wrap"><span class="et-pb-icon et-waypoint et_pb_animation_off divi_elegant-themes_icon_gtm et-animated" data-family="elegant-themes"></span></span></div>
				</div> <!-- .et_pb_blurb_content -->
			</div> <!-- .et_pb_blurb -->
			</div> <!-- .et_pb_column -->
			
			<div>
				<div>
				<div class="et_pb_blurb_content">
					<div class="et_pb_main_blurb_image"><span class="et_pb_image_wrap"><span class="et-pb-icon et-waypoint et_pb_animation_off divi_elegant-themes_icon_gtm et-animated" data-family="elegant-themes"></span></span></div>
				</div> <!-- .et_pb_blurb_content -->
			</div> <!-- .et_pb_blurb -->
			</div> <!-- .et_pb_column -->
</div>

Answer 1

[Vladimir Kalaganov]

Спасибо за ответ) У меня просто выбираются все элементы, а не подскажите как выбрать только в первом красном квадрате?

Comments

[Николай Чуприк]

Владимир Калаганов, я вижу всей картины, чтобы попробовать самому. Откройте F12 отладчик в браузере, наведитесь на нужный вам элемент внутри обёрток и посмотрите его селектор или просто посмотрите, на каком "этаже" структуры документа он находится. Это можно сделать кучей способов (обвёл)


А вообще изучите селекторы. Это просто же.

[Vladimir Kalaganov]

Николай Чуприк, Спасибо вам) Изучаю) Если есть желание попробовать то вот сайт https://perm.pikcha.pw/green/ (самый нижний блок)

[Николай Чуприк]

Вы хотите шаблон wordpress подправить вручную? Мне кажется — не самая лучшая идея для начинающего.

Дело в том, что классы элементов в таких шаблонах многоэтажные, впрочем, как и обёртки. Кроме того, они "по ходу пьесы" могут меняться. Бывает трудно понять, как составить уникальный селектор, чтобы он а). всегда работал и б). не затронул чего лишнего и не поломал там.

[Vladimir Kalaganov]

Николай Чуприк, Благодаря вам разобрался, изучил селектора и нашёл свою ошибку)
Вот код который работает:

.popast-na-urok .et_pb_column:nth-child(1) .et_pb_main_blurb_image:before{
    content:"1";
}
.popast-na-urok .et_pb_column:nth-child(2) .et_pb_main_blurb_image:before{
    content:"2";
}
.popast-na-urok .et_pb_column:nth-child(3) .et_pb_main_blurb_image:before{
    content:"3";
}
.popast-na-urok .et_pb_column:nth-child(4) .et_pb_main_blurb_image:before{
    content:"4";
}

Answer 2

[Николай Чуприк]

Не уловил проблему. А чем не устраивает:
.popast-na-urok div:first
ну или обобщая:
.popast-na-urok div:nth-child(0)

Comments

[Vladimir Kalaganov]

Простите, Я не совсем понимаю как потом выбрать например второй, третий псевдоэлемент( Могли ли вы написать один полный пример реализации? (пока погугллю) Спасибо что уделил время