выбор первого дочернего элемента списка без включения внуков

Question

У меня есть следующий код, который я бы хотел выбрать first child только для элемента, который является first child, чтобы он появился в синем, а последний ребенок - fourth child, чтобы быть в красном.
Однако великие дети также выбраны таким образом, дети второго ребенка. первый великий ребенок появляется в синем, а остальные - красным. есть способ, которым я мог выбрать детей, не включая внуков.
Если что-то неясно, просто комментарий ниже, и я отвечу как можно скорее.
Спасибо заранее.

.parent > ul > li > ul 
 
{ 
 
    display:none; 
 
} 
 
.has_children:hover > ul 
 
{ 
 
    display:block; 
 
} 
 
.parent > ul :first-child 
 
{ 
 
    color:blue; 
 
} 
 
.parent > ul :last-child 
 
{ 
 
    color:red; 
 
}

<div class = "parent"> 
 
<ul> 
 
    <li>first child</li> 
 
    <li class = "has_children">second child 
 
    <ul> 
 
    <li>first grand child</li> 
 
    <li>second grand child</li> 
 
    <li>third grand child</li> 
 
    </ul> 
 
    </li> 
 
    <li>third child</li> 
 
    <li>fourth child</li> 
 
</ul> 
 
</div>

Answer 1

Try:

.parent > ul > li:first-child 
{ 
    color:blue; 
} 
.parent > ul > li:last-child 
{ 
    color:red; 
} 

Таким образом, вы выбираете первый li и последний li, который приходит непосредственно внутри ребенка ul в .parent DIV ,

CHECK IT OUT

Answer 2

Вы можете использовать first-child и last-child без выбора своего родителя. По W3:

: первый-ребенок псевдо-класс

The: первый-ребенок псевдо-класс соответствует элементу, который является первым дочерним элементом какого-либо другого элемента.

Однако для выбора первого и последнего ребенка вам не нужно использовать дедушку или родителя.

li:first-child { 
    background: red; 
} 

li:last-child { 
    background: red; 
} 

другое решение:

li:nth-child(1) 

li:nth-of-type(1) 
li::nth-last-of-type(1) 

Answer 3

вы можете увеличить ваши селекторы и использовать первую и последнюю из-типа

.parent > ul > li > ul 
 
{ 
 
    display:none; 
 
} 
 
.has_children:hover > ul 
 
{ 
 
    display:block; 
 
} 
 
.parent > ul > li:first-of-type 
 
{ 
 
    color:blue; 
 
} 
 
.parent > ul > li:last-of-type 
 
{ 
 
    color:red; 
 
}

<div class = "parent"> 
 
<ul> 
 
    <li>first child</li> 
 
    <li class = "has_children">second child 
 
    <ul> 
 
    <li>first grand child</li> 
 
    <li>second grand child</li> 
 
    <li>third grand child</li> 
 
    </ul> 
 
    </li> 
 
    <li>third child</li> 
 
    <li>fourth child</li> 
 
</ul> 
 
</div>

Answer 4

Попробуйте

.parent > ul > li:first-child { 
    color: blue; 
} 
.parent > ul > li:last-child { 
    color: red; 
}