Выберите конкретный тип элемента его родителя
В предыдущей статье мы уже узнали, как от первого дочернего элемента и последнего дочернего элемента выбирать конкретные элементы.
В этой статье мы поговорим о том, что в некоторых ситуациях первый конкретный тип элемента не является первым дочерним элементом его родителя.
Исходный код:
Например, в следующем примере мы добавляем ‹h1› перед первым ‹p›. А также добавьте нижний колонтитул перед концом ‹div›.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p:last-child {
background-color: blue;
}
p:first-child {
background-color: red;
}
</style>
</head>
<body>
<div>
<h1>Header</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<div>div</div>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<footer>footer</footer>
</body>
</html>
Теперь, если мы используем исходный CSS, который просто выбирает первый дочерний элемент и последний дочерний элемент. Нет никакого эффекта на веб-странице.
p:last-child {
background-color: blue;
}
p:first-child {
background-color: red;
}
Первый тип и последний тип
Чтобы решить эту проблему, мы можем просто перейти на использование первого по типу и последнего по типу, это позволит нам нацеливаться на первое вхождение элемента определенного типа в его родительском элементе.
Например, поскольку мы хотим настроить таргетинг на ‹p›. Мы можем сказать
p:first-of-type {
background-color: blue;
}
p:last-of-type {
background-color: red;
}
Первый и последний абзацы ‹div› выбираются снова!
Подписывайтесь на нас: YouTube, Medium, Udemy, Linkedin, Twitter.
