CSS General Sibling Selector vs Header

Question

Hi,

This is a basic but tricky question about styling header with General Sibling Selector. Many people make a mistake about using it (and write books!). It seems for me useless:

<h1>Title 1</h1>
<p>text</p><p>text</p>
<h2>Title 1.1</h2>
<p>text</p><p>text</p>
<h3>Title 1.1.1</h3>
<p>text</p><p>text</p>
<h2>Title 1.2</h2>
<p>text</p><p>text</p>
<h3>Title 1.2.1</h3>
<p>text</p><p>text</p>

I would like to style all my P with a margin:

H1 ~ P { margin-left: 1em; }
H2 ~ P { margin-left: 2em; }
H3 ~ P { margin-left: 3em; }

It simply can't work !

Because P of section 1.2 are after a H3 and styled by H3 isntead of H2.

• I can't use H2+P because I can have many P.
• I don't want to use <div> around the P it's too cludge.
• if I do not put a wraper on this code all P in the page after this code will be selected !

Is there a way to scope Tilde ? Or handle this issue smartly?

Answer 1

• correct your HTML, the closing-tags are wrong

• try to turn the css the other way around (the last definition wins, so i think this works (but i havn't tested))

new CSS:

h3 ~ p { margin-left: 3em; }
h2 ~ p { margin-left: 2em; }
h1 ~ p { margin-left: 1em; }

EDIT: not a big problem, but you should try to keep Captain Capslock out of your CSS... the tags are <p> and <h1> - why do you wite P and H1 in your css-selector?