特定のクラスを持たない最後の要素を選択するにはどうすればよいですか？

Question

最後にliを選択して、.hiddenクラスがない場合はどうすればよいですか？

私はこのような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に注目してください。

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>

---

:has()、しかしので、ここで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

CSS :nthと:last-child擬似セレクタはタグなく:notまたはclassのような他のセレクタで動作することができますが、常に、あなたはこのようなものを使用することができ、一つだけ.hiddenli終わりがあるように起こっている場合：

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>