목차
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 선택자 스타일이 적용된다.
![](https://i0.wp.com/keepitupcoding.com/wp-content/uploads/2024/08/specificity-1024x578.png?resize=640%2C361&ssl=1)
- 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 속성에 특수문자를 적고 싶을 때 사용하기 좋다.