👉 CSS 선택자(Selector)
전체 선택자
* {margin: 0; padding: 0;}html의 모든 태그를 선택한다.
태그 선택자
p {color: black;}모든 p 태그를 선택한다.
class 선택자
.box {color: black;}
div.box2 {color: red;}.box는 class 라는 이름의 클래스를 가진 모든 엘리먼트 선택
div.box2는 box2라는 이름의 클래스를 가진 모든 div 태그의 엘리먼트 선택
ID 선택자
#name {color: red;}class는 "." ID는 "#" 으로 선택할 수 있다.
하위 선택자
div span {display: block;}div 태그에 속하는 모든 하위 span 태그를 선택한다.
자식 선택자
div > span {display: block;}div 태그에 속하는 모든 하위 span 중,
부모 요소의 바로 아래 자식 요소만 선택한다.
인접 형제 선택자
// css
span + ul {display: block;}
// html
<div>
<ul class="first"></ul>
<span></span>
<ul class="second"></ul>
<ul class="third"></ul>
</div>같은 부모 요소를 가진 엘리먼트들을 형제 관계라고 하는데
먼저 나오는 엘리먼트가 '형', 뒤에 나오는 엘리먼트가 '동생'
(먼저 나온다 = html 문서에 먼저 쓰여진다.)
인접 형제 선택자는 첫 번째 동생 엘리먼트가 조건을 충족시킬 때에만 선택된다.
이 경우 second 클래스를 가진 ul이 선택된다.
복합 선택자 - 일반 형제 선택자
// css
span ~ ul {display: block;}
// html
<div>
<ul class="first"></ul>
<span></span>
<ul class="second"></ul>
<ul class="third"></ul>
</div>인접 형제 선택자와 다르게, 조건을 충족하는 모든 동생 엘리먼트 선택한다.
이 경우 second와 third 클래스를 가진 ul이 선택된다.
속성 선택자
// css
a[href] {font-size: 10px;}
input[type="text"] {font-size: 10px;}
a[href$=".xls"] {font-size: 10px;}
// html
<a href="one.html>E[attr] 형식</a>
<input type="text">E[attr="val"] 형식
<a href="nave.xls">E[attr$="val"] 형식</a>속성 선택자는 모두 앞에 태그명과 대괄호[] 사이에 속성에 관련된 내용을 기재하여 선택한다.
E[attr="val"]형식은 속성과 속성값이 완벽하게 일치하는 경우에만 선택되고E[attr~="val"]형식은 띄어쓰기로 여러개 기재 가능한 속성값 중 하나만 일치해도 선택한다.E[attr^="val"]형식은 "val"로 시작하는 속성값을 선택한다. (ex: 웹 문서에 외부로 연결되는 링크가 있을 경우 http:// 로 시작하는지 확인하기 위해 사용)E[attr$="val"]형식은 반대로, "val"로 끝나는 속성값을 선택한다. (ex: 파일이 링크될 경우 그 파일의 확장자 확인을 위해 사용됨)
가상 클래스 선택자
웹 문서의 소스에는 실제로 존재하지 않지만 필요에 의해 임의로 가상의 선택자를 지정하여 사용하는 것
링크 선택자
x::link : 방문하지 않은 링크 x를 선택
x::visited : 방문한 링크 x를 선택
동적 선택자
x::active : x 엘리먼트에 마우스 클릭 or 키보드 엔터가 눌린 동안 x를 선택 (활성화)
x::hover : x 엘리먼트에 마우스가 올라가 있는 동안 x를 선택 (롤오버:rollover 효과)
x:focus : x 엘리먼트에 포커스가 머물러 있는 동안 x를 선택 (텍스트 필드 안에 커서가 놓여진 상태 등)
구조적 가상 클래스 선택자
x::root : 문서의 최상위 엘리먼트(html)를 선택
x::nth-child(n) : x의 n번째 엘리먼트를 선택
x::nth-last-child(n) : x의 역방향으로 n번째 엘리먼트를 선택
x::first-child : x의 첫번째 엘리먼트 선택
x::last-child : x의 마지막 엘리먼트 선택
UI요소 상태 선택자
x::enabled : 사용 가능한 컨트롤러(input, textarea, select, button)인 x를 선택
x::disabled : 사용 불가능한 컨트롤러(input, textarea, select, button)인 x를 선택
x::checked : 선택된 컨트롤러(input checked="checked")를 선택
가상 엘리먼트 선택자
x::before : x 엘리먼트의 시작 지점에 생성된 가상 엘리먼트 선택
x::after : x 엘리먼트의 끝 지점에 생성된 가상 엘리먼트 선택
👉 선택자(Selector) 우선 순위
CSS 명시도(Specificity) 계산법
!important > id [100] > class [10] > tag [1] > * [0]ID 선택자의 갯수를 세어 개당 100점으로 계산 = a
클래스 선택자의 갯수를 세어 개당 10점으로 계산 = b
태그 선택자의 갯수를 세어 개당 1점으로 계산 = c
공용 선택자는 모두 0으로 계산 = d
(가상 엘리먼트는 무시)
👉 a + b + c + d = x
x 값이 높은 순서대로 스타일을 적용시키는 우선순위를 가지게 된다.
예시) div#selector {}
div = 1점 x 1
#selector = 100점 x 1
= 101점
