CSS 선택자
기본
1. 전체 선택자(universal selector)
*- 모든 요소를 선택
* {
color: red;
}2. 태그 선택자(type selector)
TAG- 태그 이름으로 요소 선택
li {
color: red;
}3. 클래스 선택자(class selector)
.class- HTML class 속성의 값으로 요소 선택
<div class="orange">오렌지</div>.orange {
color: red;
}4. 아이디 선택자(id selector)
#id- HTML id 속성의 값으로 요소 선택
<div id="orange">오렌지</div>#orange {
color: red;
}복합
1. 일치 선택자(basic combinator)
AB- 선택자 A와 B를 동시에 만족하는 요소 선택
/* span 태그의 class가 orange인 요소 선택 */
span.orange {
color: red;
}2. 자식 선택자(child combinator)
A>B- 선택자 A의 자식 요소 B 선택
/* class가 orange 이고, 부모 요소가 ul인 요소 선택 */
ul > .orange { color: red; } 3. 하위(후손) 선택자(descendent combinator)
A B- 선택자 A의 하위 요소 B 선택
띄어쓰기가 선택자의 기호!
/* div 내부의 orange 클래스를 가진 요소 선택 */
div .orange {
color: red;
} 4. 인접 형제 선택자(adjacent sibling combinator)
A+B- 선택자 A의 다음 형제 요소 B 하나를 선택
/* orange 클래스를 가진 요소의 가장 인접한 다음 형제 li 요소 선택 */
.orange + li {
color: red;
} 5. 일반 형제 선택자(general sibling combinator)
A~B- 선택자 A의 다음 형제 요소 B 모두 선택
/* orange 클래스를 가진 요소의 다음 형제 li 요소 모두 선택 */
.orange ~ li {
color: red;
} 가상 클래스(Pseudo-Classes)
1. A:hover
- 선택자 A 요소에 마우스 커서가 올라가 있는 동안 선택
/* a 요소에 마우스 커서를 올리면 글자색이 빨강색으로 됨 */
a :hover {
color: red;
} 2. A:active
- 선택자 A 요소에 마우스를 클릭하고 있는 동안 선택
/* a 요소를 클릭하는 동안 글자색이 빨강색으로 됨 */
a :active {
color: red;
} 3. A:focus
-
선택자 A 요소가 포커스 되면 선택
-
focus가 될 수 있는 요소는 HTML 대화형 콘텐츠(input, a, button, label, select 등..)가 해당한다.
-
HTML 대화형 콘텐츠 요소가 아닌 tabindex 속성을 사용한 요소도 가능(
tabindex="-1")
/* input 태그가 focus 되면 배경색이 오렌지 색으로 됨 */
input:focus {
background-color: orange;
}4. A:first-child
- 선택자 A가 형제 요소 중 첫째라면 선택
/* fruits 클래스의 하위 span 선택자 중에 첫째 요소의 글자색이 빨강색으로 됨 */
.fruits span:first-child {
color: red;
}5. A:last-child
- 선택자 A가 형제 요소 중 막내라면 선택
/* fruits 클래스의 하위 span 선택자 중에 막내 요소의 글자색이 빨강색으로 됨 */
.fruits span:last-child {
color: red;
}6. A:nth-child(n)
-
선택자 A가 형제 요소 중 (n)번째라면 선택
-
n은 숫자뿐만 아니라 2n 등 숫자와 함께 사용가능(이 때, n은 zero-based numbering)
-
2n: 짝수 자식들 선택
-
2n+1: 홀수 자식들 선택
/* fruits 클래스의 하위 모든 선택자 중 2번째 형제 요소의 글자색이 빨강색으로 됨 */
.fruits *:nth-child(2) {
color: red;
}부정 선택자
A:not(B)
- 선택자 B가 아닌 A 요소 선택
/* fruits 클래스의 하위 모든 선택자 중 span 선택자가 아닌 선택자의 글자색이 빨강색으로 됨 */
.fruits *:not(span) {
color: red;
}가상 요소
1. A::before
- 가상의 인라인(글자) 요소를 만들어서 선택자 A 요소의 내부 앞에 내용(content)을 삽입
/* box 클래스를 가진 요소 내용 앞에 앞! 이라는 글자를 삽입 */
.box::before {
content: "앞!";
}2. A::after
- 가상의 인라인(글자) 요소를 만들어서 선택자 A 요소의 내부 뒤에 내용(content)을 삽입
/* box 클래스를 가진 요소 내용 뒤에 뒤! 라는 글자를 삽입 */
.box::after {
content: "뒤!";
}before, after를 사용할 때는 content로 내용을 무조건 명시해줘야 함!
속성
1. [A]
- 속성 A를 포함한 요소 선택
/* disabled 속성을 포함한 요소의 글자 색이 빨강색으로 됨 */
[disabled] {
content: "뒤!";
}2. [A = "B"]
- 속성 A를 포함하고 값이 B인 요소 선택
/* type 선택자를 갖고 있으며 값이 password인 요소의 글자색이 빨강색으로 됨 */
[type="password"] {
content: "뒤!";
}스타일 상속
상위(부모, 조상) 요소에 적용된 스타일을 하위(자식, 자손) 요소가 물려 받는 것 의미한다.
-
글자/문자와 관련된 속성들이 상속된다. (모든 속성이 상속되는 것은 아님)
-
font-style: 글자 기울기
font-weight: 글자 두께
font-size: 글자 크기
line-height: 줄 높이
font-family: 폰트(서체)
color: 색상
text-align: 정렬
etc.. -
margin,padding,border,display,background등은 상속이 안됨
강제 상속
inherit속성을 추가해 강제적으로 부모 요소로부터 상속되도록 할 수 있다.
선택자 우선 순위
우선순위란, 같은 요소가 여러 선언의 대상이 된 경우에 어떤 선언의 CSS 속성을 우선 적용할 지 결정하는 방법이다.
-
점수가 높은 선언이 우선함!
-
점수가 같으면, 가장 마지막에 해석된 선언이 우선함
-
점수를 계산하는 것을 명시도 라고 한다.
-
!important-> 9999999999점(무한대, 가장 중요)
인라인 선언-> 1000점
ID 선택자-> 100점
Class 선택자-> 10점
태그 선택자-> 1점
전체 선택자-> 0점
상속-> 별도의 점수 계산 X
