고래씌

[CSS] 1-4. CSS 선택자 ④ (일반 구조 선택자, 형태구조 선택자, 부정선택자 본문

Front-End/CSS

[CSS] 1-4. CSS 선택자 ④ (일반 구조 선택자, 형태구조 선택자, 부정선택자

고래씌 2023. 11. 2. 12:02

1. 일반 구조 선택자

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

 

① :first_child

② :last-child

③ :nth-child(수)

④ :nth-last-child(수)

 

■ html파일

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4_CSS선택자 4</title>

    <link href="resources/css/selector4.css" rel="stylesheet">
</head>
<body>
    <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>
    
</body>
</html>

 

 

■ selector4.css 파일(① :frist-child)

/* :first-child : 형제 관계의 요소중 첫 번째 요소 */
/* test1의 자식 p태그들 중에 첫번째 자식만 선택하겠다 */
#test1>p:first-child{
    background-color: red;
    color: white;
}

 

☞ test1의 자식 p태그들 중에 첫번째 자식만 선택함

 

 

 

■ selector4.css 파일(② :last-child) 

/* :last-child : 현재 관계의 요소 중 마지막 요소*/
#test1>:last-child{
    
    background-color: orange;
}

 

☞ id가 test1 중, 마지막 요소만 해당

☞ #test1 > p 선택자를 통해서 #test1의 자식 중 p태그만 선택했지만 #test1의 자식에는 pre태그도 포함되어있다.(선택은 p태그만 했지만, 형제로서는 p+pre태그가 있음)

 

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

 

 

 

■ selector4.css 파일(③ :nth-child(수) ) 

#test1 > :nth-child(2) {

    /* test1의 자식 요소 중 2번째 요소를 선택,
        그 요소가 p태그라면 선택 */
   
    background-color: yellow;
}

 

☞ nth-child(수열) : 형제 관계 요소 중 지정된 수의 요소를 모두 선택(nth = n번째)

☞ 순서를 따질 때 1부터 시작함(인덱스 X)

 

 

 

Q. 홀수 번째 형제 요소만 선택하고 싶다면...?(1 3 5 7 9...)

 #test1>p:nth-child(2n - 1){
    font-weight: bold;
    font-size: 20px;
 }

 

☞ 홀수 번째 요소만 글꼴크기와 굵기가 변함

 

 

 

 

■ selector4.css 파일(④ :nth-last-child(수) )

#test1 > p:nth-last-child(2){
    color: hotpink;
}

 

☞ 형제 관계 요소 중 뒤에서부터 지정된 수열번째 요소를 모두 선택

        <p>테스트1</p>
        <p>테스트2</p>
        <p>테스트3</p>
        <p>테스트4</p>
        <p>테스트5</p>
        <pre>테스트6</pre>

 

☞ p와 pre 태그는 형제관계인 자식이기 때문에 "#test1 > p:nth-last-child(2){}" 마지막에서 p태그인 2번째 요소를 가져온다.

그러므로 테스트5가 글씨색이 분홍색으로 바뀌게 된다.

 

☞ "#test1 > p:nth-last-child(1){}"을 하면 아래 사진과 같이 결과가 나온다. 그이유는 <p>와 <pre>는 서로 형제관계인데 P태그이면서 가장 마지막 요소는 1을 찾는데 위 코드에서 가장 마지막 요소는 pre이기 때문에 가져올수가 없게된다.

#test1 > p:nth-last-child(1){}

 

 

☞ 만약 <pre>태그를 삭제하게 되면 #test1 > p:nth-last-child(1){}" 할때 테스트5가 분홍색 글씨로 바뀌게 된다.

 

2. 형태 구조 선택자

: 선택된 형제 관계 요소 중 특정 요소를 선택하는 선택자(선택된 요소들을 기준으로 구분)

 

① :first-of-type : 같이 선택된 형제들 중에서 첫번째 요소

② :last-of-type : 같이  선택된 형제들 중에서 마지막 요소

③ :nth-of-type(수열) : 같이 선택된 형제들 중에서 수열번째의 모든 요소

④ :nth-last-of-type(수열) : 같이 선택된 형제들 중에서 뒤에서 수열번째 모든 요소

 

 

■ html파일 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4_CSS선택자 4</title>

    <link href="resources/css/selector4.css" rel="stylesheet">
</head>
<body>

    <h2>형태 구조 선택자</h2>

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

 

 

 

■ selector4.css 파일(① :first-of-type) 

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

 

 

 

 

■ selector4.css 파일(② :last-of-type) 

/* last-of-type : 같이 선택된 형제들 중에서 마지막 요소 선택 */

#test2 > p:last-of-type{
    background-color: skyblue;
}

 

 

☞ last-child 마지막 요소를 가져왔고 last-of-type은 test2 자식중 p태그이면서 그중의 마지막을 가져옴

 

 

 

■ selector4.css 파일(③ :nth-of-type(수열) )

/* :nth-of-type(수열) : 같이 선택된 형제들 중에서 수열 번째 요소 */

#test2 >p:nth-of-type(2n-1) {
    font-size: 30px;
}

 

 

 

☞ #test2의 자식 p태그들 중 홀수 번째 요소의 글자크기를 30px로 지정

 

 

 

■ selector4.css 파일(④ :nth-last-of-type(수열) )

/* :nth-last-of-type(수열) : 같이 선택된 형제들 중에서 뒤에서 수열번째 모든 요소 */

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

 

 

☞ id=test2의 p태그들 중 2번째 4번째 6번째...만 배경색 빨강색 지정

 

 

 

3. 부정 선택자( 선택자1:not(선택자2))

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

 

 

■ html파일

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4_CSS선택자 4</title>

    <link href="resources/css/selector4.css" rel="stylesheet">
</head>
<body>

    <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>
    
</body>
</html>

 

 

 

 

 

■ selector4.css 파일

/* 부정선택자 */

#test3>li:not(:nth-child(3n)){
    background-color: pink;
}

 

☞ #test3의 자식 li요소 중 3의 배수를 제외한 요소만 선택하여 배경색 pink색 부여

 

저작자표시 비영리 변경금지

'Front-End > CSS' 카테고리의 다른 글

[CSS] 2. CSS 선택자 우선순위  (0) 2023.11.02
[CSS] 1-5. CSS 선택자 ⑤ (기타 선택자)  (0) 2023.11.02
[CSS] 1-3. CSS 선택자 ③ (문자열 속성 선택자)  (0) 2023.11.02
[CSS] 1-2. CSS 선택자 ②(기본 속성 선택자, 자식 선택자, 후손 선택자, 반응 선택자, 상태 선택자, 동위 선택자 & 실습문제)  (0) 2023.11.01
[CSS] 1-1. CSS개요, 선택자 ① (inline-style 태그, 태그 선택자, id 선택자, class 선택자)  (0) 2023.11.01
'Front-End/CSS' Related Articles more