CSS Cascade says
The inherited value of a property on an element is the computed value of the property on the element’s parent element. [...]
Note: Inheritance follows the document tree and is not intercepted by anonymous boxes
It says "parent element" and "document tree", but both CSS Selectors and CSS Pseudo-elements seem to override this for ::first-line:
During CSS inheritance, the portion of a child element that occurs on the first line only inherits properties applicable to the ::first-line pseudo-element from the ::first-line pseudo-element. For all other properties inheritance is from the non-pseudo-element parent of the first line pseudo element.
However, browsers do strange things (https://jsfiddle.net/0geoep6t/)
<div> <span>ABCDEFGHIJKLMNOPQRSTUVWXYZ</span> </div>
div {
color: blue;
background: yellow;
border: 10px solid blue;
}
div::first-line {
color: red; /* Applies and is inherited by default */
background: cyan; /* Applies and is not inherited by default */
border: 10px solid red; /* Does not apply to ::first-line */
}
span {
color: inherit; /* Firefox, Edge and Chrome inherit from ::first-line */
background: inherit; /* Firefox and Edge inherit from div, Chrome from ::first-line */
border: inherit; /* Firefox and Edge inherit from div, Chrome from ::first-line */
}
If I understand correctly, since background applies to ::first-line, background: inherit should inherit from the ::first-line, like Chrome does. And since border does not apply to ::first-line, border: inherit should inherit from the div, like Firefox and Edge do.
Am I right? Consider adding some note to the spec to clarify this.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3