How to set paragraph with class inside DIV?

toplisek · 02-23-2011, 08:50 AM

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?

Excavator · 02-23-2011, 09:00 AM

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.

toplisek · 02-23-2011, 09:24 AM

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?

VIPStephan · 02-23-2011, 11:21 AM

I don’t understand the pseudo code you posted. Can you give us your real HTML?

Excavator · 02-23-2011, 05:57 PM

Quote:

Originally Posted by toplisek

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>