Форум

Сергей Ракипов · #1 (**permalink**) 07.02.2021, 07:32

Не понимаю почему обводка применилась не к текст 2 а ко второму блоку

<!doctype html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<title>index</title>
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<style>
		.wraper {
			margin: 0 auto;
			width: 320px;

		}
		.block1 {
			height: 50px;
			background-color:azure;
			margin: 10px 0px 10px 0px;
		}
		.block2 {
			height: 50px;
			background-color:azure;
			margin: 10px 0px 10px 0px;
			display: flex;
			align-items: center;
		}
		.block2:nth-child(2){
			border: 1px dashed tomato;
		}
		.text1 {
			width: 140px;
		}
		.text2 {
			width: 140px;
		}
		.block3 {
			height: 50px;
			background-color:azure;
			margin: 10px 0px 10px 0px;
		}
		.block4 {
			height: 50px;
			background-color:azure;
			margin: 10px 0px 10px 0px;
		}
	</style>
</head>
<body>
	<div class="wraper">
		<div class="block1"></div>
		<div class="block2">
			<div class="text1">Текст1</div>
			<div class="text2">Текст2</div>
		</div>
		<div class="block3"></div>
		<div class="block4"></div>
	</div>
</body>
</html>

voraa · #2 (**permalink**) 07.02.2021, 08:03

.block2:nth-child(2)

Это не второй ребенок блока с классом .block2, а блок с классом .block2, который является вторым ребенком у своего родителя.

Если нужен второй ребенок у блока .block2
То
.block2>:nth-child(2)

Сергей Ракипов · #3 (**permalink**) 07.02.2021, 08:46

voraa,
Спасибо

А почему если я запишу так

.block2 :nth-child(2)

Это тоже сработает

voraa · #4 (**permalink**) 07.02.2021, 09:17

Сообщение от Сергей Ракипов

А почему если я запишу так

.block2 :nth-child(2)

Это тоже сработает

> - ищет только детей
" " - ищет любых потомков, включая детей
.block2 :nth-child(2) - любой потомок .block2, который является вторым ребенком у своего родителя. div.text2 - тоже подходит.

Если, например написать .wraper :nth-child(2), то подойдут и div.block2 и div.text2

Сергей Ракипов · #5 (**permalink**) 07.02.2021, 09:43

voraa,
Спасибо

Форум

Справочник

Discord чат

Курсы javascript