First Child Blockquote issues.

[BryGuy]

At the beginning of each blog post I use a quote. I would like to make the blockquote for this quote different from other quotes contained in the post. I figured I would use the First Child element, but I can’t seem to get it to work.

Here’s an example of a post.

Here’s my code:

.post blockquote  {

background: url("http://photos1.blogger.com/blogger/5442/340/1600/quote.png") no-repeat scroll 10px 10px #8CA3AD;

padding: 15px 30px 15px 40px;

}



.post blockquote p {

color: #FFFFFF;

padding: 5px 0px;

font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;

font-size: 14px;

}



.post blockquote: first-child {

margin: 0;

padding: 0;

color: #990000;

}



.post blockquote p: first-child {

color: #009900;

padding: 5px 0px;

font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;

font-size: 24px;

}

[joshuanhibbert]

blockquote: first-child should be blockquote:first-child (lose the space between the p and :first-child too).

[BryGuy]

Thanks Joshua…. can’t believe that I missed that.

Unfortunately now that it’s working, it’s still not giving me the desired effect. The above code is altering the first blockquote as expected, but it’s also changing the first paragraph of ever other blockquote as well. I’m not sure how to code this properly.

[joshuanhibbert]

I think that this is what you are after:

.post blockquote:first-child {

margin: 0;

padding: 0;

color: #990000;

}

.post blockquote:first-child p {

color: #009900;

padding: 5px 0px;

font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;

font-size: 24px;

}

[BryGuy]

You rock Josh. Thanks again.

[Author]

Posts