css not() 선택자 이용문제 채택완료
dkdh12
3년 전
조회 1,933
.path li:not(.displaynone):last-child a { color: red }
li 요소중 displaynone이라는 클래스명을 가진 li를 제외한 애들중에서 마지막 li에게 스타일을 줄려고 하는데 이렇게 줘도 안되네요 어떡하면 좋을까요??
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
3년 전
</p>
<p><style>
.path li:not(.displaynone):last-child a { color: red }
</style></p>
<p><ul class="path">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul></p>
<p><ul class="path">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class="displaynone"><a href="#">3</a></li>
</ul></p>
<p>
올리신 소스에 문제는 없는것 같습니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 3개
d
dkdh12
3년 전
�
배르만
3년 전
찾으시는 기능이 이것 같네요.
[code]
<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>
[/code]
참고로 displaynone 을 가지는 처음 요소들은 아래와 같이 선택할수 있습니다.
[code]
.path li:not(.displaynone) + li.displaynone a { color: orange; }
[/code]
[code]
<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>
[/code]
참고로 displaynone 을 가지는 처음 요소들은 아래와 같이 선택할수 있습니다.
[code]
.path li:not(.displaynone) + li.displaynone a { color: orange; }
[/code]
d
dkdh12
3년 전
와! 감사합니다! 덕분에 해결했네요
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
근데 저는
<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>
지금 이런상황이라... 이렇게 하니 안먹히네요ㅜ