First-child selector problem

[Anzeo]

Hey all,

 

 

 

I'm currently working on a website completely made out of div's (so no more tables) and I want to add some extra's too ofcourse. The thing is is, I want the first paragraph to be bold (or another style etc.). It works fine like this:

...
<div class="site pagecontainer">
<p>Lorem ipsum dolor sit amet</p>

<p>Curabitur diam. Ves...

 

But it dosn't when I add an image before the first <p> as follows:

...
<div class="site pagecontainer">
<img src="http://www.veer.com/images/merch/VPR0001210_P3.jpg" />
<p>Lorem ipsum dolor sit amet</p>

<p>Curabitur diam. Ves...

 

Does anyone know why it's not "working" anymore when I add the image?

 

 

 

TIA,

Anzeo

[joannaFloyd]

I'd be more helpful if you post the CSS code...

Anyway, I suppose you used the pseudo-class :first-child, like

1) div p:first-child

or

2) div > p:first-child

 

In general, the rule

p:first-child

selects the <p> that is a first child (of some element). So if you put <img> or any other tags before your <p> (at the same heiracy level), <p> is not first child anymore.

See specs http://www.w3.org/TR/CSS21/selector.html#first-child; there's an example that fits your case.

 

Be careful that the two line I wrote are different:

1) div p:first-child

select the <p> that is a first child (of some element) and descendant of any <div>.

2) div > p:first-child

select the <p> that is a first child (of some element) and child (=decendant of first "generation") of any <div>; i.e. the <p> written immediately after any <div>.

 

I suggest to simply use a class for your first paragraphs.

Hope it helps.

 

joanna

[Anzeo]

Thanks for the help, but it dosn't seem to be working, I also thought about the class, but before using a class I want to find out if it's possible using only CSS.

 

CSS is as follows:

 

div.pagecontainer p:first-child:first-letter
{
font-weight:bold;
color:#FFFFFF;
font-size:100px;
padding:5px;
float:left;
} 

[Anzeo]

Hmm I can make it work, putting the img tag in the first paragraph, behind the first letter... looks ugly (code) though