CSS how to select the first element after another element

Question

I have the following HTML on the page

<h4>Some text</h4> <p> Some more text! </p> 

In my css, I have the following selector for styling an H4 element. The HTML code above is just a small part of the whole code, there are several divs more wrapped around the shadow block.

 #sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4 { color : #614E43; margin-top : 5px; margin-left : 6px; } 

So, I have the right style for my H4 element, but I also want to tweak the paragraph tag in my HTML. Is this possible with CSS selectors? And if so, how can I do this?

Answer 1

 #many .more.selectors h4 + p { ... } 

This is called the adjacent sibling selector .

Answer 2

For your literal example, you want to use an adjacent selector (+).

 h4 + p {color:red}//any <p> that is immediately preceded by an <h4> <h4>Some text</h4> <p>I'm red</p> <p>I'm not</p> 

However, if you want to select all subsequent paragraphs, you will need to use a common selector (~).

 h4 ~ p {color:red}//any <p> that has the same parent as, and comes after an <h4> <h4>Some text</h4> <p>I'm red</p> <p>I am too</p> 

It is known that unfortunately in IE 7+ .

Answer 3

Just push it, trying to solve this problem yourself.

I made a selector that deals with an element, being something other than p.

 .here .is.the #selector h4 + * {...} 

Hope this helps anyone who finds it :)