How to Tell an HTML Element to Ignore Any Stylesheets

Is there a way to tell an html element to ignore any stylesheets?

there is no easy way to do what you are asking, one approach is to create a CSS class that resets all appropriate attributes for a specific element and its children to make it more complete, here is a good starting point Element specific CSS reset

Ignore styles for a particular element

You could use all but it's still not implemented in Edge.

.reset{
  all: unset;
}

Is it possible for HTML element to ignore CSS from one file?

Short answer is no. The best solution to this would be to rename your classes/ids so they all have unique names instead of having overlapping names in your css files. Also, if it's inheriting h1 styling from both you can try using .main_div h1 { ... } which will override the global h1 in both files.

CSS one class to ignore another

CSS doesn't support "ignoring", but part of its nature (the Cascading part of Cascading Style Sheets) supports "overwriting"; Newer CSS properties will overwrite older CSS properties of the same name, so you just need to give .ignore a different color value than your previous a selector's color value.

Exclude stylesheet

There is the all property, and the initial value to reset a property to the default settings of the browser. So if you wrap the part you want to be "excluded" from your styles into a tag to which you apply a class like the following (i.e. combined with the * selector), it should have the effect you want:

.unset * {
  all: initial;
}

And in the HTML:

<div>
    <p>Use classes defined in style.css</p>

    <div class="unset">
        <p>No access to style.css</p>
    </div>
</div>

But unfortunately, all does not yet work in IE/Edge, it's "under consideration": http://caniuse.com/#search=all

Still, if your stylesheet doesn't use too many different properties (and if you know them), you could list those, define all of them as initial and apply it, using a selector as shown above. Example:

.unset * {
  font-size: initial;
  color: initial;
  background: initial;
  text-decoration: initial;
  margin: initial;
  padding: initial;
}

How make an inside element ignore the style

Can you explain why you didn't put Userand Logout at the same level of Home and About like that:

<nav>
<ul class="menu">
    <li>
        <a href="#"><i class="icon-home"></i>HOME</a>
        <ul class="sub-menu">
            <li><a href="#">Sub-Menu 1</a></li>
            <li><a href="#">Sub-Menu 2</a></li>
            <li><a href="#">Sub-Menu 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#"><i class="icon-user"></i>ABOUT</a>
     </li>
     <li><a href="#">User</a></li>
     <li><a href="#">Logout</a></li>
 </ul>
</nav>

It should work !

EDIT

With the following modification of css, your menu should work.

.menu ul.sub-menu li a { ... }
.menu ul.sub-menu li a:hover, .menu ul.sub-menu li:hover > a { ... }
#login {padding: 0; text-transform: uppercase;}

codepen

How to ignore body element style when there is a class at element inside

There is no way to ignore rules in CSS, only to override them. Write a ruleset with:

• A selector that matches the div (such as .divable1)
• A rule that changes the color property so it has a value other than the default, which is inherit, such as color: black.

How do I tell a page to ignore internal CSS in favor of external CSS?

Encapsulate your internal CSS inside of another class*.
i.e. add a unique class to the container than holds all of your "main parts of the page" and then append that class to precede the selectors you write internal to the page

DEMO (example below)

a { color: green; } /* this style applies to all plain a tags */
.xyz a { color: red; } /* this style only applies to a tags within an xyz class */

<div class="nav">
  <a>I am a green link</a>
</div>
<div class="xyz">
  <a>This is a red link</a>
</div>

*as @isherwood mentions above, this would be leveraging specificity for your purposes

---

Related Topics