ansaurus

Question

HTML within a div takes parent HTML's CSS

Answer 1

A:

You could use the > child selector.

body>a {
  color: red;
}

This will only style links that are direct children of the body. Bear in mind, IE doesn't support this.

And may I suggest use proper syntax

<html>
    <head>
        <style type="text/css">
            body>a {color: red}
        </style>
    </head>
    <body>
        <div>
           <a href="#">Test Link</a>
        </div>
    </body>
</html>

tilman 2010-09-23 06:21:40

It's called css as in _cascading_ style sheet. That means, that a parent's style definition _cascades_ down to its descendants. So your 'problem' is actually the way css is meant to work. Also, read a css tutorial or 10. http://www.w3schools.com/css/default.asp

tilman 2010-09-23 06:27:10

Answer 2

A:

You aren't allowed to use the HTML tag like that. It doesn't restart CSS properties.

If you don't want all a tags to be green, don't use CSS to say you do!

Rich Bradshaw 2010-09-23 06:22:22

Answer 3

A:

Man, you code is terrible and invalid :) To have a clean, fresh CSS for the HTML inside div you may use iframe.

Drakmail 2010-09-23 06:22:31

Bit overkill don't you think?

alex 2010-09-23 06:24:44

Bit harder way is use "class" tag in every element. E.g. <a class="outside">1</a> and <a class="inside">2</a>.

Drakmail 2010-09-23 06:29:39

Answer 4

+2 A:

Your HTML is disgusting, use an iframe instead.

page1.html

<html>
    <head>
        <style type="text/css">
            a {color: red}
        </style>
    </head>
    <body>
        <div>
            <iframe src="page2.html"></iframe>
        </div>
    </body>
</html>

page2.html

<html>
    <body>
        <a href="#">Test Link</a>
    </body>
</html>

Unrelated, I'm so sorry, but you're colourblind.

Andrew Dunn 2010-09-23 06:25:44

Haha, sh*t! You're right.. Didn't even realize he said green instead of red. Not sure if troll ;)

tilman 2010-09-23 06:30:58

Its just that I get to modify only div's content. It actually is not "my html" :) Thanks for the idea. iFrames work!!

Kryptic Coder 2010-09-23 06:35:06

So sorry about the color confusion . . thanks for solving my problem!

Kryptic Coder 2010-09-23 06:36:24

@Andrew Dunn, using iFrame's is even more disgusting...

Jordy 2010-09-23 06:53:41

Than invalid HTML? I think not! Like all things, iframes have their uses, in particular displaying content from another web page, which is exactly what user443161 is trying to do.

Andrew Dunn 2010-09-23 07:07:57

Answer 5

A:

Use a localised reset.

Grab a CSS reset, e.g. Eric Meyer's Reset Reloaded and change it to apply to your div.

So, in front of every element, put your div's id or something there. Feel free to trim the huge list of selectors to what you use. If this div is being included into other people's pages, you may want to faux namespace it (and children with id or class) like my-element-container. This will ensure no naming clashes. You can use CSS namespacing when it is widely supported (a while off still...)

Then you can play with CSS inside.

Also, validate your HTML. Look at the errors, and fix them. Don't rely on your browser's error handling of markup, as it just makes things a pain to debug.

alex 2010-09-23 06:26:23

ansaurus

tags:

views:

answers:

HTML within a div takes parent HTML's CSS

related questions