LESS 중첩에서의 관계 선택자
LESS에서 중첩을 사용할 때 요소를 관계에 따라 선택하는 다양한 선택자를 추가하는 방법을 살펴보겠습니다. 예제를 참고하세요.
예제
자식 선택자:
div {
> p {
color: red;
}
}
컴파일 결과:
div > p {
}
예제
인접 형제 선택자
div {
+ p {
color: red;
}
}
컴파일 결과:
div + p {
}
예제
일반 형제 선택자:
div {
~ p {
color: red;
}
}
컴파일 결과:
div ~ p {
}
실습 과제
다음 코드의 컴파일 결과가 무엇일지 설명하세요:
ul {
color: red;
> li {
padding: 20px;
}
}
다음 코드의 컴파일 결과가 무엇일지 설명하세요:
div {
ul {
> li {
padding: 20px;
}
}
}
