Apply style to elements inside div

Need help applying style to an element inside specific div tags

[RuntimeError101]

Is there any way to apply styles to an element (p) inside a specific DIV tag?

I need to apply the style

overflow: auto;
width:75%;

to every paragraph inside a "resize" div. I cannot apply this to the <p> tags manually because the code is user generated and there is no simple way of doing it.

Can anybody help me out with this? I need something like div.resize.p, but that obviously won't work. Any help appreciated.

Thanks,
Ryan

[surrealillusions]

Welcome to WebmasterWorld

:)

You were close with your original post, this is what you need.

div.resize p
{
overflow: auto;
width:75%;
}

[g1smd]

I use this type of code all the time.

Basically, whenever you find the need to keep repeating a class name, then move the class name to the parent element and use the above notation with a space to "reach in" and style the named child elements.

Literally minutes ago I just added this to a stylesheet:

 div.toolslist hr          {clear: both;}
 div.toolslist div         {clear: both; margin: 2px;}
 div.toolslist div h3       {font-size: 110%; margin: 3px; float: left;}
 div.toolslist div p         {font-size: 90%; margin: 4px; float: left;}
 div.toolslist div a         {font-size: 90%; margin: 4px; float: right;}

[surrealillusions]

div.toolslist div p {font-size: 90%; margin: 4px; float: left;}
div.toolslist div a {font-size: 90%; margin: 4px; float: right;}

If your a tags are within the p tag, then you can just put the float:right; for the a tags as the a tags will inherit the p tag styles.

:)

[g1smd]

No, as you can see, the a is not inside in the p. :-)

I would have used

div.toolslist div p a { ... }

if it was.

The h3, the p, and the a, are all separate items inside the div.

[RuntimeError101]

Thanks for the help guys, that works fantastic.

I feel dumb now, making such a simple error. But I swore that I could not find anything elsewhere.

Anyways, thanks for the help, I really appreciate it.

[g1smd]

The above notation is the one form that most users of CSS seem to miss ... and yet it is the one that I find to be the most useful. Wierd world innit.

[swa66]

actually you can take it a notch further:

div.toolslist>div>p
vs.
div.toolslist div p

the second will also match the divititis suffering

<div class="toolslist>
  <div>
    <div>
      <div>
        <p>this</p> 
      </div>
    </div>
  </div>
</div>

while the first will not (well that's until you run into IE6 which doesn;t support ">" ...

Knowing your selectors is important

[w3.org...] has a nice overview, just need to get rid of IE6 before we can use it all.