CSS 3 selector for H2 directly after div

jasotasticon
jasotasticon used Ask the Experts™
on
I want to target all h2s that come directly after a div with the class of "special_div"
<div class="special_div">
bla bla bla
</div>

<h2>The Target</h2>

<h2>Not the Target</h2>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
You can't target elements coming AFTER a certain div. You can either target elements with a certain class, or a single element with a certain ID, or elements WITHIN a div, but not AFTER a div.

Commented:
Ops, now I've read more carefully and know what you mean.

After each and every instance of a certain DIV, you want the imediatelly following H2 tag to be targeted, and only that specific h2 tag, and no other h2 tag.

Is that right?
Commented:
I hope you mean select, try this:
div.special_div ~ h2

note: The <h1> to <h6> tags are used to define HTML headings. Should not be used for style purpose.
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Commented:
Here is the selector you're looking for:

div.special_div+h2 {
    color:red;
    ...
 }

It's part of CSS2.1 and works in IE7+

http://kimblim.dk/css-tests/selectors/

Author

Commented:
Both of these solutions work perfectly. Not sure the difference, but thanks to both of you!

SSpreme,

Are you saying it is not good practice to style your headings? I am confused... I'm probably just misunderstanding...

Thanks again!

Commented:
Headings Are Important

Use HTML headings for headings only. Don't use headings to make text BIG or bold.

Search engines use your headings to index the structure and content of your web pages.

Since users may skim your pages by its headings, it is important to use headings to show the document structure.

H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on.

Author

Commented:
Yes, thanks, I know all this, I was not using the headings to style things. I was using CSS to style my headings. Not sure what made it seem otherwise... thanks though.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial