Why doesn't border-color propagate to child elements?
I've got a site I'm building which has deeply nested divs, and uses user selectable themes. My question is... Why doesn't border-color propagate to child elements?
I am already dealing with the DOM stylesheets, so it will not be anything difficult to add a loop to update border colors. Yet I am curious why it is standard (Firefox & Chrome, in Linux) that border color doesn't inherit from the parent, and instead defaults to the text color, and still border-style won't default to solid?
Is there some wisdom behind this behaviour? I'm not trying to be cheaky. I am really curious why this seems to be "by design."
As I've been writing this I realize the simplest, and most flexible solution is to define my elements as class="classname border" and then update the border class to reflect the proper border color.
Still though, I don't understand the why?
Here's a simple bit of html that demonstrates the issue...
<html>
<head>
<style type="text/css">
.content{
color: red;
display: inline-block;
border-width: 2px;
border-style: solid;
border-color: yellow;
}
.nested{
color: green;
display: inline-block;
border-width: 2px;
border-style: solid;
margin: 3px;
}
</style>
</head>
<body>
<div class="content">
Content div. Red text, yellow border.<br>
<div class="nested">
Ignores parent border color. Defaults to text color.
</div>
</div>
</body>
</html>
I wouldn't ask this, except I'm fairly sure there are people here who actually commented on the rfc's, and have some background information that might shed some light on the 开发者_高级运维'why'.
Thanks.
Skip
There's no default value for border color.
You need to manually tell it to take its value from its parent with border-color: inherit;
This is an old question and i am shocked nobody has suggested this solution. You can achieve inherited border colors easily with CSS if you take the following steps:
1) In you css file create the following rule:
*{
border-color:inherit;
}
2) For any element that you wish to use the inherited border color first apply your border with no color specified, then inherit the parent border-color.
.myThing {
border:1px solid; /* this will inherit the parent color as the border-color */
border-color:inherit; /* this will inherit the parent's inherited border-color */
}
The css rule we crated in step one will take care of all the previous elements border-color:inherit. Then in step two we need to manually override the fact that any border specified without a color will inherit the parent color NOT border-color. So border-color MUST come after the border is set!
this behavior is specified in the w3 spec for CSS2: Border Color
If an element's border color is not specified with a border property, user agents must use the value of the element's 'color' property as the computed value for the border color.
Borders are not inherited by default. To change this behavior, use:
.nested {
border:inherit;
}
Here's the fiddle:
http://jsfiddle.net/x8mcu/
It's because you're specifying that a specific div (ie content) gets that particular pattern. You could change how you do it to specify the selector as just div or you could stack classes to make it happen (ie, class="content" for the first and class="content nested" for the second. That would give the second div the styles for both content and nested.
I wouldn't want it to. A border isn't something that usually recurses into child elements, or you'd have to deal with setting each child element to border:none or border-color:default. Things like font color and style make sense to recurse.
One important thing to note about inherit on border color - you specifically must NOT tell it to inherit, otherwise it will NOT inherit the color property of the element the border is applied to - in Andre's JSFiddle example, you'll see that the inner box border is yellow, but the text is green - remove the border-color: inherit, and then the border will turn green, inheriting the color property of the element.
This is on Firefox 5.0.1/Win, in case a different behavior is exhibited in other browsers.
I have the similar issue, and when i try to inherit the border color i'm inheriting a color property of parents instead.
Approach that save my day was:
.expanded-cell {
border-style: solid;
border-width: 3px;
}
.theme-border-color {
border-color: #f39c11;
}
加载中,请稍侯......
精彩评论