HTML - silbling 연산자

Adjacent sibling selector A + B (A의 이웃한 B를 찾아라) General sibling selector A ~ B(A의 이웃한것들 중에서 B를 찾아라)

Adjacent sibling selector

 <style>
     #main-menu >ul>li.first{
            font-size: 30px;
            font-weight: bold;
        }
</style>

<nav id ="main-menu">   
    <h1>메인메뉴</h1>
    <ul>
        <li class = "first">
            <a href="">학습가이드</a>
            <ul>
                <li class ="first">서브메뉴</li>
            </ul>
        </li>
        <li ><a href="" class = "first">강좌선택</a></li>
        <li><a href="">AnswerIs</a></li>
    </ul>
</nav>

-> 똑같은 class first 가있는데 첫번째 li (학습가이드)를 찾고싶다면 #main-menu >ul>li.first 에서 찾으면된다.

General sibling selector

<style>
    #main-menu >ul>li.first~.aa{
                font-size: 30px;
                font-weight: bold;
            }
</style>

<nav id ="main-menu">   
    <h1>메인메뉴</h1>
    <ul>
        <li class = "first"><a href="">학습가이드</a></li>
        <li ><a href="" class = "first">강좌선택</a></li>
        <li class ="aa"><a href="">AnswerIs</a></li>
    </ul>
</nav>

-> #main-menu >ul>li.first~.aa 동생들 중에서 aa 가있는지 찾아서 적용해라.