CSS가 이전 제목 클래스를 기반으로 단락 스타일을 줄 수 있습니까?

Question

인터뷰 성적표에 대한 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 마크 업을 훨씬 간단하게 만들기 때문에이를 수행하는 방법이 있습니까?

Answer 1

다음 형제 조합을 사용할 수 있습니다 : +

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

Answer 2

확신하는:

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;
}

Answer 3

그건 그렇고, 새로 소개 된 것과 같이 대화를 표시하기위한 더 나은 HTML 요소가 있습니다. <dialog> 꼬리표

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

업데이트:

그만큼 <dialog> 요소는 그것을 HTML5로 만들지 않았습니다. 존재하지 않습니다.