css not() 선택자 이용문제
본문
.path li:not(.displaynone):last-child a { color: red }
li 요소중 displaynone이라는 클래스명을 가진 li를 제외한 애들중에서 마지막 li에게 스타일을 줄려고 하는데 이렇게 줘도 안되네요 어떡하면 좋을까요??
답변 1
<style>
.path li:not(.displaynone):last-child a { color: red }
</style>
<ul class="path">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
<ul class="path">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class="displaynone"><a href="#">3</a></li>
</ul>
올리신 소스에 문제는 없는것 같습니다.
댓글 감사합니다
근데 저는
<ul class="path">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li class="displaynone"><a href="#">6</a></li>
</ul>
지금 이런상황이라... 이렇게 하니 안먹히네요ㅜ
찾으시는 기능이 이것 같네요.
<style>
.path li:not(.displaynone):has(+ li.displaynone) a { color: red; }
</style>
<ul class="path">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li class="displaynone"><a href="#">6</a></li>
</ul>
<ul class="path">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="displaynone"><a href="#">4</a></li>
<li class="displaynone"><a href="#">5</a></li>
<li class="displaynone"><a href="#">6</a></li>
</ul>
<ul class="path">
<li><a href="#">1</a></li>
</ul>
참고로 displaynone 을 가지는 처음 요소들은 아래와 같이 선택할수 있습니다.
.path li:not(.displaynone) + li.displaynone a { color: orange; }
와! 감사합니다! 덕분에 해결했네요
답변을 작성하시기 전에 로그인 해주세요.