Description
TL;DR - see proposal
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.