[CSS] 04_CSS 선택자 4

bbsm·2023년 2월 20일
0

학원 수업 복습

목록 보기
34/36

일반 구조 선택자

: 형제 관계에 있는 요소 중 특정 요소를 선택하는 선택자

✔ 위치를 기준으로 구분함 ✔
: first-child
: last-child
: nth-child(수열)
: nth-last-child(수열)

[HTML]

 <div id="test1">
 <p>테스트1</p>
 <p>테스트2</p>
 <p>테스트3</p>
 <p>테스트4</p>
 <p>테스트5</p>
 <pre>테스트5</pre>
 </div>
 
 [CSS]
 
 #test1 > p:first-child {
 	background-color: red;
    color: white;
    }
 
 #test1 > p:last-child {
 	background-color: orange;
    }

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

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

nth-child(수열)
    형제 관계 요소 중 지정된 수열 번째 요소를 모두 선택
    (nth = n번째)
    
    *순서를 따질 때 1부터 시작함
  
#test1 > p:nth-child(2){
        /* #test1의 자식 요소 중 2번째 요소를 선택하고
        p태그 인지 검사
        */
        background-color: yellow;
    }

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

    /* 홀수 번째 형제 요소 선택 */
    #test1 > p:nth-child(2n-1){
        font-weight: bold;
        font-size: 20px;

        }
     /* 짝수 번째 형제 요소 선택 */
     #test1 > p:nth-child(2n){
        border: 2px solid black;
        }

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

형태 구조 선택자

: 선택된 형제 관계 요소 중 특정 요소를 선택하는 선택자

(선택된 요소들을 기준으로 구분)
:first-of-type - 같이 선택된 형제들 중에서 첫번째 요소
:last-of-type - 같이 선택된 형제들 중에서 마지막 요소
:nth-of-type(수열) - 같이 선택된 형제들 중에서 수열 번째 모든 요소
:nth-last-of-type(수열) - 같이 선택된 형제들 중에서 뒤에서 수열번째 모든 요소

[HTML]

<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>
   
[CSS]

 #test2 > p:first-of-type{
           background-color: orange;
       }

       #test2 > p:last-of-type{
           background-color:skyblue;
       }
   
       #test2 > p:nth-of-type(2n-1){
          /* #test2 자식 p태그 중 홀수번쨰 요소의 글자를 변경 */
           font-size: 30px;
       }

       #test2 > p:nth-last-of-type(2n){
           background-color:red;
       }

부정 선택지(선택자1:not(선택자2))

: 괄호 내 선택자를 제외한 나머지 요소를 선택

[HTML]

<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>
   
[CSS]

/* #test3의 자식 li요소 중 3의 배수를 제외한 요소만 선택 */
       #test3 > li:not(:nth-of-type(3n)){
           background-color: pink;
       }

0개의 댓글