선택자는 특정 요소 혹은 요소들을 태그 이름, id(#)나 class(.) 키워드 뒤에 놓음으로써 CSS에서 요소를 인식하고 선택할 수 있게 하는 명령어를 말한다.
선택자 개념을 다루는 김에 cascading원칙을 짚고 넘어가겠습니다.
CSS는 cascading style sheet의 약자다. 계단처럼 위에서부터 아래로 읽어내려가는(cascading) 원칙때문에 지어진 이름이라고 한다. 아래에 있을수록 스타일은 더 우선적으로 적용된다.
div {
background: blue;
}
div {
background: green;
}
div {
background: red;
}
위의 예시에서 div의 배경색은 빨강, 초록, 파랑순으로 우선순위가 적용된다.
selector중에서도 적용의 우선순위가 있다.
id(#)는 100, class(.)은 10, 기본적인 tag는 1. 구체적일수록 우선적으로 적용된다고 보면 된다.
// 1
div {
background: blue;
}
// 10
.class {
background: green;
}
// 100
#id{
background: red;
}
위의 예시에서 선택자들이 가리키는 요소는 같은 것인데도, 선택자 우선순위에 따라서 결국 div는 빨강색이 된다.
재밌는 것은 한 번에 여러가지 선택자를 쓰는 경우이다.
선택자 specifity는 여러 개를 쓰면서 더해지고, 다 더해진 값이 높은 선택자가 적용된다.
combinators를 이용해서 요소속의 자식들을 세부적으로 고를 수 있다. 뿐만 아니라 '>'로 부모 바로 밑의 자식 요소를, '+'로 같은 부모 아래의 다른 요소를 선택한다. '~'로는 먼 밑의 자식 요소를 선택한다.
header div p span {
}
div > p {
}
div + article {
}
div ~ p {
}
좀 더 세부적으로 element를 선택해주는 것. this is much much better way than creating id or class.
HTML의 code를 건드리지 않고도, 즉 id나 class를 정해주지 않아도 HTML의 모양새를 바꿀 수 있다.
div:nth-child (2n + 1) {
}
div:last-child {
}
form input::placeholder {
}
p::selection {
}
hover, focus, visited와 같이, 요소의 상태 혹은 이벤트에 따른 스타일을 결정할 수 있다.
div:active{
}
div:hover{
}
div:focus{
}
element의 attribute을 따로 부름으로써 지정할수 있다.
input[type="password"] {
}
input[placeholder="name"] {
}
:not
(.class .abc)대상 element가 ()안의 클래스가 아닐 경우에 execute함.
변수 를 지정해서 여러 element의 property-value를 한번에 바꿀 수 있다. css를 일종의 프로그래밍 코드로 만들어주는 기능.
:root {
--main-color: green;
--main-opacity: 0.5;
}
div {
background-color: var(--main-color);
opacity: var(--main-opacity);
}