CSSセレクタルールの要素を非表示にする

Question

私は、アコーディオンスタイルの機能を備えたHTMLページを作成しようとしています。最初に、私はこの単純なCSSセレクタを持っています。「H1が別のH1の直後にある場合は、背景を赤にします。

<style type="text/css"> 
    h1 + h1 
    { 
     background-color: red; 
    } 
</style> 

はその後、いくつかの単純なHTML：彼らが必要のよう

<h1>First</h1> 
<p>Blah, blah...</p> 
<h1>Second</h1> 
<p>Blah, blah...</p> 
<h1>Third</h1> 
<p>Blah, blah...</p> 

すべてH1Sが見える彼らはPタグが付け加えているので、どれも、赤の背景を持っていません。

<h1>First</h1> 
<h1>Second</h1> 
<p>Blah, blah...</p> 
<h1>Third</h1> 
<p>Blah, blah...</p> 

それと前H1との間のPタグが除去されるので、第二のH1は、赤い背景を有する。このため

。非常に素晴らしい。

さて、私は実際にがやりたいどのプログラムでH1S以下「コンテンツ」を非表示にすると、私は赤・ルールのキックを見たいです。このように：。

<h1>First</h1> 
<p>Blah, blah...</p> 
<h1>Second</h1> 
<p style="display: none">Blah, blah...</p> 
<h1>Third</h1> 
<p>Hello world...</p> 

しかし、 Pタグはまだそこにあるので、CSSルールは3番目のH1には適用されず、赤い背景もありません。

質問：CSSルールによって（一時的に）無視されるPタグにJavaScriptを使用して何かを適用する方法はありますか？

Answer 1

ああ、質問を書いていたときに私にやってきました。

h1 + h1, .hidden + h1 
{ 
    background-color: red; 
} 

：

は単に「H1後H1 OR H1は、 『隠れた』クラスが設定された任意のタグ以下」旨、赤い背景で二番目のルールを追加しますので、今後の参考のために、ここに私の独自のソリューションです

とシンプルな非表示クラス：

.hidden 
{ 
    display: none; 
} 

は、その後、私は単にコンテンツのPタグに「隠された」クラスを追加することができます。

<h1>First</h1> 
<p>Blah, blah...</p> 
<h1>Second</h1> 
<p class="hidden xxx">Blah, blah...</p> 
<h1>Third</h1> 
<p>Hello world...</p> 

ヴィオラ、3番目のH1は赤です。 :)私はコンテンツPタグに必要な他のクラス（ "xxx"）を適用することができます。あなたはインラインスタイルを使用してコンテンツを非表示しようとしている場合、これは動作するはず

Answer 2

：

は

h1 + h1, p[style*="display: none"] + h1 { 
    background-color: red; 
} 

チェックデモ：http://jsfiddle.net/qFyUc/