См. этот код или следующий снимок экрана и код: 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
брату данного тип (например, <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>