TIL - 알아두면 유용한 CSS 선택자 정리

김현재·2021년 9월 5일
0
post-thumbnail

자주 쓰지는 않지만 알아두면 유용할 것 같은 기본 CSS 선택자들을 익혀보자.

인접 선택자

ul + p {
	color: red
}

앞의 요소 바로 뒤에 있는 요소만 선택한다.
위 코드의 경우, 각 ul 뒤에 오는 첫 번째 단락의 텍스트만 빨간색이 된다.

A ~ B

ul ~ p {
	color: red;
}

인접선택자와 유사하지만 덜 엄격한 형태이다.
인접선택자의 경우 바로 뒤에 오는 첫번쨰 요소만 선택하지만, ~ 을 사용하면, 뒤에 오는 모든 해당 요소에 styling을 반영한다.
위의 경우 ul 아래의 모든 p 의 글자 색상을 빨간색으로 바꾸게 된다.

A > B

div > ul {
	border: 1px solid #000;
}

div ul 로 작성할때와 div > ul 로 작성할 때의 차이점은 > 사용 시 "직계 자식"만을 선택한다는 점이다.
ul 아래에 적혀있는 div 의 자손들에게는 styling이 전혀 반영되지 않는다.

profile
쉽게만 살아가면 재미없어 빙고!

0개의 댓글