특정 클래스가없는 마지막 요소를 선택하는 방법은 무엇입니까?

Question

클래스가없는 li은 어떻게 마지막으로 선택할 수 있습니까?

이 같은 HTML과 CSS가 : 현재의 순간에

ul li:last-child:not(:first-child):not(.hidden) button { 
 
    background-color: red; 
 
}

<ul> 
 
     <li> 
 
     <button>1</button> 
 
     </li> 
 
     <li> 
 
     <button>2</button> 
 
     </li> 
 
     <li class="hidden"> 
 
     <button>3</button> 
 
     </li> 
 
    </ul>

Answer 1

는 다음 다른 특정 요소 뒤에 요소를 찾을 수있는 어떠한 CSS의 방법이 없습니다 .

곧 가능할 수있는 CSS 관계형 의사 클래스 :has()이있을 것입니다. 현재는 CSS Selectors Level 4 Draft이며 언제든지 모든 브라우저에서 사용할 수 있습니다.

데모는 아래에 있지만 선택자 4 초안이 적어도 작업 초안에있을 때까지 작동하지 않을 것으로 예상됩니다.

언제 즉시 사용할 수 있는지 확인하려면 CanIUse을 주시하십시오.

:has()

ul li:has(+ .hidden:last-child), 
 
ul li:last-child:not(.hidden) { 
 
    background: red; 
 
}

<ul> 
 
    <li> 
 
    <button>1</button> 
 
    </li> 
 
    <li> 
 
    <button>2</button> 
 
    </li> 
 
    <li class="hidden"> 
 
    <button>3</button> 
 
    </li> 
 
</ul>

---

그래서 여기에 jQuery를 대체

Read more here from the Official jQuery Docs

$('ul li:has(+ .hidden:last-child), ul li:not(.hidden):last-child').css('background', 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <button>1</button> 
 
    </li> 
 
    <li> 
 
    <button>2</button> 
 
    </li> 
 
    <li class="hidden"> 
 
    <button>3</button> 
 
    </li> 
 
</ul>

이야,하지만 jQuery를 사용할 수있다

Answer 2

:nth 및 :last-child 의사 선택기는 :not 또는 class 같은 태그가 아닌 다른 선택기를 작동 할 수 있지만 항상 마지막에 하나의 .hiddenli을있을 것입니다 경우에, 당신이 뭔가를 사용할 수 있던 CSS :

li:nth-last-child(2) { background: lightblue; }

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li class="hidden">3 hidden</li> 
 
</ul> 
 

 
<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li class="hidden">4 hidden</li> 
 
</ul>