1

My question is very simple and i just need to know if this is possible or not.

this is a simple version of my HTML & css codes

HTML:

<div class="parent">
    <div class="ch1">CHILD 1</div>
    <div class="ch2">CHILD 2</div>
</div>

CSS :

.parent {background-color:red}

I want to know if it is possible to prevent "CHILD1 div from inheriting the background-color property from its parent element

P.S. I don't mean overriding that property but preventing the inheritance like it never had a background-color propert.

Thank you

Nidhal Rouissi
  • 325
  • 2
  • 6
  • 17
  • 3
    In this case it's not inheriting, but because you don't have a `background-color` set on the child divs, you'll see the red background. – Nick R Nov 26 '13 at 13:46
  • The child doesn't actually inherit `background-color`. The child's background is transparent. You're seeing a red background because it's sitting on top of something red, but that means nothing to the child; if you position it so it's outside of its parent, it won't have a red background. – Spudley Nov 26 '13 at 13:50
  • my problem is that i need that child element to be transparent, and show what is already beyond the div parent. But in my case the .parent div already has a bg color... – Nidhal Rouissi Nov 26 '13 at 13:54
  • 1
    I don't think you understand the concept of backgrounds... – BoltClock Nov 26 '13 at 13:55
  • So in short `"My question is very simple and i just need to know if this is possible or not."` .. The answer is no, it is not possible. – Nick R Nov 26 '13 at 13:56

3 Answers3

2

https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

background-color is not inherited, the default value is transparent。 so the background-color of the parent will be seen as if it is set for the child.

Initial value: transparent Applies to ： all elements Inherited ： no

qiu-deqing
  • 1,323
  • 7
  • 13
2

The child doesn't actually inherit background-color. The child's background is transparent. You're seeing a red background because it's sitting on top of something red, but that means nothing to the child; if you position it so it's outside of its parent, it won't have a red background.

What it sounds like you're actually asking for is for the child element to cut a hole in the parent's background so that the element behind it shows through. Is that right?

If that's what you're after, then no, you can't do this.

The closest you can get to it is the clip CSS property.

You would define clip on the parent's CSS as a rectangle which covers the same space as the child element. (of course, you'd have to know in advance the dimensions of the child to be able to do this)

This would be a way to achieve what you're after, but clip does have some major limitations, not least of which is that it only works if the element is position:absolute or position:fixed.

You can read more about clip here: http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/

Another alternative might be to use SVG instead of HTML for this. It's easier to achieve this kind of effect using SVG, since it is a proper graphics language.

Spudley
  • 166,037
  • 39
  • 233
  • 307
1

I wrote you a haiku.

This can not be done.

To attempt it would be wrong.

Kids would weep and cry.

In your example, simply override the background color (which as mentioned, is not inherited but transparent). Or rearrange your HTML. I don't understand the reticence. If this is making part of your code difficult, post the entire problem and we will help you with it.

Here Is another answer with a little bit more information.

Alternative

If you are concerned about the maintainability of your code base, especially with a large number of colors and styles. You might look into LESS or SASS as a way to overcome the inherit limitations of CSS. Both of these frameworks offer features such as nested operators and variables.

Community
  • 1
  • 1
Dan Grahn
  • 9,044
  • 4
  • 37
  • 74