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
'WEB > CSS' 카테고리의 다른 글
| [CSS] 다중 클래스 접근 및 Font-weight : Bold 설정 (0) | 2024.05.16 |
|---|---|
| [CSS] 글자 관련 CSS 정리 (0) | 2023.02.16 |
| [CSS] 여백(margin/padding) 기본 개념 정리 (0) | 2023.02.12 |
| [CSS] 구글 웹 폰트 사용해보기 (0) | 2023.02.07 |
| [CSS] 배경(background) 관련 기본 CSS 사용해보기 (0) | 2023.02.06 |
