How to ignore the CSS style from the parent box?

Question

I'm trying to put some code of a complete Html page where I've setted inside of a frame. I feel obligated to use put all of this content in a box because the innet text has its own page and its own style.

I'm looking for the way to not to inherit the style from the LayoutPage. I can't reference the page because I need to use the Razor to set some values through the model.

What can I do to override all the styles inside of the frame?

@model Contoso.Core.Exercises.TimesTables.Exercise1

<frame>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Generated by WebWorksheet version 3.5.1 on 31/05/2013 www.webworksheet.com -->
<html><head><meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Times Tables</title>
<script type='text/javascript'>
   var wwsRelease = 'http://webworksheet.com/release/030501';
   var iterations = 3;
   var imageFolder = 'wwsImages';
   var displayZeroes = true;
   var dbConnection = '';
   var dbQueryScript = '';
   var firstInput = 'iB54';
   var datePickerAuto = '';
   var datePickerImg = '';
   var activeBorder = '2px solid black';
   var activeBackground = 'transparent';
   var lastBtnClick = '';
   var protectPage = false;
   var webQueries = new Array();
</script>
<script type='text/javascript' src='http://webworksheet.com/release/030501/webworksheet.js'></script>

<style type='text/css'>
@@media all {
 Body {overflow:auto;}
 A {text-decoration:none; cursor:pointer; color:inherit;}

http://stackoverflow.com/questions/946645/how-to-ignore-parent-css-style — , Jul 03 '13 at 03:57
But I have a super large CSS Style in the parent.. I should have to override many attributes :/ — Darf Zon, Jul 03 '13 at 03:59

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

2

Give different styles for the child element for the same css property. Like

.parent {

     background-color: green;

}

.parent .child{

     background-color: red;

}

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 18 '13 at 10:54

Jazmin

616
1
7
21

score 0 · Answer 2 · answered Jul 03 '13 at 03:59

0

You can use !important; keyword.for example:

text-decoration:none!important;

answered Jul 03 '13 at 03:59

But I'm talking about several CSS and many attributes in it. There's no way to ignore all the style from the parent? – Darf Zon Jul 03 '13 at 04:00
http://stackoverflow.com/questions/8002997/override-css-style-of-parent-element-without-affecting-other-elements – Jul 03 '13 at 04:03

score 0 · Answer 3 · answered Jul 03 '13 at 06:59

If you are using class to give css to that particular tag then you can simply set class name as blank or another class whatever you want to use:

document.getElementById("tagid").className = "";

OR

document.getElementById("tagid").className = "class2";

And If you are able to use JQuery then it is very simple to remove parent class like this:

<script>$("tagid").removeClass("oldclass");</script>

for more details for JQuery click here.

score 0 · Answer 4 · answered Sep 26 '14 at 23:57

For me, I couldn't get the class .userLink to be recognized. Then I realized it was under a DIV with id=#nav3, which in the CSS already had a style defined for #div3 a. From Jazmin's answer above, I tried this and it got the class to work again.

#nav3 .userLink 
{
    font-size: 0.8em;
    color: blue;
}

How to ignore the CSS style from the parent box?

4 Answers4