Select first occurring element after another element

html css css-selectors
Rob picture Rob · Jan 7, 2011 · Viewed 129.1k times · Source

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 divs 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?

Answer

Phrogz picture Phrogz · Jan 7, 2011 
#many .more.selectors h4 + p { ... }

This is called the adjacent sibling selector.

Related questions

Can I write a CSS selector selecting elements NOT having a certain class or attribute?

I would like to write a CSS selector rule that selects all elements that don't have a certain class. For example, given the following HTML: <html class="printable"> <body class="printable"> <h1 class="printable">…

Read More
CSS selector for text input fields?

How can I target input fields of type 'text' using CSS selectors?

Read More
How can I style even and odd elements?

Is it possible to use CSS pseudo-classes to select even and odd instances of list items? I'd expect the following to produce a list of alternating colors, but instead I get a list of blue items: <html> <…

Read More