1. 선택자란?
- css 적용 타겟을 지정할 때 사용
| 종류 | 선택자 | 설명 | 사용법 |
| 일반 선택자 | 전체 선택자 | HTML내의 모든 element를 선택 | * { } |
| 타입 선택자 | 태그명이 일치하는 element(태그)를 선택 | h1, h2 { } | |
| 클래스 선택자 | class 속성 값이 일치하는 element를 선택 | .className { } | |
| ID 선택자 | id 속성 값이 일치하는 element를 선택 | #idName { } | |
| 복합 선택자 | 하위 선택자 | 하위 element(자손들)를 선택 | E1 E2 { } |
| 자식 선택자 | 직속 하위 element(자식들)를 선택 | E1 > E2 { } | |
| 인접 형제 선택자 | 인접 형제 sibling관계인 element를 선택 | E1 + E2 { } | |
| 일반 형제 선택자 | sibling관계인 element들을 선택 | E1 ~ E2 { } |
2. 일반 선택자
- 우선 순위 : 전체 선택자 < 타입 선택자 < 클래스 선택자 < ID 선택자
1. 전체 선택자
- HTML 문서 내에 모든 element를 선택
2. 타입 선택자
- 태그명으로 스타일을 적용할 태그를 선택하는 것
- 여러 element를 선택할 때는 콤마(,)로 구분
div, p {
margin: 10px;
}
3. 클래스 선택자
- 클래스 명은 공백 없이, 대소문자 or Hypen( - ) or UnderScore( _ )로 시작
- 하나의 element에 여러 class 값 적용 가능 = 공백으로 구분
<head>
<style>
.text{
background-color: beige;
}
.title{
color: gray;
}
</style>
</head>
<body>
<p class="text title">test</p>
<p class="text">test2</p>
</body>
4. ID 선택자
- ID는 유일한 값
- 하나의 element에 id도 하나만 사용 가능 (굳이 2개 쓸 필요가 없기 때문)
3. 복합 선택자
1. 하위 선택자와 자식 선택자
1) 하위 선택자 : 자기 아래 모든 descendant(후손)에 적용
2) 자식 선택자 : 1단계 child에만 적용
[예시코드]
<head>
<style>
div p{
color: beige;
}
div > p{
background-color: black;
}
</style>
</head>
<body>
<div>
<p>text1</p>
<p>text2</p>
<span>
<p>text3</p>
</span>
</div>
</body>
[결과]
2. 인접 형제 선택자
- 형제 관계인 element가 여러 개면 첫 번째 element만 선택
[예시코드]
<head>
<style>
div+p{
color: pink;
}
</style>
</head>
<body>
<p>text1</p>
<div>div입니다.</div>
<p>text2</p>
<p>text3</p>
<span>
<p>text4</p>
</span>
</body>
[결과]
3. 일반 형제 선택자
- 형제 관계인 element가 여러 개면 모두 선택
[예시코드]
<head>
<style>
div~p{
color: pink;
}
</style>
</head>
<body>
<p>text1</p>
<div>div입니다.</div>
<p>text2</p>
<p>text3</p>
<span>
<p>text4</p>
</span>
</body>
[결과]
4. 가상 클래스 선택자
- User Agent가 제공하는 가상의 클래스를 지정
- 사용법 = 가상클래스 {}
| 선택자 | 의미 | 선택자 | 의미 |
| :link | 방문하지 않은 링크 | :last-child | element 중 부모의 마지막 자식 선택 |
| :visited | 방문한 링크 | :nth-child(n) | element 중 n번째 자식 선택 (n = 0, 1, ... ) |
| :hover | element에 마우스가 올라간 경우 | :enabled | element가 enabled인 경우 |
| :active | element가 활성화 된 경우 | :disabled | element가 disabled인 경우 |
| :focus | element가 포커스를 가질 경우 (= 버튼 누르고 있을 때) |
:checked | element가 checked인 경우 |
| :first-child | element중 부모의 첫 번째 자식 선택 |
[예시코드]
<head>
<style>
p:nth-child(2n+1){
color: blueviolet;
}
</style>
</head>
<body>
<div>
<p>child1</p>
<p>child2</p>
<p>child3</p>
</div>
<p>child4</p>
<p>child5</p>
</body>
[결과]
5. 속성 선택자
- 특정 속성 값을 갖는 element를 선택
| 선택자 | 의미 |
| [A] | A 속성이 포함된 element선택 |
| [A = V] | A 속성 값이 V와 일치하는 element선택 |
| [A ~= V] | A 속성 값이 V단어를 포함하는 element 선택 (Space 공백으로 구분) ex) hello my name => [A~=hello] |
| [A ^= V] | A 속성 값이 V로 시작하는 element 선택 |
| [A *= V] | A 속성 값이 V를 포함하는 element 선택 (Substring) ex) hellomyname => [A*="hello"] |
| [A $= V] | A 속성 값이 V로 끝나는 element 선택 |
| [A |= V] | A 속성 값이 V와 일치하거나, V-로 시작하는 element 선택 |
[예시 코드]
<head>
<style>
[title]{
background-color: pink;
}
[name~="first"]{
color: red;
}
p[name|="second"]{
color: blue;
}
p[name*=child]{
font-size: 20px;
}
p[name$=child5]{
color: green;
}
</style>
</head>
<body>
<div title = "one">
<p name="first child1">child1</p>
<p name="second-child">child2</p>
<p>child3</p>
</div>
<div title = "two">
<p name="first">child4</p>
<p name="two-child5">child5</p>
<p>child6</p>
</div>
</body>
[결과]
'Programming > CSS' 카테고리의 다른 글
| 5. UI(User Inteface) 속성 (0) | 2022.03.12 |
|---|---|
| 4. Text 속성 (0) | 2022.03.12 |
| 3. Font 속성 (0) | 2022.03.12 |
| 1. CSS 개요 (0) | 2022.03.11 |
| CSS 기초 (0) | 2021.02.08 |