[한 번에 끝내는 프론트엔드 개발 : HTML, CSS] Ch7 6~10. 선택자 우선순위

CSS개요 남은 부분 정리한 것!

6. 선택자_가상 클래스(2)

• ABC:first-child
  
  

선택자 ABC가 형제 요소 중 첫째라면 선택합니다. 첫째가 아니라면 선택할 수 없습니다.

• ABC:last-child

선택자 ABC가 형제 요소 중 막내라면 선택합니다. 막내가 아니라면 선택할 수 없습니다.

• ABC:nth-child(n)

선택자 ABC가 형제 요소 중 (n)째라면 선택합니다.

예시

.fruits *:nth-child(2) {
	color: red;
}

.fruits의 하위요소이며, 2번째 요소

.fruits *:nth-child(2n) {
	color: red;
}

2n, 2n+1, n+2 등 사용할 수 있으며, n은 0부터 시작합니다.

• ABC:not(XYZ)

선택자 XYZ가 아닌 ABC 요소를 선택합니다.

7. 선택자_가상 요소

가상요소 선택자는 콜론이 두개가 붙습니다.

• ABC::before

가상의 인라인요소를 만들어서 내부 앞에 어떠한 내용을 삽입하는 용도로 사용됩니다.

• ABC::after

가상의 인라인요소를 만들어서 내부 뒤에 어떠한 내용을 삽입하는 용도로 사용됩니다.

before, after 가상요소선택자를 사용할 때는 무조건 content 속성을 사용해야 합니다.

8. 선택자_속성

속성 선택자는 대괄호를 사용합니다.

예시

[diabled] {
	color: red;
}

[type="password"] {
	color: red;
}

9. 스타일 상속

상속되는 CSS 속성은 모두 글자/문자 관련 속성들입니다. (모든 글자/문자 속성은 아님 주의)
font-style, font-weight, font-size, line-height, font-family, color, text-align...

강제 상속

실질적으로 상속이 되지 않는 CSS 속성들도 강제적으로 상속시킬 수 있는 방법

inherit이라는 값을 통해 강제 상속 시켜서 적용할 수 있습니다.

.child {
  width: 100px;
  height: inherit;
  background-color: inherit;
}

10. 선택자 우선순위

우선순위란, 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법입니다.

1. 점수가 높은 선언이 우선함!
2. 점수가 같으면, 가장 마지막에 해석된 선언이 우선함!

전체 선택자 : 0점
태그 선택자 : 1점
class 선택자 : 10점
id 선택자 : 100점
상속 : 점수를 별도로 계산하지 않습니다.
style 속성 인라인 선언 방식 : 1000점 → 인라인 선언 방식은 피해주는 게 좋음
!important : 무한대 점 → 되도록이면 사용하지 않는 것을 추천함 어쩔 수 없는 상황에서만 사용합시다.

div {
	color: red !important;
}

예시

.list li:hover { color: red; } // 21점
.box::before { content: "Good "; color: red; } // 11점

가상클래스 선택자도 클래스 선택자와 동일하게 10점을 가지고 갈 수 있습니다.

가상요소 선택자는 태그 선택자처럼 1점을 가져 갈 수 있습니다.

:not(.box) { color: red; } // 10점

가상클래스 선택자인 부정선택자는 점수 부여하지 않습니다. 따라서 위에 코드는 10점입니다.