First-letter in CSS 3

[doctorChuckles]

Hi,

I'm fuzzy on pseudo-classes.

I've gotten this far:

p:first-letter
{
color: green;
font-size:xx-large
}

However, this applies to all text on the page. How do I restrict the first-letter specification to the the text in one div?

Thanks,

Tim

 

[vacunita]

You need to give the DIV either an ID or a name, and use that in conjunction with the first letter pseudo class.

Something like:

#mydiv:first-letter{
color: green;
font-size:xx-large
}

}


<div id="mydiv">
Text that will get the pseudo class applied to it.
</div>

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[BillyRayPreachersSon]

O, if you wanted it to apply to only certain paragraphs within that div, use classnames as well:

#theDiv p.niceFirst:first-letter {
   color: #00CC00;
   font-size: 200%;
}

   ...

<div id="theDiv">
   <h1>Blah blah blah</h1>
   <p class="niceFirst">Lorum ipsum dolor sit amet.</p>
   <p>Lorum ipsum dolor sit amet.</p>
   <h1>Waffle waffle drone</h1>
   <p class="niceFirst">Lorum ipsum dolor sit amet.</p>
   <p>Lorum ipsum dolor sit amet.</p>
</div>

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[doctorChuckles]

Sorry, I'm not getting it.

the div looks like this:

div.textdiv {
position:absolute;
overflow:auto;
left:169px;
width:620px;
top:228px;
height:800px;
padding:16px;
background-color:#CCFFCC;
}

 

[doctorChuckles]

Oops. I clicked on the wrong button and submitted my reply while I was still composing it.

This is turning out to be messier than I expected. Maybe I should curl up with the manual for an hour or two. If I can't figure it out, I'll start another thread.

Thanks,


Tim

 

[vacunita]

You need to create an additional css style for the first letter in the div with a classname of textdiv.

div.textdiv {
position:absolute;
overflow:auto;
left:169px;
width:620px;
top:228px;
height:800px;
padding:16px;
background-color:#CCFFCC;
} 

div.textdiv:first-letter{
color: green;
font-size:xx-large;
}

What you are doing, is saying: Set the first letter of any text in a DIV that has a classname of textdiv as follows and then you define the style.



----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Rieekan]

Keep in mind that if you're talking about just changing the look of the first letter in text, you should probably use the <p> tag, not a <div> to display the contents like Dan's outlined above.

- George