Select first occurring element after another element

Question

I\'ve got the following HTML code on a page:

Some text

Some more text!

In my .css I\

Answer 1

Just hit on this when trying to solve this type of thing my self.

I did a selector that deals with the element after being something other than a p.

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

Hope this helps anyone who finds it :)

Answer 2

Simplyfing for the begginers:

If you want to select an element immediatly after another element you use the + selector.

For example:

div + p The "+" element selects all <p> elements that are placed immediately after <div> elements

---

If you want to learn more about selectors use this table

Answer 3

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

This is called the adjacent sibling selector.

Answer 4

I use latest CSS and "+" didn't work for me so I end up with

:first-child

Answer 5

For your literal example you'd want to use the 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 wanted to select all successive paragraphs, you'd need to use the general sibling 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's known to be buggy in IE 7+ unfortunately.