CSS [1] – Selectors, 선택자 종류 정리

CSS Tutorial – Full Course for Beginners

Lesson 2 – Selectors

/* * {
  font-family: monospace;
} */

html {
  font-size: 22px;
}

main {
  font-family: monospace;
  ;
}

/* element selector */
body {
  font-size: 22px;
}

button,
input,
textarea,
select {
  font: inherit;
}

/* group selector */
h1,
h2 {
  color: blue;
}

/* nested h2 */
h1 h2 {
  color: blue;
}

p {
  color: purple;
}

.highlight {
  text-transform: uppercase;
  background-color: gold;
}

/* class selector */
.gray {
  color: gray;
}

/* id: only once, unique */
#second {
  font-style: italic;
}

• Cascading: top down 방식, 아래쪽에 설정한 스타일이 적용됨
• 하지만 구체성 점수(specificity)에 따라 class 선택자를 element 선택자 위에 쓸 경우 class 선택자 스타일이 적용됨
• !important 사용할 경우 해당 속성이 override, 유지보수성이 떨어지므로 최대한 사용하지 않도록
• inherit 특성에 따라 부모 속성의 스타일을 따라감
• border, font 등 상속되지 않는 속성도 있음