TIL

CSS 선택자 (가상 클래스 / 가상 요소)

가상 클래스 선택자

:first-child

형제 요소 그룹 중 첫 번째 요소

:last-child

형제 요소 그룹 중 마지막 요소

:nth-child

형제 사이에서의 순서에 따라 요소를 선택한다.

/* 2번째 li */
li:nth-child(2) {
  color: lime;
}
/* 홀수번째 li */
li:nth-child(odd) {
  color: lime;
}

/* 짝수번째 li */
li:nth-child(even) {
  color: lime;
}
/* 2n+1번째 li */
li:nth-child(2n+1) {
  color: lime;
}

:nth-of-type

형제 그룹 안에서 위치를 기반으로 형제 요소 선택

:only-of-type

동일한 유형의 형제가 없는 형제 요소 중 유일하게 사용된 태그

:not

부정 선택자이다.

/* li 중 첫번째가 아닌 li */
li:not(:first-child){
	margin-top:20px;
}

가상 요소 (::)

선택자에 추가하는 키워드이다.

특정 요소의 일부분에만 스타일을 입힐 수 있다.

::after과 ::before

선택한 요소에 자식을 생성한다.

보통 content 속성과 짝을 지어 요소에 장식용 콘텐츠를 추가할 때 사용한다

빈 태그 img, br, input 에는 적용할 수 없다.

::placeholder

자리 표시자이며, input과 textarea 요소에 정보를 제공한다.

CSS 선택자 우선 순위

후자 우선의 원칙

동일한 선택자에 동일한 속성이 사용되었을 경우 뒤에 적힌 속성을 따른다.

<p>선택자 우선순위</p>

p {color: red; font-size:20px;}
p {color: blue;}

color 속성이 동일하기 때문에, 결과는 blue 색으로 적용이 된다.

우선 순위 계산

• inline-style : 1000점
• id 선택자 "#" : 100점
• class ".", 가상 클래스, 속성 선택자 : 10점
• 타입, 가상요소 선택자 : 1점
• 전체 선택자 "*" : 0점

예시를 들어보자!

<div>
  <p id="id" class="class">
		1. 이 글자는 어떤 색일까요?
	</p>
  <p id="id" class="class" style="color:red">
		2. 이 글자는 어떤 색일까요??
	</p>
</div>

div #id{
  color:green;
}
p{
  color:black;
}
#id{
  color:blue;
}
.class{
  color:yellow;
}

여기서 1번 문장은 #id, .class와 같이 단독으로 쓰이는 것보다 유형 선택자와 아이디 선택자가 함께 쓰인 div #id처럼 더 구체적으로 작성된 선택자 속성이 적용되어 "초록색"으로 적용이 된다.

2번 문장은 inline-style 속성이 적용되어 "빨간색"으로 적용이 된다.

중요성의 원칙 (!important)

이 선언은 다른 CSS의 어떤 선언 보다도 우선된다.

하지만, CSS의 자연스러운 상속을 깨뜨리기 때문에 오류 및 버그 발생 시 수정을 어렵게 만들어서 important의 사용은 좋지 못한 습관이다!