How to remove style css of div inside the another div?

Question

I have a little problem with css.

I have one with css, which is generated by code inside another . I can't change the css file.

And I need remove this style. Is it possible somehow?

<div class="1">

   #Generated by code
   <div class="2" style="xxxxxxxx">
      This text is bold now. Cause of the style. I need normal!
   </div>
   #Generated by code

</div>

Is there something I can do??

Thank you :)

Can you add custom styles either internally or externally? If so, you can always over-qualify inline style rules by declaring the `!important` declaration ad the end of your rule; e.g; `.1 .2 {font-weight: normal !important;}` — UncaughtTypeError, Jun 02 '16 at 09:41

score 0 · Answer 1 · answered Jun 02 '16 at 09:36

Why not use javascript ?

<body onload="myFunction()">

    <div class="1">

       #Generated by code
       <div class="2" style="xxxxxxxx">
          This text is bold now. Cause of the style. I need normal!
       </div>
       #Generated by code

    </div>

    <script>

function MyFunction 
{
   document.getElementsByClassName("2").style.blabla;
}

    </script>

Or even use

<style>
.2
{
width:50px;
}
</style>

?

score 0 · Answer 2 · edited May 23 '17 at 10:29

0

You can use !important for this:

<div class="_1">
    #Generated by code
    <div class="_2" style="font-weight: normal !important;">
        This text is bold now. Cause of the style. I need normal!
    </div>
    #Generated by code
</div>

or you can create a new CSS file include it to your template. In your CSS you put something like:

._1 > ._2 {
    font-weight: normal !important;
}

Note that identifiers can't start with numbers, so you have to put a letter or underscore to it, something like _1 in CSS would it be ._1 { }. Read about it on this post: Allowed characters for CSS identifiers

According to the comment from @Error404 below: !important exception is not necesary on inline styles. As MDN says, Inline styles added to an element (e.g., style="font-weight:bold") always overwrite any styles in external stylesheets and thus can be thought of as having the highest specificity.

Read more: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception. There is also an answer from @Error404 with more details about this (Below or on top of this answer)

See working fiddle: https://jsfiddle.net/o24jww1b/1/

edited May 23 '17 at 10:29

Community

1
1

answered Jun 02 '16 at 09:37

node_modules

4,790
6
21
37

I can not change the second div. I can only change the first one. – user3509584 Jun 02 '16 at 09:43
`!important exception` is not necesary on inline styles. As [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#Selector_Types) says, _Inline styles added to an element (e.g., style="font-weight:bold") always overwrite any styles in external stylesheets and thus can be thought of as having the highest specificity._ – Francisco Romero Jun 02 '16 at 09:50
Thanks, I have attached your comment in my answer @Error404 :-) – node_modules Jun 02 '16 at 09:51
@C0dekid You are welcome :) but I think you should also add the link to the MDN specification to better clarification. – Francisco Romero Jun 02 '16 at 09:52
1

So, now i've made a reference to your anser, because it contains extended information about this all :-) @Error404 – node_modules Jun 02 '16 at 09:56

Francisco Romero · Answer 3 · 2016-06-02T09:47:12.273

You can create another file of CSS and try to put a higher specificity to the styles applied to your div. If you set an ID to your div and apply your styles from your new CSS stylesheet, it has the highest specificity.

Try to avoid the !important exception if you can achieve it setting a higher specificity to your new CSS styles for that div. Using !important exception is considered a bad practice as they put in the webpage:

Using !important is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets.

The problem is that inline styles override all the styles of external stylesheets so you maybe will have to use !important exception here.

Inline styles added to an element (e.g., style="font-weight:bold") always overwrite any styles in external stylesheets and thus can be thought of as having the highest specificity.

score 0 · Answer 4 · answered Jun 02 '16 at 09:46

Using JavaScript as mentioned before is a good way of achieving your desired behaviour. But according to MDN

document.getElementsByClassName()

returns an array like structure. So the correct syntax will be

document.getElementsByClassName('2')[0].style.fontWeight = 'normal';

or to completely remove the style property use

document.getElementsByClassName('2')[0].removeAttribute('style');

score 0 · Answer 5 · answered Jun 02 '16 at 10:06

0

you can do this with jquery use this

<script>
$(document).ready(function(){
        $("._2").css("font-size", "normal");
});
</script>

answered Jun 02 '16 at 10:06

Sabby

403
3
15

How to remove style css of div inside the another div?

5 Answers5