...

View Full Version : 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 (http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/).

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.



#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
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 -

<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum