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 5 of 5
  1. #1
    Regular Coder
    Join Date
    May 2006
    Posts
    216
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Question How to set paragraph with class inside DIV?

    I have set <p> specification within DIV.
    Issue is that I have to define separate specifications for <p> but as this is indiside DIV it will be priority general paragraph spec.

    How to disable general spec. to use my specific class for paragraph and keep general for other?

    Is only solution DIV defined p?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello toplisek,
    If your div was id, for example, myDiv you could style the paragraph tag inside it with this line in your CSS - #myDiv p {styling}

    See more about specificity here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    May 2006
    Posts
    216
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I have
    # myDIV
    (
    .products1 p()

    )
    /DIV

    Div has general p and class has specific p
    How to make separate that class with name like product1 and its p will work?

    You see inside DIV is CLASS name. ID has priority over CLASS as CLASS is inside this DIV.
    PHP Code:

    #mydiv .products1 p { margin: 0; margin-bottom: 10px; text-align: left; } 
    will this work or it will take general p form #mydiv? is this correct?


    will work or it will take general DIV p?
    Last edited by toplisek; 02-23-2011 at 09:33 AM.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,696
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    I don’t understand the pseudo code you posted. Can you give us your real HTML?

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by toplisek View Post
    will this work or it will take general p form #mydiv? is this correct?


    will work or it will take general DIV p?
    That bit of CSS #mydiv .products1 p { margin: 0; margin-bottom: 10px; text-align: left; } , will apply to any paragraph tag that is in a div with the class of product that is contained in #mydiv.
    In otherwords, it's pretty specific.

    See this example, just copy/paste the whole thing into a new .html document and view it in your browser -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #mydiv .products1 p {
    	margin: 0;
    	margin-bottom: 10px;
    	text-align: left;
    	color: #f00;
    }
    p {color: #00f;}
    </style>
    </head>
    <body>
        <div id="mydiv">
            <div class="products1">
            	<p>some text targeted by #mydiv .products1 p</p>
            <!--end .products1--></div>
            	<p>some text with the sitewide p styling of blue.</p>
        <!--end mydiv--></div>
    </body>
    </html>
    Last edited by Excavator; 02-23-2011 at 06:02 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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