2026, 새로운 도약을 시작합니다.

다중 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개

채택된 답변
+20 포인트

.navbar-nav > li:first-child a {

이렇게 하면 안 되려나요?

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

해결됏씁니다 정말 감사합니다!
추가적으로 -nav >의 역할이 무엇인지 여쭤봐도 될까요?
> 이 선택자는 한 단계 아래에 있는 자식 요소만 선택합니다.
css 자식 선택자로 검색해 보시면 더 많은 정보 찾으실 수 있습니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고