2009-08-24 4 views
1

私はインタビューの写しのためにいくつかのCSSルールを作成したいと思っています。私は、段落が先行する見出しのクラスに基づいて特定の色になりたいCSSは前の見出しクラスに基づいて段落スタイルを指定できますか?

<h2 class="interviewer">Alice: [00:00:00]</h2> 
<p>Is it ok if I ask you a question now?</p> 

<h2 class="interviewee">Bob: [00:00:03]</h2> 
<p>Sure go ahead.</p> 

:私が考えているフォーマットは、次のようになります。 HTMLマークアップを大幅に単純化するため、これを行う方法はありますか?

答えて

4

次-兄弟コンビネータを使用することができます:+

h2.interviewer + p { /* style goes here */ }

+0

まだIE6のために寒いですが... – JorenB

+1

@JorenB:IE6はもう考慮されるべきではありません。それは時代遅れです。 –

+0

私は今のところFirefoxを除いて何も気にしないと言っておくべきです:) – singingfish

3

確か:

h2.interviewer + p { 
    color: red; 
} 

を私も複数の段落でそれを行う方法を全くわかりません。あなたが段落のセット全体を包まおそらく場合div

<h2 class="interviewer">Alice: [00:00:00]</h2> 
<div> 
    <p>Is it ok if I ask you a question now?</p> 
    <p>More text here.</p> 
</div> 

<h2 class="interviewee"> class="interviewee">Bob: [00:00:03]</h2> 
<div> 
    <p>Sure go ahead.</p> 
</div> 

あなたはその後、これを行うことができます:ところで

h2.interviewer + div { 
    color: red; 
} 
3

を、新規に同様に、会話を表示するための優れたHTML要素があります導入<dialog>タグ

http://www.quackit.com/html_5/tags/html_dialog_tag.cfm

UPDATE:

<dialog>要素ではHTML5になりませんでした。それは存在しない。

+0

面白いです。しかし、私はまた、さらなる処理のために、ページから被験者のテキストのみをプログラム的に抽出したいと思っています。これは、その関係を伝える施設を持っていないようです。 – singingfish

+0

もちろんです。任意のタグにクラスを追加できます。 '

+0

リンク先のページには、

はHTML5にはありません。 –