2

I have an unordered list and each of the item in the ul has a div with it. This div loads a html page using jQuery. The style I've given for the ul is getting applied for the whole html which loads in the div. How to prevent that from happening . I want the style for the div to be applied only to itself and not to any of the descendants.

I can try to add specific styles to the descendants but there are too many tags inside. 

<ul class="expr">
<li><a class="textlink trig" href ="javascript:void">Using the z-index property of CSS</a>
<div class="holder"></div></li>
<li><a class="textlink" href ="javascript:void">Swapping Images on Mouse Hover</a></li>
</ul>

Css: 

    ul.expr
{
    font-size: 125%;
    font-weight: bold;
    list-style: none;
    margin: 0.5em 0;
    padding: 100px 20px;
    color: #1e1a19;

}

HTML after page load:

<ul class="expr">
<li>
<a class="textlink trig" href="javascript:void">Using the z-index property of CSS</a>
<div class="holder" style="display: block;">
  <title> Image Hover Swap experiment </title>
  <h4> Experiment 2. Swapping Images on Mouse Hover </h4>
Lot of text
<br>
More Text
<br>
Extra Text
</div>
</li>

Here ul has the styles from the "expr" class. The div "holder" loads dynamic content. I dont want any of the "expr"s styles to be added to the div inside. But i want them to be applied to the the other "li" list items and subsequently not the divs inside other list items too.

Pradep
  • 1,874
  • 5
  • 21
  • 31

3 Answers3

2

You can reset inheritable properties for all descendant elements in inner div's. For example:

.expr div * {
  font-family: Arial, Verdana, sans-serif;
}

* is a CSS selector which applies to any element.

Anyway, if you want to nest a whole page inside the div, maybe you will be interested in iframe HTML element:

http://www.w3schools.com/tags/tag_iframe.asp

Look at this topic about how to apply CSS to iframe content:

How to apply CSS to iframe?

Community
  • 1
  • 1
Waiting for Dev...
  • 12,629
  • 5
  • 47
  • 57
  • There are a couple of h4 tags and a div tag inside the dynamic div tag. I want to preserve the h4's font size and all other original properties. So do i have to make a definition for all the tags present inside my div tag separately like this ? I wil edit my post with css and the content of the div tag after load for more clarity. – Pradep Feb 03 '12 at 09:35
  • 1
    `*` selector applies to any element. If you want to leave out some element, you can use `:not` selector (but in CSS this doesn't work for IE8 or lower), like in `.expr div *:not(h4)` – Waiting for Dev... Feb 03 '12 at 09:40
  • Please, look at the `iframe` suggestion I updated in the answer. – Waiting for Dev... Feb 03 '12 at 09:45
  • Isnt there a way to clear these child elements of all the styles from the ul parent instead of giving them new styles like you've mentioned ? – Pradep Feb 03 '12 at 09:45
  • I am doing this as an experiment for school, so i want to do it with jQuery. Not planning to use iFrames. – Pradep Feb 03 '12 at 09:48
  • If you use `iframe` (use it only if you are nesting a whole page) all styles will be cleared. If you don't use `iframe` you must override inherited styles (no way to clear them). – Waiting for Dev... Feb 03 '12 at 09:49
  • I tried ' ul.expr div * { font-size: 100%; font-weight:normal; }' It changed the style of only the first tag inside the div . That is (h4) . The other text down the div still have the styles. – Pradep Feb 03 '12 at 09:55
  • Surely there is some more specific rule applying to them. Use a tool like firebug to know. Anyway, surely what you need is to insert dynamically with jQuery an `iframe`... – Waiting for Dev... Feb 03 '12 at 09:59
0

Narrow down the scope of the style:

li.somestyle { ... }

and then

<li class="somestile">
Alessandro Santini
  • 1,943
  • 13
  • 17
0

you should load the html to an iframe. In that way loaded html wont affected.

Yorgo
  • 2,668
  • 1
  • 16
  • 24