Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    Hi All,

    Trying to use "first-child" to modify the first paragraph inside a div with a class on it and failing. 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:
    Code:
    .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 {
    	color:red;
    	}
    Inside the DIV with the class on it I have some regular paragraphs.

    Code:
    <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
    </div>
    The problem is, I am not seeing any changes to the text in any browser or my editing tool (DreamWeaver)

    This slightly different code:

    Code:
    div.col-box p:first-line {
    	color:red;
    	}
    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.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,916
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    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?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •