div properties only within a specific div

macintosh · #1 (**permalink**) 06-24-09, 11:33 AM

I want to set some local properties of a div. for example, for example the properties of a div "info" only when its inside a div "main" . how this can be done?
thanks

job0107 · #2 (**permalink**) 06-24-09, 12:15 PM

This will work if the info div is the first div element in the main div element.
And to get it to work in IE you need to specify a doc type.

Example:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style>
#main
{
 width:200px;
 height:200px;
 border:1px solid #f00;
 }
#main > div:first-child
{
 width:100px;
 height:100px;
 border:1px solid #000;
 }
</style>
</head>
<body>
<div id="main">
 <div id="info"></div>
</div>
</body>
</html>

macintosh · #3 (**permalink**) 06-24-09, 01:23 PM

thanks for your reply, but i have seen something like

Code:

.main {
width:200px;
height:200px;
border:1px solid #f00;
}

.main info{
 width:100px;
 height:100px;
 border:1px solid #000;
 }

Is it correct, if yes, how can i use this in html.
thanks.

wirehopper · #4 (**permalink**) 06-24-09, 03:02 PM

HTML Code:

#main .info
{
/* properties */
}

job0107 · #5 (**permalink**) 06-24-09, 11:31 PM

Quote:

Originally Posted by macintosh

thanks for your reply, but i have seen something like

Code:

.main {
width:200px;
height:200px;
border:1px solid #f00;
}

.main info{
 width:100px;
 height:100px;
 border:1px solid #000;
 }

Is it correct, if yes, how can i use this in html.
thanks.

Your kinda right, but I think it will work this way:

HTML Code:

<html>
<head>
<title></title>
<style>
.main
{
 width:200px;
 height:200px;
 border:1px solid #f00;
 }
.main .info
{
 width:100px;
 height:100px;
 border:1px solid #000;
 }
</style>
</head>
<body>
<div class="main">
 <div class="info"></div>
</div>
</body>
</html>