WEB/HTML+CSS+JS

[CSS] 자식, 후손 선택자 차이점

kite707 2021. 3. 24.

CSS 선택자에 대해 공부하다

s1 s2 : s1요소에 포함된 s2요소를 선택한다. (후손 관계)
s1>s2 : s1요소의 직계 자식 요소인 s2를 선택한다.(자식관계)

라고 나와있는 부분을 봤는데 문득 궁금해져서 찾아봤다.

결론부터 말하자면 자식(자손)이 더 작은 범위이다. 자손이라고 설명되어 있는 글도 있던데 자식이 더 직관적으로 받아들이기 쉬운 것 같다.

즉 자식은 바로 선택 태그 바로 아래 계층에 있는 것들, 후손은 선택 태그 안에 들어가 있는 모든 것 이라고 생각하면 될 것 같다.

바로 예제를 보도록 하자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>자손, 후손</title>
</head>
<body>
    <ol>
        <li>hi</li>
        <li>hd</li>
        <li>sg</li>
            <ul>
                <li>리스트 안 리스트1</li>
                <li>리스트 안 리스트2</li>
                <li>리스트 안 리스트3</li>
            </ul>

        <li>he</li>
        <li>hello</li>
    </ol>
</body>
</html>

위 코드를 실행시키면 아래와 같다.

이건 뭐 쉬운 내용이라 별로 어려울 것이 없을 것이다.

CSS 자식선택자 (s1>s2)

이제 자식 선택자를 사용해 보자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>자손, 후손</title>


    <!-- 추가된 부분!! -->
    <style>
        ol>li{
            color:red;
        }
    </style>


</head>
<body>
    <ol>
        <li>hi</li>
        <li>hd</li>
        <li>sg</li>
            <ul>
                <li>리스트 안 리스트1</li>
                <li>리스트 안 리스트2</li>
                <li>리스트 안 리스트3</li>
            </ul>

        <li>he</li>
        <li>hello</li>
    </ol>
</body>
</html>

ol의 자식(자손)인 li를 빨간색으로 바꿔보았다. 결과는 아래와 같다.

중간에 <ul></ul>로 둘러싸인 부분들(리스트 안 리스트)라고 되어있는 부분을 제외하고 글씨가 빨간색으로 바뀌었다. 왜냐하면 그 부분은 <ul></ul>의 자식이기 때문에!

CSS 후손선택자 (s1 s2)

그럼 이제 ol의 후손부분인 li를 보라색으로 바꿔보도록 하자. 코드는 아래와 같다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>자손, 후손</title>


    <!-- 추가된 부분!! -->
    <style>
        ol li{
            color:violet;
        }
    </style>


</head>
<body>
    <ol>
        <li>hi</li>
        <li>hd</li>
        <li>sg</li>
            <ul>
                <li>리스트 안 리스트1</li>
                <li>리스트 안 리스트2</li>
                <li>리스트 안 리스트3</li>
            </ul>

        <li>he</li>
        <li>hello</li>
    </ol>
</body>
</html>

코드의 결과는 아래와 같다.

리스트 안 리스트는 엄밀히 말하자면 <ul>의 자식이지만 자식의 자식도 후손이니까 함께 바뀌는 것을 확인할 수 있다.

결론 : 자식 선택자(s1>s2)는 바로 아래 있는것만, 후손 선택자(s1 s2)는 아래 있는 해당 태그 모두 선택한다.

'WEB > HTML+CSS+JS' 카테고리의 다른 글

[JavaScript] 함수 정리 1-화살표함수, 즉시 실행함수(IIFE), 호이스팅(Hoisting) (0)	2021.07.08
[JavaScript] document.write()함수 위치 (0)	2021.04.09
[HTML+CSS+JavaScript]타이핑 효과 랜딩 페이지 만들기 (0)	2021.01.13
바닐라 스크립트 - part 3정리 (0)	2021.01.04
바닐라 스크립트 - part 2 정리 (0)	2021.01.04

[CSS] 자식, 후손 선택자 차이점

CSS 자식선택자 (s1>s2)

CSS 후손선택자 (s1 s2)

'WEB > HTML+CSS+JS' 카테고리의 다른 글

댓글

티스토리툴바