Div whose content can't be affected by CSS

Question

It may be a rather silly question, but I'm wondering... is there a way to make the content of a div completely immune to the CSS linked to the HTML?

I have something like this:

CSS

...
p{ background-color: pink; }
...

HTML

<html>
   <head>
      ...
      <link href="css/styles.css" rel="stylesheet" type="text/css"/>
   </head>
   <body>
      <p>Some text</p> <!--This should have pink background-->
      <div class="immunediv">
         <p>Some more text</p> <!--This shouldn't be blue-->
      </div>
   </body>
</html>

EDIT: That's just an example. What I want is ALL tags inside .immunediv to be immune to styles. Like...

<div class="immunediv">
   <h1>Hello</h1>
   <p>This is a <b>test</b></p>
   <a href="#">And this is a link</a>
</div>

Even if b, h1, p and a are styled in the CSS they shouldn't take that style since they're inside .immunedive and instead get the default one.

Did you mean "pink" in your second comment instead of "blue"? — Sumner Evans, Apr 30 '14 at 02:48
Generally !important breakes the Cascading, but you really need to know about every single way your immunediv can be messed up with. So, it's ain't generic. — user3455395, Apr 30 '14 at 02:48
You probably want to class pink .pink { background: pink; } and use
Hello
instead of using !importants and "immune divs" (that don't exist and is a huge hack) — turtlepick, Apr 30 '14 at 03:06
Are you after something like [this](http://jsfiddle.net/6UEUd/)..? — Josh Crozier, Apr 30 '14 at 03:09
Check this out, Josh: http://jsfiddle.net/aMW7g/ I want the "b" and the "p" don't be affected by the CSS. — McSullivan, Apr 30 '14 at 03:18
@McSullivanD'Ander You had an extra end bracket in there `}`.. http://jsfiddle.net/PMasf/ — Josh Crozier, Apr 30 '14 at 03:21
You can try to use an iFrame for that section. I know its not what you wanted the answer to be. But that would give you the same results. iFrame wont take styles from you current page. — SSS, Apr 30 '14 at 04:33
possible duplicate of [Update or Change or Remove/Reset Javascript event listener](http://stackoverflow.com/questions/26007354/update-or-change-or-remove-reset-javascript-event-listener) — , Jul 02 '15 at 14:44

score 3 · Accepted Answer · answered Apr 30 '14 at 04:05

3

:not(.immunediv) p { background-color: pink; }

answered Apr 30 '14 at 04:05

score 0 · Answer 2 · answered Apr 30 '14 at 04:15

0

try this

p {
    background-color: pink;
    color:red;
}
b {
    background-color: blue;   
}
.immunediv * {
    color:inherit;
    background:transparent;
}

and html

<p>Some text</p>
<b>Hahahaha</b>
<div class="immunediv">
    <p><b>Some</b> more text</p>
</div>

you added a bracket extra in JSFiddle

answered Apr 30 '14 at 04:15

Vikas Rana

1,961
2
32
49

That's not what I'm trying to achieve. I'm trying something more... universal. Not just specifically for and
. Thanks for answering, though, and sorry for the extra bracket :P
– McSullivan Apr 30 '14 at 04:58

score 0 · Answer 3 · edited May 23 '17 at 11:43

By adapting the solution from this answer, you can reset the style for an element and all its descendants.

.immune, .immune * {
    animation : none !important;
    animation-delay : 0 !important;
    animation-direction : normal !important;
    animation-duration : 0 !important;
    animation-fill-mode : none !important;
    animation-iteration-count : 1 !important;
    animation-name : none !important;
    animation-play-state : running !important;
    animation-timing-function : ease !important;
    backface-visibility : visible !important;
    background : 0 !important;
    background-attachment : scroll !important;
    background-clip : border-box !important;
    background-color : transparent !important;
    background-image : none !important;
    background-origin : padding-box !important;
    background-position : 0 0 !important;
    background-position-x : 0 !important;
    background-position-y : 0 !important;
    background-repeat : repeat !important;
    background-size : auto auto !important;
    border : 0 !important;
    border-style : none !important;
    border-width : medium !important;
    border-color : inherit !important;
    border-bottom : 0 !important;
    border-bottom-color : inherit !important;
    border-bottom-left-radius : 0 !important;
    border-bottom-right-radius : 0 !important;
    border-bottom-style : none !important;
    border-bottom-width : medium !important;
    border-collapse : separate !important;
    border-image : none !important;
    border-left : 0 !important;
    border-left-color : inherit !important;
    border-left-style : none !important;
    border-left-width : medium !important;
    border-radius : 0 !important;
    border-right : 0 !important;
    border-right-color : inherit !important;
    border-right-style : none !important;
    border-right-width : medium !important;
    border-spacing : 0 !important;
    border-top : 0 !important;
    border-top-color : inherit !important;
    border-top-left-radius : 0 !important;
    border-top-right-radius : 0 !important;
    border-top-style : none !important;
    border-top-width : medium !important;
    bottom : auto !important;
    box-shadow : none !important;
    box-sizing : content-box !important;
    caption-side : top !important;
    clear : none !important;
    clip : auto !important;
    color : inherit !important;
    columns : auto !important;
    column-count : auto !important;
    column-fill : balance !important;
    column-gap : normal !important;
    column-rule : medium none currentColor !important;
    column-rule-color : currentColor !important;
    column-rule-style : none !important;
    column-rule-width : none !important;
    column-span : 1 !important;
    column-width : auto !important;
    content : normal !important;
    counter-increment : none !important;
    counter-reset : none !important;
    cursor : auto !important;
    direction : ltr !important;
    display : inline !important;
    empty-cells : show !important;
    float : none !important;
    font : normal !important;
    font-family : inherit !important;
    font-size : medium !important;
    font-style : normal !important;
    font-variant : normal !important;
    font-weight : normal !important;
    height : auto !important;
    hyphens : none !important;
    left : auto !important;
    letter-spacing : normal !important;
    line-height : normal !important;
    list-style : none !important;
    list-style-image : none !important;
    list-style-position : outside !important;
    list-style-type : disc !important;
    margin : 0 !important;
    margin-bottom : 0 !important;
    margin-left : 0 !important;
    margin-right : 0 !important;
    margin-top : 0 !important;
    max-height : none !important;
    max-width : none !important;
    min-height : 0 !important;
    min-width : 0 !important;
    opacity : 1 !important;
    orphans : 0 !important;
    outline : 0 !important;
    outline-color : invert !important;
    outline-style : none !important;
    outline-width : medium !important;
    overflow : visible !important;
    overflow-x : visible !important;
    overflow-y : visible !important;
    padding : 0 !important;
    padding-bottom : 0 !important;
    padding-left : 0 !important;
    padding-right : 0 !important;
    padding-top : 0 !important;
    page-break-after : auto !important;
    page-break-before : auto !important;
    page-break-inside : auto !important;
    perspective : none !important;
    perspective-origin : 50% 50% !important;
    position : static !important;
    /* May need to alter quotes for different locales (e.g fr) */
    quotes : '\201C' '\201D' '\2018' '\2019' !important;
    right : auto !important;
    tab-size : 8 !important;
    table-layout : auto !important;
    text-align : inherit !important;
    text-align-last : auto !important;
    text-decoration : none !important;
    text-decoration-color : inherit !important;
    text-decoration-line : none !important;
    text-decoration-style : solid !important;
    text-indent : 0 !important;
    text-shadow : none !important;
    text-transform : none !important;
    top : auto !important;
    transform : none !important;
    transform-style : flat !important;
    transition : none !important;
    transition-delay : 0s !important;
    transition-duration : 0s !important;
    transition-property : none !important;
    transition-timing-function : ease !important;
    unicode-bidi : normal !important;
    vertical-align : baseline !important;
    visibility : visible !important;
    white-space : normal !important;
    widows : 0 !important;
    width : auto !important;
    word-spacing : normal !important;
    z-index : auto !important;
}

Note 1: Buttons and form controls will lose browser-specific styling

Note 2: In some cases, it will not work. Even though adding !important to a rule gives it a higher priority, another rule (in the original css) might have an even higher priority (for example: another rule with !important)

In that case, you will need to create a specific override

  /* original css */
  #header { 
     border: 1px solid black !important;
  }

  /* css reset (from above) */
  .immune, .immune * {
     border: none !important;
  }

  /* override */
  #header.immune, .immune #header {
     border: none !important;
  }

Div whose content can't be affected by CSS

3 Answers3