[CSS] 선택자란?(+자식 선택자와 하위 선택자의 차이)

선택자 : HTML의 어떤 요소에 CSS 스타일을 적용할 지 정하는 것이다. 즉, CSS를 적용할 대상을 택하는 것이다.
선택자 { 속성(Property) : 값(value); } 으로 표현한다.

선택자 예시
h1 {
color : blue;
}

기본 선택자

기본 선택자 : 한 가지의 조건을 만족하는 요소를 선택한다.

기본 선택자의 종류

1) 전체 선택자 : 모든 요소를 선택한다.

/*main.css*/
* {
	color : red;
}

<!--main.html -->
<h1>제목입니다.</h1>
<div>반갑습니다.</h1>

위와 같이 작성하게 되면 모든 요소의 color가 red가 된다.

2) 태그 선택자 : 작성한 태그 이름에 해당하는 요소를 선택한다.

/*main.css*/
h1 {
    color: aqua;
}

<!--main.html -->
<h1>제목입니다.</h1>
<div>반갑습니다.</h1>

다음과 같이 작성하게되면 h1 태그 요소만 color가 aqua로 설정된다.

3) 클래스 선택자 : class 속성 값이 주어진 값과 일치하는 요소를 선택한다.

css 작성 시 설정하려는 값 앞에 .을 붙인다.

/*main.css*/
.good{
    color: burlywood;
}

<!--main.html -->
<h1 class="good">제목입니다.</h1>
<div>반갑습니다.</div>

위와 같이 작성하게되면 요소의 class의 속성 값이 good인 요소의 color를 burlywood로 설정한다.

4) 아이디 선택자 : id 속성 값이 주어진 값과 일치하는 요소 선택한다.

css 작성 시 설정하려는 값 앞에 #을 붙인다.

/*main.css*/
#good{
    color: coral;
}

<!--main.html -->
<h1 id="good">제목입니다.</h1>
<div>반갑습니다.</div>

위와 같이 작성하게 되면 태그의 id 값이 good인 태그의 color를 coral로 설정한다.

복합 선택자

복합 선택자 : 복합 선택자는 두 조건을 모두 만족하는 요소를 선택하는 것이다.
vs 기본 선택자 : 기본 선택자는 한 가지 조건을 만족하는 요소를 선택하는 것이다.

복합 선택자에는 많은 요소가 있지만 대표적인 몇개만 소개하겠다.

복합 선택자의 종류

1) 일치 선택자 : 두 가지의 조건을 함께 만족하는 조건을 선택한다.

/*main.css*/
h1.good{
    color: lawngreen;
}

<!--main.html -->
<h1 class="good">제목입니다.</h1>
<h1 class="great">부제목입니다.</h1>
<span class="good">span태그입니다.</span>

위와 같이 css에 h1.good이라고 작성하게 되면 h1 태그 중 class 속성 값이 good인 요소의 color만 lawngreen으로 설정하는 것이다.

따라서 "제목입니다."의 글씨 색상만 변경된 것을 알 수 있다.

2) 자식 선택자 : A의 자식 요소 B를 선택한다.
이 때, 두 요소를 > 기호로 구분한다.

/*main.css*/
div >.good{
    color: lawngreen;
}

<!--main.html -->
<div>
	<h1 class="good">제목입니다.</h1>
	<h1 class="great">부제목입니다.</h1>
	<span class="good">span태그입니다.</span>
</div>

div >.good이라고 작성하게 되면 div 태그 자식 요소들 중 class 속성 값이 good인 요소의 color를 lawngreen으로 설정한다.

따라서 "제목입니다."와 "span태그입니다."의 color를 lawngreen으로 설정한다.

3) 하위(후손) 선택자 : A 요소의 하위 B 요소를 선택한다. 이 때, 두 요소를 공백으로 구분한다.
div .orange { color : red; }

/*main.css*/
div .great{
    color: teal;
}

<!--main.html -->
<div>
	<h1 class="good">제목입니다.</h1>
	<h1 class="great">부제목입니다.</h1>
	<span class="good">span태그입니다.</span>
</div>

div .great라고 작성하게 되면 div태그의 하위 요소중 class 속성 값이 great인 요소의 color를 teal로 설정한다.

자식 선택자와 하위(후손) 선택자의 차이

선택자 공부를 하던 도중 자식 선택자와 하위(후손) 선택자의 차이가 궁금했으며 다음과 같은 결론을 얻었다.

자식 선택자와 하위 선택자의 차이 : 하위(후손) 선택자는 자식 선택자에 비해 더 넓은 범위를 포함한다.

해당 말을 예시로 풀어보겠다.
1) 자식 선택자 예시

/*main.css*/
ul > li {
    color: red;
}

<!--main.html -->
<div>
    <ul>
        <li>리스트1</li>
        <li>리스트2</li>
        <ol>
            <li>ul안 ol리스트</li>
        </ol>
    </ul>
</div>

css는 ul 태그의 자식 요소중 li의 태그의 color를 red로 설정한다.
html을 보게되면 ul 태그 아래 li 태그와 ol 태그가 있다. ol 태그는 li 태그를 포함한다.

<li>ul안 ol리스트</li>

html의 위의 요소 또한 큰 범위로 보면 ul에 포함되어 있지만 해당 요소의 직접적인 부모는 ol이므로 해당 요소의 color는 변경되지 않는다.

2) 하위(후손)의 예시

/*main.css*/
ul li {
    color: red;
}

<!--main.html -->
<div>
    <ul>
        <li>리스트1</li>
        <li>리스트2</li>
        <ol>
            <li>ul안 ol리스트</li>
        </ol>
    </ul>
</div>

html의 내용의 위의 자식 선택자와 같으며 css만 자식 선택자에서 하위(후손) 선택자로 변경하였다.

<li>ul안 ol리스트</li>

이 경우 해당 태그의 부모는 지접적인 부모는 ol이지만 큰 범위로 보면 ul의 하위(후손) 태그이므로 해당 태그 또한 color가 red로 변경되는 것을 알 수있다.