CSS 선택자4

• 일반 구조 선택자
  : 형제 관계에 있는 요소 중 특정 요소를 선택하는 선택자
  
  (중요) 위치를 기준으로 구분함
  
  :first-child
  :last-child
  :nth-child(수열)
  :nth-last-child(수열)

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

/* 일반 구조 선택자 */

/* first-child : 형제 관계의 요소 중 첫 번째 요소 */
#test1 > p:first-child{
    background-color: pink;
}

/* last-child : 형제 관계의 요소 중 마지막 요소 */
#test1 > p:last-child{
    background-color: tomato;
}

/* #test1 > p 선택자를 통해서 
   #test1의 자식 중 p 태그만 선택했지만
   #test1의 자식 중에는 pre 태그도 포함되어 있음

   #test1의 자식 중 p 태그의 형제 요소 중
   마지막 요소(pre)를 선택하여
   해당 요소가 :last-child 앞에 작성된 요소(p)가
   맞을 경우 선택
*/

/* nth-child(수열)
   형제 관계 요소 중 지정된 수열 번째 요소를 모두 선택
   (nth = n번째)
   * 순서를 따질 때 1부터 시작함 (인덱스 X)
*/

#test1 > p:nth-child(2){
    /* #test1의 자식 요소 중 2번째 요소를 선택하고 
       p 태그인지 검사 */
    background-color: yellow;
}

#test1 > p:nth-child(4){
    /* #test1의 자식 요소 중 4번째 요소를 선택하고 
       p 태그인지 검사 */
    background-color: slateblue;
}

/* 홀수 번째 형제 요소 선택 */
#test1 > p:nth-child(2n-1){
    background-color: chocolate;
}

/* 짝수 번째 형제 요소 선택 */
#test1 > p:nth-child(2n){
    color: white;
    font-size : 30px;
}

/* :nth-last-child(수열)
   형제 관계 요소 중
   뒤에서 부터 지정된 수열 번째 요소를 모두 선택
*/
#test1 > p:nth-last-child(2){
    color: hotpink;
    font-weight: bold;
}

---

• 형태 구조 선택자
  : 선택된 형제 관계 요소 중 특정 요소를 선택하는 선택자
  (선택된 요소들을 기준으로 구분)
  
  :first-of-type → 같이 선택된 형제들 중에서 첫 번째 요소
  :last-of-type → 같이 선택된 형제들 중에서 마지막 요소
  :nth-of-type(수열) → 같이 선택된 형제들 중에서 수열 번째 모든 요소
  :nth-last-of-type(수열) → 같이 선택된 형제들 중에서 뒤에서 수열 번째 모든 요소

    <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>

/* 형태 구조 선택자 */
/* :first-of-type : 같이 선택된 형제들 중에서 첫 번째 요소 */
#test2 > p:first-of-type{
    background-color: orange;
}

/* :last-of-type : 같이 선택된 형제들 중에서 마지막 요소 */
#test2 > p:last-of-type{
    background-color: orange;
}

/* :nth-of-type(수열) : 같이 선택된 형제들 중에서 수열 번째 모든 요소 */
/* ex) #test2 자식 p 태그 중 홀수 번째 요소의 글자 크기를 24px 지정 */
#test2 > p:nth-of-type(2n-1){
    font-size: 24px;
}

/* :nth-last-of-type(수열) : 같이 선택된 형제들 중에서 뒤에서 수열 번째 모든 요소 */
/* ex) #test2 자식 p 태그 중에서 뒤에서 짝수 번째 모든 요소의 배경을 yellow 지정 */
#test2 > p:nth-last-of-type(2n){
    background-color: yellow;
}

---

• 부정 선택자

    <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>

/* 부정 선택자 */
/* #test3의 자식 li 요소 중 3의 배수를 제외한 요소만 선택하여
   배경색을 green으로 변경
*/
#test3 > li:not(:nth-of-type(3n)){
    background-color: green;
}