Почему не работает last-child?

Question

[Ivanushka255]

https://codepen.io/Van245/pen/abdrYRV

Мне надо для третьего блока отменить margin-right. Прописываю через last-child – не работает. Что не так?

<div class="third_block">
		<div class="wrap_third_block">
			<div class="one_block bl">
				<h2 class="third_h">camping</h2>
				<p class="third_p">Lorem ipsum dolor sit amet, consectetur adip</p>
			</div>
			<div class="two_block bl">
				<h2 class="third_h">hiking</h2>
				<p class="third_p">Lorem ipsum dolor sit amet, consectetur adip</p>
			</div>
			<div class="three_block bl">
				<h2 class="third_h">scuba diving</h2>
				<p class="third_p">Lorem ipsum dolor sit amet, consectetur adip</p>

.wrap_third_block {
	display: flex;
}

.third_h {
	color: #ffffff;
	font-family: Roboto;
	font-size: 24px;
	font-weight: 500;
	text-transform: uppercase;
}

.third_p {
	color: #ffffff;
	font-family: Roboto;
	font-size: 12px;
	font-weight: 300;
}

.bl {
	width: 360px;
	height: 240px;
	border-radius: 10px;
	background-color: #cc5c33;
	margin-right: 30px;
}

.wrap_third_block:last-child {
	margin: 0;
}

Answer 1

[Александр]

.bl:last-child (Почему?)

Comments

[Ivanushka255]

Да, так действительно все работает! Только не пойму по каким причинам надо прописывать last-child через модификатор? Почему все не работает через "основной" класс? Не нашел этому объяснения по той ссылке, что вы мне дали)

Answer 2

[Роман Дворянов]

Ваш псевдоселектор направлен не на потомков класса, а к контейнеру с классами, вы пытаетесь взять последний элемент с классом .wrap_third_block а он у вас всего один и да, к нему добавляется margin-right: 0;

Если вы хотите взять последний элемент из трех, то

.bl:last-child {
  margin-right: 0;
}

Comments

[Ivanushka255]

А все, понял. Спасибо!