Select first occurring element after another element
I've got the following HTML code on a page:
<h4>Some text</h4>
<p>
Some more text!
</p>
In my .css
I've got the following selector to style the h4
element. The HTML code above is just a small part of the entire code; there are several div
s more wrapped around belonging to a shadowbox:
#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4
{
color : #614E43;
margin-top : 5px;
margin-left : 6px;
}
So, I have the correct style for my h4
element, but I also want to style the p
tag in my HTML.
Is this possible with CSS-selectors? And if yes, how can I do this?
#many .more.selectors h4 + p { ... }
This is called the adjacent sibling selector.
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.
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 :)
Simplifying for the beginners:
If you want to select an element immediately 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.