View Full Version : Using ":first-child" psuedo selector to modify first P in a classed DIV

Jul 30th, 2010, 12:00 AM
Hi All,

Trying to use "first-child" to modify the first paragraph inside a div with a class on it and failing. :confused: Either I am using the wrong tools, or my interpretation of how the selectors should work is wrong.

What I would like is the first paragraph to be displayed differently when contained in a DIV of the class "col-box". The reason for this is to make it stand out over a background in a context where the person typing will not have any clue how to modify the text with CSS.

Here is the section of my CSS file:

.col-box {
width: 210px;
margin-right: auto;
margin-left: auto;
margin-top: 18px;
background-image: url(/template_images/col-vert-grade.jpg);
background-repeat: repeat-x;

div.col-box p:first-child {

Inside the DIV with the class on it I have some regular paragraphs.

<div class="col-box">
<p>Why is this not red? This is first descendant right?
<p>This should be default for paragraph
<p>More text
<p>text sample

The problem is, I am not seeing any changes to the text in any browser or my editing tool (DreamWeaver)

This slightly different code:

div.col-box p:first-line {

That does what it says, the first line of all the paragraphs in the DIV turn red, if the paragraph gets long enough to wrap, the additional lines are default text color. So I know "div.col-box" is getting to the class on the div and applying red to the paragraphs.

I used the "SelectORacle" online tool and it says:

"Selects any p element that is a first child that is a descendant of a div element with a class attribute that contains the word col-box."

Pretty much exactly what I want. Yet, any changes (i.e. "color:red;") I make are completely ignored when I use "first-child".

I can't use "first paragraph in DIV" type selectors because I have a bunch of DIVs elsewhere in the file that shouldn't be modified.

Any hints or comments would be most appreciated.

Jul 30th, 2010, 03:11 AM
Hmm… it looks like you actually forgot to close the paragraphs on purpose. And seeing this I start to ponder if you may be using invalid HTML throughout your page including not using a doctype. I could only imagine this to be the reason for the problem as :first-child usually works without problem (in modern browsers at least).

Could you please post your entire HTML and CSS and tell us in which browser you are experiencing the problem?