다중 li에서 첫번쨰 li에만 색상변경
본문
<ul class="nav navbar-nav navbar-right">
<li><a href="">부모1</a></li>
<li><a href="">부모2</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" >부모3</a>
<ul class="dropdown-menu">
<li><a href="">자식1</a></li>
<li><a href="">자식2</a></li>
</ul>
</li>
<li><a href="">부모4</a></li>
</ul>
현재 부모3 밑에 자식 li가 있습니다.
변경 하고자하는 것은 부모1만 색깔을 변경 하는것입니다.
그래서 아래의 css로 변경하였는데,
.navbar .nav li:first-child a{
color: #ff4000;
}
부모1과 자식1둘다 빨간색으로 변경되더라구요.
아마도 첫번째 li의 속성을 변경햇기 때문인데,
자식li를 건들지않고 부모1만 색을 변경하는 방법이 있을까요?
답변 1
.navbar-nav > li:first-child a {
이렇게 하면 안 되려나요?
해결됏씁니다 정말 감사합니다!
추가적으로 -nav >의 역할이 무엇인지 여쭤봐도 될까요?
> 이 선택자는 한 단계 아래에 있는 자식 요소만 선택합니다.
css 자식 선택자로 검색해 보시면 더 많은 정보 찾으실 수 있습니다.