Can we allow "pass-through" for a CSS style from a parent to its decendants?

Question

For example, if we need to set a div's font-size to 22px, is there a possible way to let the descendants of this div still inherit from the font-size from body? (or any inheritable style, thanks to @Sourabh for pointing out background is not inherited).

I think a key point is that so that we can change the style of body or some parent and let it pass through, even though there is an intermediate change of style. So preferably, we won't do it by:

body, #foo * { font-size: 16px }
#foo { font-size: 22px }

This is related to the case as described in How to solve flicker on iPad when event delegation is used? , where the -webkit-tap-highlight-color need to be set for a div, but the descendants of this div will be best to inherit what is above this div (the parent of this div).

I can use JavaScript to put the style of this div in a temporary variable, and then change the div's style, and then change the style for just the immediately children of this div to the value of that temporary variable, but then whatever that is set for the style of body won't get inherited by those children or their descendants.

Do the descendants actually have to be descendants? Do you have enough control of the structure to use another `
that sits "to the side" in the DOM hierarchy, but is positioned to be where it currently is? — jprofitt, Jun 23 '13 at 15:39
yes I think those have to be descendants -- that's how event delegation works: we bind the "click" handler on the `div`, and get the item clicked on by `ev.target`, instead of binding 1000 event handlers to 1000 elements (or any number N) — nonopolarity, Jun 23 '13 at 16:07

score 1 · Answer 1 · answered Jun 24 '13 at 04:35

No. In the DOM, a descendant element will inherit any inheritable CSS of the parent(s). You can 'reset' it back to match the parent item by declaring it again, but you can't do exactly what you are asking which is only changing the BODY style declaration.

Off the top of my head, the one solution I can think of would be not rely on pure inheritance from the body element but instead create a class and use it on all elements where you want to control aspects from one declaration. That still may be tricky due to CSS specificity, though.

score 0 · Answer 2 · answered Jun 23 '13 at 16:18

0

If I'm understanding your question correctly, you could use a > combinator like so:

Working Example

body, #foo { background: yellow }
#foo>* { background: blue }

or like so:

Working Example2

body {
    background: yellow;
}
#foo {
    background: blue;
}
#foo>* {
    background: yellow;
}

answered Jun 23 '13 at 16:18

apaul

16,092
8
47
82

no, the desired effect is that we don't have to specify the style for the children but just let the children (and their descendants) get that style from above `foo` – nonopolarity Jun 23 '13 at 16:37
@動靜能量 I doubt that you can do that in css alone see: http://stackoverflow.com/questions/277256/cancel-a-css-declaration – apaul Jun 23 '13 at 16:59

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

0

W3C background-color Stats

Initial: transparent

Inherited: no

All elements are transparent regardless of their parent's background-color. But that color is transparent so parent's color is visible on the child. So basically, if you want them to inherit color, you can't (not with CSS at least) (there might be a trick that I am not aware of). You have to specify the color for every element if you don't want it to be transparent.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 23 '13 at 17:01

Sourabh

8,243
10
52
98

oh so maybe I made a bad example, I will correct this in my question to say `font-size` instead – nonopolarity Jun 23 '13 at 17:30

score 0 · Answer 4 · answered Jun 24 '13 at 05:24

The answer is not quite.

You can reset a property to its initial values by using the initial css keyword, which is particularly useful for these user-agent set styles (like -webkit-tap-highlight-color)

See this jsFiddle.

Note however that this isn't the value that would be set by default if the parent didn't exist, but literally the browser's default setting. In particular, body level formatting is not taken into account.

I've also included the default keyword, which is effectively the same as not including any font-size specifier at all - it goes up the cascade chain to find one that has a font-size specified, in this case on the element-name selector.

Can we allow "pass-through" for a CSS style from a parent to its decendants?

4 Answers4