Nth-of-type работает так же, как nth-child, я не могу выбрать то, что хочу, в очень простой разметке

См. этот код или следующий снимок экрана и код: https://codepen.io/rockmandash/pen/YbJQqG.

Мой HTML

<div class = "container">
  <div class = "child"></div>
  <div class = "line"></div>
  <div class = "child"></div>
  <div class = "line"></div> I want to select this element(second line)
  <div class = "child"></div>
  <div class = "line"></div>
</div>

CSS

.container {
  border: 1px solid red;
  width: 50px;
  height: 150px;
}

.child {
  width: 30px;
  height: 30px;
  background: green;
  margin: 6px;
}
.line:nth-of-type(2) {  I chosed, but not working as expected
  width: 15px;
  height: 15px;
  background: black;
}

Снимок экрана

Nth-of-type работает так же, как nth-child, я не могу выбрать то, что хочу, в очень простой разметке

Почему мой nth-of-type работает так же, как nth-child?

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
21
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

:nth-of-type соответствует nth брату данного тип (например, <div>).

Поскольку элементы .line являются элементами <div>, с .line:nth-of-type(2) вы, по сути, заявляете, что хотите настроить таргетинг на второй родственный элемент, который имеет тот же тип, что и .line:

div
    div
    div - target
    div
    div

Оказывается, это первый.line.

Скорее всего, вы хотите .line:nth-of-type(4) или, менее запутанно, div:nth-of-type(4):

.container {
  border: 1px solid red;
  width: 50px;
  height: 150px;
}

.child {
  width: 30px;
  height: 30px;
  background: green;
  margin: 6px;
}

.line:nth-of-type(4) {
  width: 15px;
  height: 15px;
  background: black;
}
<div class = "container">
  <div class = "child"></div>
  <div class = "line"></div>
  <div class = "child"></div>
  <div class = "line"></div> I want to select this element(second line)
  <div class = "child"></div>
  <div class = "line"></div>
</div>

Обратите внимание, что не существует такой вещи, как :nth-of-class, поэтому вам, вероятно, потребуется назначить элементу уникальный класс или идентификатор, если вы не хотите использовать такой сложный селектор.

Селектор :nth-of-type(n) соответствует каждому элементу, который является n-м дочерним элементом определенного типа (например, div and p) его родителя, а селектор :nth-child(n) соответствует каждому элементу, который является n-м дочерним элементом, независимо от типа, его родителя.

Поэтому используйте nth-child или span вместо div для line class

.container {
  border: 1px solid red;
  width: 50px;
  height: 150px;
}

.child {
  width: 30px;
  height: 30px;
  background: green;
  margin: 6px;
}

.line:nth-of-type(2) {
  width: 15px;
  height: 15px;
  background: black;
  display:block;
}
<div class = "container">
  <div class = "child"></div>
  <span class = "line"></span>
  <div class = "child"></div>
  <span class = "line"></span> 
  <div class = "child"></div>
  <span class = "line"></span>
</div>

Другие вопросы по теме