I have a <div> that contains multiple <p> elements, and I want to apply specific styling only to the first <p> within each <div> with a unique class called cnt.
Please take note that this question may seem similar to others on SO, but the requirement here is that the styling should be exclusive to the class cnt, setting it apart.
//Utilizing 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>
// Attempted usage of this class without success!"
.cnt p:first-child
{
background-color:Red;
}
// Potential conflicts from other classes
.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: Specified need in CSS 2 (avoiding CSS3 such as :first-of-type)