GibboK GibboK - 7 months ago 8
HTML Question

How to select the first paragraph in a div with a specific class (CSS 2)

I have a

<div>
containing many
<p>
elements and need to apply some style only to the first
<p>
inside every
<div>
with a specific class (cnt).

Please note this question may appear similar to others on SO, but the role I need should apply only for class
cnt
, which makes it different.


//I use YUI 3 Reset and Grid:
<link href="http://yui.yahooapis.com/3.4.0/build/cssfonts/fonts.css" rel="stylesheet" type="text/css" />
<link href="http://yui.yahooapis.com/3.4.0/build/cssgrids/grids.css" rel="stylesheet" type="text/css" />

<div class="cnt">
<p>Number 1</p>
<p>Number 2</p>
<p>Number 3</p>
</div>


// I'm using this class without success!"
.cnt p:first-child
{
background-color:Red;
}

// Other classes could create some conflict
.cnt p
{
margin: 10px 0px 10px 0px;
}
.cnt h2, .cnt h3, .cnt h4, .cnt h5, .cnt h6
{
font-size: 16px;
font-weight: 700;
}
.cnt ul, .cnt ol
{
margin: 10px 0px 10px 30px;
}
.cnt ul > li
{
list-style-type: disc;
}
.cnt ol > li
{
list-style-type: decimal;
}
.cnt strong
{
font-weight:700;
}
.cnt em
{
font-style:italic;
}
.cnt hr
{
border:0px;
height:1px;
background-color:#ddddda;
margin:10px 0px 10px 0px;
}
.cnt del
{
text-decoration:line-through;
color:Red;
}
.cnt blockquote
{ margin: 10px;
padding: 10px 10px;
border: 1px dashed #E6E6E6;
}
.cnt blockquote p
{
margin: 0;
}


PS: I need it in
CSS 2
(neither the less CSS3 :first-of-type works great)

Answer

Your example should work fine

Demo

Alternate method

Live Demo

Try using the first-of-type selector.

.cnt p:first-of-type{
    background-color:Red;
}

It is a CSS3 selector and wont work on IE8 however.

Comments