자주 쓰지는 않지만 알아두면 유용할 것 같은 기본 CSS 선택자들을 익혀보자.
ul + p {
color: red
}
앞의 요소 바로 뒤에 있는 요소만 선택한다.
위 코드의 경우, 각 ul 뒤에 오는 첫 번째 단락의 텍스트만 빨간색이 된다.
ul ~ p {
color: red;
}
인접선택자와 유사하지만 덜 엄격한 형태이다.
인접선택자의 경우 바로 뒤에 오는 첫번쨰 요소만 선택하지만, ~
을 사용하면, 뒤에 오는 모든 해당 요소에 styling을 반영한다.
위의 경우 ul
아래의 모든 p
의 글자 색상을 빨간색으로 바꾸게 된다.
div > ul {
border: 1px solid #000;
}
div ul
로 작성할때와 div > ul
로 작성할 때의 차이점은 >
사용 시 "직계 자식"만을 선택한다는 점이다.
ul
아래에 적혀있는 div
의 자손들에게는 styling이 전혀 반영되지 않는다.