목차
CSS에서 선택자를 활용해 스타일을 적용하는 방법
/* element selector */
body {
font-size: 22px;
}
/* group selector */
button,
input,
textarea,
select {
font: inherit;
}
h1,
h2 {
color: blue;
}
/* nested h2 */
h1 h2 {
color: blue;
}
/* class selector */
.gray {
color: gray;
}
/* id: only once, unique */
#second {
font-style: italic;
}
- CSS(Cascading Style Sheet)의 캐스캐이딩(Cascading)이라는 이름에서도 알 수 있듯이 스타일의 적용은 top down 방식으로 진행된다.
- 동일한 선택자 우선순위의 스타일일 경우 아래쪽에 설정한 스타일이 적용되며, 구체성 점수(specificity)에 따라 class 선택자를 element 선택자 위에 쓸 경우 class 선택자 스타일이 적용된다.
- id(#) > class(.) > element(html 태그 e.g.
p, div)의 순서로 우선순위가 있다. 헷갈릴 경우 구체성 점수 계산기를 활용하자. !important를 사용할 경우 해당 스타일이 가장 우선순위를 가지게 되어 override 된다. 하지만 유지보수성이 떨어지므로 최대한 사용하지 않도록 한다.- 스타일은 inherit 특성을 가지고 있어 부모 속성의 스타일을 따라간다. 하지만 border, font 등 상속되지 않는 속성도 있다.
헷갈리는 선택자
자손 선택(공백, >)
- 공백(e.g.
.header a): 모든 자손을 선택한다. nested한 관계의 자손까지 모두 선택된다. - >(e.g.
.header > a): 자손 중 가장 인접한(직계) 자손만 선택한다.
인접 형제 결합자(+), 일반 형제 결합자(~)
- +(e.g.
img + p): img 다음에 위치하는 형제 요소 p를 1개만 선택한다. - ~(e.g.
img ~ p): img 다음에 위치하는 형제 요소 p를 전부 선택한다. - 두 규칙 모두 img와 p 사이에 다른 요소가 있어도 상관없이 선택할 수 있다.
first-child, first-of-type
- first-child(e.g.
p:first-child): 해당 자식요소가 첫번째 일때만 선택 가능하다. - first-of-type(e.g.
p:first-of-type): 해당 자식요소의 타입 중 첫번째를 선택하므로 조금 더 자유롭게 쓸 수 있다. last-child와last-of-type에서도 마찬가지이다.
자주 사용하는 선택자 트릭
> *
- 모든 직계 자식 요소를 선택해야할 때 많이 사용한다.
:not(:last-child) / :not(:last-of-type)
- 마지막 요소를 제외하고 스타일을 주고 싶을 때 많이 사용한다. 주로 마지막 요소를 제외하고 마진을 줘야할 때 많이 사용한다.
[](속성(attribute) 선택자)
[]를 사용하면 html 속성을 이용하여 요소를 선택할 수 있다.- (e.g.
p[class^="col-"]p 태그 중 class 속성이 col-로 시작하는 요소
유용한 사이트
- 선택자 규칙이 헷갈릴 때 반드시 방문해야하는 사이트
- html이나 :before, :after 선택자의 contents 속성에 특수문자를 적고 싶을 때 사용하기 좋다.