1. 2 계층 선택자

 1.2.1 계층 선택자 종류

조상 후손 { } 조상 요소와 후손 요소 사이를 한 칸 띄움 
부모>자식 { } 부모 자식 요소 사이에 > 가 붙음
형~제 { } 형과 아우 요소 사이에 ~ 가 붙음 
형+바로밑의동생 { }  형과 바로밑의동생 요소 사이에 + 가 붙음 
요소명:first-child { } 해당 요소 중에서 첫 번째 자식 선택 
요소명:first-of-type { }  해당 요소 중에서 첫 번째 요소 선택 
요소명:last-child { }  해당 요소 중에서 마지막 번째 자식 선택 
요소명:last-of-type { }  해당 요소 중에서 마지막 번째 요소 선택 
요소명:nth-child(숫자) { }  해당 요소 중에서 숫자 번째 자식 선택 
요소명:nth-of-type(숫자) { }  해당 요소 중에서 숫자 번째 요소 선택
요소명:only-child { }  해당 요소가 하나인 자식 선택 
요소명:only-of-type { }  해당 요소가 하나인 요소 선택 
요소명:empty { }  해당 요소가 비어 있는 경우 선택 

1.2.2 예제를 활용하여 연습하기

<div class="ex1">
        <nav class="gnb">
            <ul class="lst1">
                <li class="item1"><a href="">항목1</a></li>
                <li class="item2"><a href="">항목2</a></li>
                <li class="item3"><a href="">항목3</a></li>
            </ul>
            <ol class="lst2">
                <li class="item4"><a href="">항목4</a></li>
                <li class="item5"><a href="">항목5</a></li>
                <li class="item6"><a href="">항목6</a></li>
                <li class="item7"><a href="">항목7</a></li>
            </ol>
            <ol class="lst2">
                <li class="item8"><a href="">항목8</a></li>
            </ol>
            <ul class="lst3"><li></li></ul>
        </nav>
    </div>

<div class="ex1">
    <ul class="lst1">
        <li class="item1"><a href="">항목1</a></li>
        <li class="item2"><a href="">항목2</a></li>
        <li class="item3"><a href="">항목3</a></li>
     </ul>
</div>

• 클래스의 후손 중에서 li 요소를 선택 → .exm1 li {}
• ex1 클래스부터 그 안의 모든 노드를 모두 기재 → .exm1>nav>.list1>li {}
• item1 클래스의 동생들을 선택 → .exm1 .item1 ~ li {}
• item1 클래스의 바로 다음의 li 하나만 선택 → .exm1 .tiem1+li {}
• 첫 번째 자식 선택 → li : first-child {}
• 첫번째 요소 선택 → li : first-of-type {}
• 마지막 자식 선택 → li : last-child {}
• 마지막 요소 선택 → li : last-of type {}
• 두번째 자식 선택 → li : nth-child(2) {}
• 두번째 요소 선택 → li : nth-of-type(2) {}
• 홀수 번째 자식 선택 → li : nth-child(2n+1) {}
• 짝수 번째 자식 선택 → li : nth-child(2n) {}
• 해당 요소가 하나만 있는 자식 선택 → li : only-child {}
• 해당 요소가 하나만 있는 요소 선택 → li : only-of-type {}
• 자식이 없거나 내용이 비어 있으면 선택 → li : empty {}