CSS 선택자
CSS의 선택자와 그 종류에 대해 알아보자.선택자란?
선택자는 스타일을 적용하고자 하는 HTML 요소를 선택하기 위해 CSS에서 제공하는 수단이다.
출처 : 코딩온
위의 이미지에서 선택자는 p 태그가 된다.
선택자 종류
CSS 선택자는 다섯개의 종류로 이루어져 있다.- 단일 선택자
- 복합 선택자
- 가상 클래스 선택자
- 가상 요소 선택자
- 속성 선택자
✅ 첫번째로 단일 선택자에 대해 알아보자.
단일 선택자
1) 전체 선택자 *
모든 요소를 선택한다.
<style>
*{
color: red;
}
</style>단일 선택자
2) 태그 선택자 태그
태그 이름이 x인 요소를 선택한다.
<h1>CSS 사용법</h1><style>
h1{
background-color: pink;
}
</style>단일 선택자
3) 클래스 선택자 .
HTML class 속성의 값이 x인 요소를 선택한다.
<div class="cat">고양이</div><style>
.cat{
background-color: aqua;
}
</style>단일 선택자
4) 아이디 선택자 #
HTML id 속성의 값이 x인 요소를 선택한다.
<div id="cat">고양이</div><style>
#cat{
background-color: lightgreen;
}
</style>참고) class와 id의 차이점
class는 그룹 (여러개 작성이 가능)
id는 고유함 (한 개만 가능)
✅ 두번째로 복합 선택자에 대해 알아보자.
복합 선택자는 특수한 요소를 호출하고 싶을 때, 기본 선택자만으로는 선택이불가능한 경우에 사용한다.
복합 선택자
1) 하위(후손) 선택자 띄어쓰기
선택자 x의 모든 하위 요소 xyz 선택한다.
띄어쓰기로 구분한다.
<div>
<ul>
<li>강아지</li>
<li class="cat">치즈냥이</li>
<li class="cat">개냥이</li>
</ul>
</div>
<style>
div .cat{
color : red;
}
</style>
복합 선택자
2) 자식 선택자 >
선택자 x의 바로 밑에 자식 요소 xyz 선택한다.
<div>
<ul>
<li>강아지</li>
<li class="cat">치즈냥이</li>
<li class="cat">개냥이</li>
</ul>
</div>
<style>
ul>.cat{
color : red;
}
</style>
복합 선택자
3) 인접 형제 선택자 +
다음 형제중 하나 선택한다.
아래 코드를 보면 span 태그의 cat이라는 클래스를 갖는 요소 바로 뒤에 있는 li를 선택한다.
주의 )
cat 이라는 클래스를 갖는 요소 바로 뒤에 li 태그가 있어야 한다.
<div>
<ul>
<span class="cat">고양이는 귀여워</span>
<li>치즈냥이</li>
<li>개냥이</li>
</ul>
</div>
<style>
.cat+li{
background-color: aqua;
}
</style>
복합 선택자
4) 일반 형제 선택자 ~
다음 형제 중 모두 선택한다.
인접해 있지 않아도 내가 지정한 요소 부터 바로 뒤에 있는 모든 요소 선택된다.
<div>
<ul>
<span class="cat">고양이는 귀여워</span>
<li>치즈냥이</li>
<li>개냥이</li>
</ul>
</div>
<style>
.cat~li{
background-color: aqua;
}
</style>
참고) 하위(후손) 선택자와 자식 선택자 의 차이점
하위(후손) 선택자는 모든 하위 요소들을 선택하고
자식 선택자는 바로 밑에 자식 요소를 선택한다.
여기까지 단일 선택자와 복합 선택자를 알아보았다. 단일 선택자와 복합 선택자 각각 어떻게 쓰는지 잘 알아둬야 앞으로 코드 쓸 때도 어려움이 없을 것 같다. 내용이 길어져서 가상 클래스 선택자 부터는 다음 블로그로 정리해보겠다. 😊
웹 개발 공부하는 코린이