Apply style to first child but not second

HTML & CSS
1

I have the following code…


<div id="middle">
	<div class="content_middle">
	</div>

	<div class="content_middle">
	</div>

and want to style the first “content_middle” one way and the rest another way.

How do I do that (and ensure that it works for all browsers)?

Thanks,

Debbie

2

Add another class…

<div class=“content_middle class2”></div>

3

Interesting…

It isn’t a problem to “AND” classes together to created the desired effect?

Debbie

4

To “add” classes together to “create” the desired effect. No problem at all. Whatever is in the new class will be combined with the other.

5

What you may be looking for is to target an adjacent sibling. If you are hping to support IE6… this might be a problem.

Otherwise:
.content_middle + div{}
or .content_middle + .content_middle{}
or div + .content_middle{}

depending on your intent and mark up. would do the trick.

adding classes si another possibility… but again IE6 doesn’t like chaining:
.class1class2 {}

and you have to be really careful with specificity if you are trying to OVERRIDE rules present in both the class you are adding.

in other words:
.content_class{ color:red;}
.class2 {color: orange;}

<div class=“content_class class2”>some text </div>
can lead to unpredictable results

.content_class{ color:red;}
.content p.class2 {color: orange;} /now the text color will change to orange/

I hope that shed some light on the subject.

:slight_smile:

6

Thanks dresden.

Yes, that gives me some ideas.

I wimped out and just created #content_slideshow :slight_smile:

Debbie

7

P.S. Thanks Eric too.

BTW, I have been using FireBug on a fairly regular basis, although I still think its sucks because slows my laptop down so much! (I disable the add-on when I am doing other work.)