セレクタが適切に

Question

私はこのコンテナは、クラス.btn を持つ要素を持つクラス.headerRightZone とコンテナはそれらのいくつかは、クラス.hidden

目標を持っている持って動作しません。隠しクラス）ボタン

myhtml.html

<div class="headerRightZone"> 
    <a href="javascript: void(0)" class="btn">Button 1</a> 
    <a href="javascript: void(0)" class="btn">Button 2</a> 
    <a href="javascript: void(0)" class="btn">Button 3</a> 
    <a href="javascript: void(0)" class="btn hidden">Button 4</a> 
    <a href="javascript: void(0)" class="btn hidden">Button 5</a> 
</div> 

mycss.css

.hidden{ 
    display: none; 
} 

.btn{ 
    background-color: #fff; 
} 

.headerRightZone .btn:not(.hidden):last-of-type{ 
    background-color: #f00; 
} 

私が書いた：

.headerRightZone .btn:not(.hidden):last-of-type 

をしかし、それは空の配列を返します。

は、コード内で何が悪いjsFiddle Example

を添付しますか？配列が空の理由

Answer 1

ここでの問題は、last-of-typeが期待していたとおりに動作しないことです。

要素タイプに基づいて評価されます（この場合はa）。クラスについては気にしません。あなたが書いたセレクターは、それが持つクラスに関係なく、最後のアンカータグにしか影響しません。あなたの最後の要素が表示されないので、あなたのスタイルが設定されていません。 updated fiddle

あなたの問題を解決するために、あなたは、これはCSSの能力を超えているとして、JavaScriptやjQueryのを使用する必要があります：異なる要素を非表示に

が、これは示しています。

いくつかの良い提案は、すでに前に行われていますhere