How to stop a child div inheriting some of a parents divs attributes?

Question

I have created a div which has an image on it :

.middleBlockDiv{
    content:url("./images/blockhead.png");
    display: inline-block;
    background-color: rgba(70,130,180,1);
    float: left;
    z-index:2;
    opacity: 0.8;
    border: 4px solid white;
    border-radius: 30px 15px;
    clear:both;
}

and I have a child div :

.coinDiv{
    display: inline-block;
    background-color: gold;
    float: left;
    z-index:2;
    border: 4px solid white;
    border-radius: 50px;
    clear:both;
}

If i dont put an image into the parent div so the css of the parent div is like so :

.middleBlockDiv{
        display: inline-block;
        background-color: rgba(70,130,180,1);
        float: left;
        z-index:2;
        opacity: 0.8;
        border: 4px solid white;
        border-radius: 30px 15px;
        clear:both;
    }

The child div gets shown, however, if i keep the image in, the child div doesn't get shown. It's in the DOM but not shown onscreen.

I think it may be because of inheritance, as the child div may be inheriting the image.

How do I stop the child div inheriting the image from the parent ?

FIDDLE: http://jsfiddle.net/8xyk2ucb/

Can you add your HTML to the question, or better still a working http://jsfiddle.net. I would imagine that it's not a inheritance issue, but instead due to the `content:` you're adding. — Rory McCrossan, Jun 03 '15 at 15:38
Hope that this poste helps you. [posted by makville][1] [1]: http://stackoverflow.com/questions/5080365/css-to-prevent-child-element-from-inheriting-parent-styles — Abder KRIMA, Jun 03 '15 at 15:46
Why do you insert the image into the dom using the content attribute? Why don't you just use it as a background image? — HaukurHaf, Jun 03 '15 at 15:57
i didnt think you could do that, shall give it a go now thanks @HaukurHaf — thatOneGuy, Jun 03 '15 at 16:00
that worked perfectly, thanks @HaukurHaf. If you want to put it as an answer ill gladly accept it :) — thatOneGuy, Jun 03 '15 at 16:09

score 1 · Accepted Answer · answered Jun 03 '15 at 16:20

As the user @HaukurHaf mentioned to me to use background-image instead of content, that helped me solve my problem.

So my code looks like this :

.middleBlockDiv{
    background-image:url("./images/blockhead.png");
    display: inline-block;
    background-color: rgba(70,130,180,1);
    float: left;
    z-index:2;
    opacity: 0.8;
    border: 4px solid white;
    border-radius: 30px 15px;
    clear:both;
}

.coinDiv{
    display: inline-block;
    background-color: gold;
    float: left;
    z-index:2;
    border: 4px solid white;
    border-radius: 50px;
    clear:both;
}

Abder KRIMA · Answer 2 · 2015-06-03T15:54:08.070

-2

CSS rules are inherited by default - hence the "cascading" name. To get what you want you need to use !important:

example:

middleBlockDiv
{
  ....;
}
coinDiv
{
  // any rule you want here, followed by !important
}

edited Jun 03 '15 at 15:54

answered Jun 03 '15 at 15:47

Abder KRIMA

3,418
5
31
54

How to stop a child div inheriting some of a parents divs attributes?

2 Answers2