이전에 CSS Selector에 관한 포스트(링크)를 작성했는데, 보충할 내용이 있어 추가 컨텐츠를 다룬다.


  • 전체 선택자, 요소 선택자
  • class, id, element
  • id 선택자는 여러 번 사용해도 동작하지만, 하나만 사용하는 것을 권장

selectorA 하위의 모든 selectorB 요소

div span {
  color: red;
}

div 태그 내의 모든 span 태그에 대해 적용


  • selectorA 바로 아래의 selectorB 요소
  • 바로 한 단계에만 적용
div > span {
  color: red;
}

div 태그의 바로 자식 태그들 중 span 태그에만 적용


  • A ~ B {} 의 형식으로 사용
  • A의 형제 요소 중 B인 요소를 모두 선택
p ~ span {
  color: red;
}

이럴 경우 p 태그를 발견하면 이와 형제 태그중 span 태그에만 color: red; 적용


  • A + B {} 의 형식으로 사용
  • A의 바로 다음 형제가 B라면 속성 적용(인접)
p + span {
  color: red;
}

이럴 경우 p 태그 직후의 형제 태그가 span이라면 color: red;를 적용


  • 링크, 동적 의사 클래스
  • 구조적 의사 클래스, 기타 의사 클래스, 의사 엘리먼트, 속성 선택자

1. 중요도(Importance) : !important
- 되도록 사용을 권하지 않는다.

2. 우선 순위(Specificity)
- 인라인 > id > class,속성,pseudo-class > 요소, pseudo-element

3. CSS 파일 로딩 순서(external)

  • 상속 되는 것
  • 일반적으로 Text 관련 요소이다.
  • font, color, text-align, opacity, visibility

  • 상속 되지 않는 것
  • 일반적으로 레이아웃과 관련되어있다.
  • Box model 관련 요소 : width, height, margin, padding, border, display
  • position 관련 요소 : position, top/right/bottom/left, z-index