고래씌

[CSS] 1-5. CSS 선택자 ⑤ (기타 선택자) 본문

Front-End/CSS

[CSS] 1-5. CSS 선택자 ⑤ (기타 선택자)

고래씌 2023. 11. 2. 15:04

1. 기타 선택자

1) :onlychild

- 특정 요소의 자식이 하나밖에 없을 때 선택

 

 

■  HTML 파일

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="resources/css/selector5.css" rel="stylesheet">
</head>
<body>

    <h1>기타 선택자</h1>

    <div id="test1">
        <p>자식1</p>
        <pre>자식2</pre>
    </div>
    
</body>
</html>

 

 

 

■ selector5.css 파일

/* :only-child */

#test1 > p:only-child{
    background-color: steelblue;
}

 

☞ p태그는 하나밖에 없지만 같은 p계열 태그인 pre 태그가 하나 더 있기 때문에 적용이 안됨.
만약 p태그 하나만 있었다면 적용됐음

 

    <div id="test1">
        <p>자식1</p>
        <!-- <pre>자식2</pre> -->
    </div>

 

 

☞ pre태그를 삭제한 결과 p태그 하나만 있어서 적용되는 것을 볼 수 있음

 

 

 

 

2) :only-of-type

- 특정 요소의 자식 중 지정된 형태와 같은 자식 요소가 하나만 있을 때 선택

 

 

■ HTML 파일 내 body 태그 안

    <div id="test2">
        <p>자식1</p>
        <pre>자식2</pre>
        <!-- <p>자식1</p> -->
    </div>

 

 

■ selector5.css 파일

/* :only-of-type */

#test2 > :only-of-type{
    background-color: crimson;
}

 

 

Q. 만약 p태그가 하나 더있다면...?

ex)

    <div id="test2">
        <p>자식1</p>
        <pre>자식2</pre>
        <p>자식3</p>
    </div>

 

☞ p태그가 하나 더있다면 해당 요소를 가져오지를 못함(배경색이 안변함)

 

 

 

3) :empty

- 자식 요소가 없는 요소를 선택

 

▶ 자식 요소의 개념

: 태그, 글자, 주석, 띄어쓰기 모두를 자식 요소라고함

 

▶ 자식이 없는 케이스..?

ex) <p></p> (O)

 

<div>

</div>    (X) => 공백도 자식이 있다고 본다!

 

 

  ■ HTML 파일 내 body 태그 안 

    <div id="test3">
        <p></p>
        <p>123</p>
        <p> </p>
        <p><p>하이</p></p>
    </div>

 

 

■ selector5.css 파일

/* :empty */
#test3 > p:empty{
    height: 30px;
    background-color: lawngreen;
}

 

☞ <p></p>  => 자식 요소 없으니까 선택됨

<p>123</p> => 안에 123이 들어가있어서 자식 요소가 있다고 보고 선택되지 않음

<p> </p>  => 안에 띄어쓰기도 자식요소가 있다고 판단함

 

 

 

 

4) 여러 선택자 동시 선택

- 같은 스타일을 지정하고 싶으나 요소를 선택하는 선택지가 일치하지 않을 때 사용. 

선택자1, 선택자2, 선택자3, ...{css코드;}

 

 

  ■ HTML 파일 내 body 태그 안

    <div id="test4-1">테스트1</div>
    <div id="test4-2">테스트2</div>
    <div id="test4-3">테스트3</div>

 

 

■ selector5.css 파일

/* 여러 선택자 동시 선택 */
#test4-1, #test4-2, #test4-3{
    background-color: yellow;
    border: 3px solid black;
}

 

 

 

 

5) 특정 요소 내부에 있는 특정 클래스만 선택하기

 

  ■ HTML 파일 내 body 태그 안

    <ul id="test5-1">
        <li class="c5">1</li>
        <li class="c5">2</li>
        <li class="c5">3</li>
    </ul>


    <ul id="test5-2">
        <li class="c5">6</li>
        <li class="c5">7</li>
        <li class="c5">8</li>

        <li>
            <span class="c5">9</span>
        </li>
        <li>
            <span class="c5">10</span>
        </li>

        <li class="c5">11</li>
        <li class="c5">12</li>
    </ul>

 

 

■ selector5.css 파일

/* 특정 요소 내부에 있는 특정 클래스만 선택 */
/* test5-1의 후손 요소중 클래스명이 c5인 요소 선택 */
#test5-1 .c5{
    background-color: aquamarine;
}

/* test5-2의 자식중 클래스가 c5인 요소중 li만 선택 */
#test5-2 >li.c5 {
    font-weight: bold;
}

 

 

 

 

6) 클래스가 여러개인 요소만 선택

 ■ HTML 파일 내 body 태그 안

    <div class="test6">테스트</div>
    <div class="test6 c6">테스트</div>
    <div class="c6">테스트</div>

 

 

■ selector5.css 파일

/* 클래스가 여러 개인 요소만 선택 */
.test6.c6{
    background-color: red;
}

 

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

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

[CSS] 3-1. 레이아웃(Layout) 스타일 ① (화면 분할)(+hidden)  (0) 2023.11.02
[CSS] 2. CSS 선택자 우선순위  (0) 2023.11.02
[CSS] 1-4. CSS 선택자 ④ (일반 구조 선택자, 형태구조 선택자, 부정선택자  (2) 2023.11.02
[CSS] 1-3. CSS 선택자 ③ (문자열 속성 선택자)  (0) 2023.11.02
[CSS] 1-2. CSS 선택자 ②(기본 속성 선택자, 자식 선택자, 후손 선택자, 반응 선택자, 상태 선택자, 동위 선택자 & 실습문제)  (0) 2023.11.01
'Front-End/CSS' Related Articles more