CSS | 자식레벨 선택자 지정하기 (띄어쓰기와 >)

스터디때 언급된 부분이라 나도 살펴봤다.

일단 나의 코드는 이렇게 생겼다

<nav id="menu">
        <ul>
          <li><a href="index.html" class="current-page">HOME</a></li>
          <li><a href="introduction.html">INTRODUCTION</a></li>
          <li><a href="like.html">THINGS I LIKE</a></li>
        </ul>
</nav>

<!--
index.html의 코드.
index.html페이지를 보고있을땐 home 글씨만 다른색으로 보여주기 위해 그부분만 class값을 줬다.

introduction.html파일의 코드는
<li><a href="index.html">HOME</a></li>
<li><a href="introduction.html "class="current-page">INTRODUCTION</a></li>
<li><a href="like.html">THINGS I LIKE</a></li>
이렇게 introduction에 효과를 적용하기 위해 그 부분에 클래스값을 줌
-->

현재 열린 페이지의 메뉴색을 다르게 해서 구분하기 위해 현재페이지에 클래스값을 주고 글자색을 다르게 설정했다.

.current-page{color: black;}

index.html페이지를 보고있을 때 나오는 메뉴바 글씨

 

 

그런데 다른부분을 만지다보니 이 효과가 작동하지 않아서 선택자를 좀더 구체적으로 지정해 보려고 코드를 변경해보았다. 

#menu .current-page{color: black;}

그랬더니 다시 작동했다.

나는 이 선택자를 id가 'menu'인 태그 안에 있는 class이름이 'current-page'인 태그 라고만 알고 있었는데

알아보니 더 정확하게는

id가 'menu'인 태그 안에 있는 class이름이 'current-page'인 모든 태그이다.

그래서 #menu ul li .current-page 로 적지 않아도 되는 것이다.

 

그리고 이렇게 하위 태그를 선택하는 방법 중 '>'를 사용하는 방법도 있는데,

이건 부모>자식을 하나하나 지정해줘야한다.

그래서 >를 사용해서 같은 부분을 선택자로 하기 위해서는

#menu > ul > li > .current-page{color: black;}
/*
id가 'menu'인 부모의 자식인 <ul>의 자식인 <li>의 자식인 클래스명이 'current-page'인 태그
의 색을 black으로
*/

위처럼 사용해야 한다. 

 

#menu > .current-page{color: black;}
/*
이렇게 사용하면 코드가 동작하지 않는다.
.current-page는 #menu의 바로 아래 자식이 아니기 때문이다.
*/

이것은 id="menu"를 부모로 가진 class="current-page"인 태그를 말하는 선택자인데,

해당하는 태그는 내 코드에 존재하지 않는다. 그래서 원하는 결과가 나오지 않는다.

결과: 글자색 안바뀜

 

 

 

 

참고자료

https://www.w3schools.com/cssref/css_selectors.asp

CSS Selectors Reference

element element	div p	Selects all <p> elements inside <div> elements
element>element	div > p	Selects all <p> elements where the parent is a <div> element