동일한 우선순위를 갖는 두 스타일링이 정의될 때, 마지막에 나오는 스타일링이 적용된다.
우선순위
ID selector > class selector > element selector
상속
부모 요소에서 설정된 일부 css 속성 값은 자식 요소에 의해 상속된다.
그러나 일부는 상속되지 않을 수 있다.
width, margin, padding, border는 상속 ❌
color, font-family는 상속 ⭕️
상속 제어
상속을 제어하기 위한 4가지의 특수 범용 속성값을 제공
1. inherit
- 선택한 요소에 적용된 속성 값을 부모 요소의 속성 값과 동일하게 설정
- initial
- 선택한 요소에 적용된 속성 값을 브라우저의 기본 스타일 시트에서 해당 요소의 해당 속성에 설정된 값과 동일하게 적용되도록 한다. 브라우저의 기본 스타일 시트에서 값을 설정하지 않고 속성이 자연스럽게 상속되면 속성 값이 대신 inherit 되도록 설정
- unset
- 속성 값을 natural 값으로 재설정
- 속성이 자동적으로 상속되면 inherit 된 것처럼 작동하고 그렇지 않으면 initial처럼 작동한다.
- revert
- 브라우저 지원이 제한됨
모든 속성 값 재설정
shorthand 속성을 all로 사용하면 상속 값 중 하나를 (거의) 모든 속성에 한 번에 적용 가능하다.
스타일에 대한 변경사항을 취소하여 새로운 변경을 시작하기 전에 알려진 시작 지점으로 돌아갈 수 있는 편리한 방법이다.
blockquote {
background-color: orange;
border: 2px solid blue;
}
.fix-this {
all: unset;
}blockquote 요소가 두 개 있을 때, .fix-this를 class로 설정해둔 요소는 스타일이 적용되지 않는다.
계단식 Cascade
- Importance
- 우선 순위
- class selector > element selector
- 덮어 쓰는 전체 규칙에 적용이 되는 게 아니라 겹치는 동일한 규칙에만 적용된다.
- 소스 순서
- 동일한 가중치를 갖는 두 개의 규칙이 있을 때, 후에 오는 규칙이 적용된다.
브라우저가 우선순위를 계산하는 방법
선택자의 우선순위는 4개의 다른 값을 사용하여 측정되며, 이는 4개의 열에서 thousands, hundreds, tens and ones 개의 단일 자릿수로 간주될 수 있다.
- Thousands: 선언이 인라인 스타일인 style 속성 안에 있으면 1점을 받는다.
- 선택자가 없으므로 우선순위는 항상 1000이다.
- Hundreds: 전체 선택자에 포함된 각 ID 선택자에 1점 부여
- Tens: 전체 선택자 내에 포함된 각 class 선택자, 속성 선택자 또는 pseudo-class 에 대해 이 열에서 1점
- Ones: 각 요소 선택자 또는 전체 선택자 내에 포함된 pseudo-element 에 대해 1점
범용 선택자 (*), 결합자 (+, >, ~, ' ') 및 부정 pseudo-class (:not) 는 우선 순위에 영향❌
!important
특정 속성과 값을 가장 구체적으로 만들어 cascade의 일반적인 규칙을 무시하는 데 사용된다.
반드시 필요한 경우가 아니면 사용하지 않는 것이 좋다.
취준 진입