Invision Power Services > CSS Style and sub-class

Invision Power Services > Community Forums > Community Web Design and Coding

d6rth7ader

Aug 7 2006, 02:58 AM

Hi I have a #stylelike in a web page

#bottom{
{ font:Arial, Helvetica, sans-serif;
font-size:12px;
color:#CC3333;
font-weight:bold
}

Now

Html is like this

<div id="bottom">
<p> Bottom Line 1 </p>
<p> Bottom Line2 </p>
</div>

I have to add a different font for bottom Line 2. how can I do that without changing the <div id="bottom">

Can I add a sub-class in the #bottom id style.

Please help with sample code..
Reply With Quote

RobertMidd

Aug 7 2006, 10:26 AM

QUOTE(d6rth7ader @ Aug 7 2006, 03:58 AM)

It can be done in a number of ways and here is my example.

CODE

Aug 7 2006, 01:36 PM

Here's another one.

CODE

#bottom *:last-child {
color: #f00;
}

It basically modifies any element that is the last child of #bottom, which would therefore not require changing any of the (X)HTML, however you'd find it not working in browsers like Internet Explorer 6.

=Charles

Aug 7 2006, 06:27 PM

How about:

CODE

#bottom p+p {
font-family: Arial, Helvetica, sans-serif;
}

Bøb

Aug 8 2006, 08:56 PM

QUOTE(d6rth7ader @ Aug 7 2006, 03:58 AM)

Hi I have a #stylelike in a web page

#bottom{
{ font:Arial, Helvetica, sans-serif;
font-size:12px;
color:#CC3333;
font-weight:bold
}

Now

Html is like this

<div id="bottom">
<p> Bottom Line 1 </p>
<p> Bottom Line2 </p>
</div>
I have to add a different font for bottom Line 2. how can I do that without changing the <div id="bottom">

Can I add a sub-class in the #bottom id style.

Please help with sample code..
Reply With Quote

and remember to remove your double opening of { in the first css style

Antony

Aug 8 2006, 10:52 PM

QUOTE(Aka Tolken @ Aug 7 2006, 07:27 PM)

How about:

CODE

#bottom p+p {
font-family: Arial, Helvetica, sans-serif;
}

Will that work in IE?

=Charles

Aug 9 2006, 12:58 PM

Unfortunately not.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.