상속, 계단식(Cascading)logic, 우선순위

CSS로직을 이해하려면 상속, 계단식(cascading) 스타일 시트, 특수성의 세 가지 요소에 대한 이해가 선행되어야 한다.

상속

특정 컨테이너 규칙이 하위 항목에 적용되는 것을 의미한다. ‘특정’ 규칙이라고 하는 이유는 모든 규칙이 자동으로 자식에게 적용되지 않기 때문이다. 항상 상속되는 속성은 없다.

계단식 스타일 시트

하나의 요소에 여러 개의 규칙을 적용할 수 있다는 것을 의미한다. 이 개념이 없다면 상속은 일어날 수 없다.

li요소는 ol과 body요소의 속성을 상속받고 있음을 볼 수 있다.

또한

li {
  list-style: square;
  list-style: None;
}

와 같이 중첩되는 속성이 존재할 경우 가장 밑에 있는(최신의) 속성이 적용되므로 순서가 중요하다.

하지만

ol {
  list-style: None; 
  color: rgb(251, 255, 0);
}

li {
  list-style: square;
  list-style: None;
}

li {
  list-style: None;
  list-style: square;
}

ol {
    list-style: None; 
    color: rgb(251, 255, 0);
  }

Li와 ol의 순서를 바꿔서 적용해보면 ol이 더 밑에 있는데도 ol의 list-style속성은 적용되지 않는다.

이 경우에는 우선순위 개념을 적용해야 한다.

우선순위(specificity)

더 구체적인 선택자에 적용된 규칙이 덜 구체적인 선택자보다 우선된다. ‘구체적’이란 다음과 같다.

Ol의 자식인 li는 ol의 속성을 상속할 수 있다. ol의 자식인 li하나만 특정하게 선택할 경우, 이것을 구체적이라고 한다. 하도 애매해서 검색해보니 우선순위를 결정하는 네 개의 카테고리가 있었다.

1. Inline styles - Example: <h1 style="color: pink;">
2. IDs - Example: #navbar
3. Classes, pseudo-classes, attribute selectors - Example: .test, :hover, [href]
4. Elements and pseudo-elements - Example: h1, :before

출처 - https://www.w3schools.com/css/css_specificity.asp

또한 우선순위를 계산하는 방법도 존재했다. 이는 나중에 코드가 복잡해지면 사용해보려고 한다.

어찌됐든 우선순위 개념은 최우선으로 적용되기 때문에 위에서 ol과 li의 순서를 바꾸어도 아무런 변화가 없었던 것이다.

그러므로 예외였던 앵커 태그는 body선택자보다 a: -webkit-any-link 선택자가 더 구체적이기 때문에 body의 속성이 적용되지 않은 듯하다.