[CSS]자식, 후손 선택자 그리고 이건 뭐라고 부르나요 ?

Jiwoo JEONG·2022년 8월 8일

지난 번 Design System을 만들며 부족했던 부분인 CSS의 자식, 후손, 전체 선택자에 대해 알아보았다.

후손 선택자

CSS 문법

ol li {
	color:red;
}

이는 ol tag 아래에 있는 모든 li tag에 대해 해당 스타일을 입히는 것이다.

html

<body>
    <ol>
        <li>li Tag 입니다</li>
        <li>li Tag 입니다</li>
        <ul>
            <li>li Tag 입니다</li>
            <li>li Tag 입니다</li>
        </ul>
    </ol>
</body>

화면에 출력해보면 ul tag의 children인 li도 red color로 출력될 것이다.
한 번 확인 해보자!

결과

자식 선택자

CSS 문법

ol > li {
  color: red;
}

이는 ol tag 바로 아래에 있는 children인 li tag에 대해서만 해당 스타일을 입히는 것이다.

html

<body>
    <ol>
        <li>li Tag 입니다</li>
        <li>li Tag 입니다</li>
        <ul>
            <li>li Tag 입니다</li>
            <li>li Tag 입니다</li>
        </ul>
    </ol>
</body>

화면에 출력해보면 ul tag의 children인 li는 red color로 출력되지 않고 ol tag의 직계 자식인 li tag만 red color로 나올 것이다.
한 번 확인 해보자!

결과

이건 뭐라고 부르나요?

CSS 문법

ol * li {
  color: red;
}

공부를 위해 검색을 하다가 위와 같은 문법을 보았다. 뭐라고 부르는지는 모르겠다. 코드를 작성하고 돌려보니 다음과 같은 결과가 나왔다.

뭔가 자식 선택자와 반대의 의미를 갖는 것 같았지만 하위 depth의 li tag를 보면 또 막상 그런 거 같지는 않고....
ol tag에서 최상단의 직계 자식을 제외한 li tag 모두 red color로 나왔기 때문에... 정답을 알려줘...

html

<body>
    <ol>
        <li>li Tag 입니다</li>
        <li>li Tag 입니다</li>
        <ul>
            <ol>
                <li>li Tag 입니다</li>
                <ul>
                    <li>li Tag 입니다</li>
                </ul>
            </ol>
            <li>li Tag 입니다</li>
        </ul>
    </ol>
</body>