WEB/CSS

[CSS] CSS 선택자(Selector) 정리

SooooooooS 2023. 2. 12. 17:49
728x90

※ 후에 알아보기 편하기 위해 정리해둔 것입니다.※

참고 사이트 : https://openwiki.kr/tech/css_selector
 

CSS 선택자(Selector) - 기술 - 오픈위키

CSS 선택자(Selector) 선택자는 Type(element),Universal(*),class/id,attribute(속성),가상요소/가상클래스,선택자결합(하위,자식,인접) 등으로 구성된다. 패턴뜻 #idid로 지정된 요소 선택 .classclass로 지정된 요소

openwiki.kr

패턴 뜻
* 모든 요소 선택
tag <div>, <a> 등 특정 태그를 선택
.class 클래스로 지정된 요소 선택 (클래스 이름 앞에 점을 찍는다.)
#id 아이디로 지정된 요소 선택 (아이디 이름 앞에 # 입력)
E>F E 요소의 자식인 F 요소 선택
E[속성] 속성이 포함된 E 선택
E F E 요소의 자손인 F 요소를 선택 (띄어쓰기, space)

 

자식 선택자 VS 자손 선택자

자식 선택자는 부모의 바로 아래의 자식에게만 적용되는 요소로 즉, 직계자식만 가능

자손 선택자는 부모에게 포함된 모든 하위 요소에 적용되는 요소로 하위 선택자라고도 함

1. 자식 선택자 예시

<!DOCTYPE html>
<html>
<head>
    <title>Selector Example</title>
    <style>
        ul>li{
            color:red
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <ol>
            <li>1-1</li>
            <li>1-2</li>
        </ol>
        <li>2</li>
        <ol>
            <li>2-1</li>
            <li>2-2</li>
        </ol>
        <li>3</li>
    </ul>
</body>
</html>

자식 선택자 실행화면

 

2. 자손 선택자 예시

<style>
    ul li{
        color:red
    }
</style>

위의 코드에서 패턴만 변경

자손 선택자 실행화면

728x90