html - CSS は、クラスを持たない最初の要素を選択します

Question

私は<div>いくつかの を持っており、そのうちのいくつかは次のように持っていますclass: hidden:

<div id="firstDiv" class="hidden">content</div>
<div id="secondDiv">content</div>

<div>を持たない最初のものを選択したいのはわかっていますclass: hidden。CSS私はこれまでのところ:でこれを試していましdiv:not(.hidden):first-childたが、うまくいきません。

セレクターを正しく記述するにはどうすればよいですか?

Answer 1

このようなものを使用できます

html

<div id="firstDiv" class="hidden">content</div>
<div id="secondDiv">content</div> <!-- only this one will be selected -->
<div id="thirdDiv">content</div>

CSS

div:not(.hidden)
{
    background-color: red;
}
div:not(.hidden) ~ div:not(.hidden)
{
    background-color: white; /*reset everything to normal*/
}

Answer 2

次の兄弟セレクター+を使用すると、非表示の div の後に、非表示ではない最初の div を常に見つけるようなものを作成できます。

div.hidden + div:not(.hidden) 
{
    background-color: #ff0;
}

http://jsfiddle.net/mbFFQ/