CSS선택자4

<h2>일반 구조 선택자</h2>
    <pre>
        형제 관계에 있는 요소 중 특정 요소를 선택하는 선택자

        (중요) 위치를 기준으로 구분함

        :first-child
        :last-child
        :nth-child(수열)
        :nth-last-child(수열)
    </pre>

    <div id="test1">
        <p>테스트1</p>
        <p>테스트2</p>
        <p>테스트3</p>
        <p>테스트4</p>
        <p>테스트5</p>
        <pre>테스트6</pre>
    </div>


    <hr>

    <h2>형태 구조 선택자</h2>
    <pre>
        선택된 형제 관계 요소 중 특정 요소를 선택하는 선택자.

        (선택된 요소들을 기준으로 구분)

        :first-of-type - 같이 선택된 형제들 중에서 첫번째요소
        :last-of-type - 같이 선택된 형제들 중에서 마지막요소
        :nth-of-type(수열) - 같이 선택된 형제들 중에서 수열 번째 모든요소
        :nth-last-of-type(수열) - 같이 선택된 형제들 중에서 뒤에서 수열번째 모든요소
    </pre>

    <div id="test2">
        <pre>테스트 0</pre>
        <p>테스트1</p>
        <p>테스트2</p>
        <p>테스트3</p>
        <p>테스트4</p>
        <p>테스트5</p>
        <pre>테스트 6</pre>
    </div>


    <hr>

    <h2>부정 선택자( 선택자1:not(선택자2) )</h2>
    <pre>
        괄호 내 선택자를 제외한 나머지 요소를 선택
    </pre>

    <ul id="test3">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>```