Unexpected behaviour selecting <picture> element

[MelvinIdema]

Issue

The <picture> element is doing nothing, only providing context for the browser. So the expected behaviour should be that it's being treated as an img element. This is the case using the Descendant Selector. But as soon as a selector other than the Descendant Selector is introduced this is no longer the case and CSS won't select the picture anymore.

Examples

1. Descendant Selector
A <picture> with a <div> as parent and a Descendant Selector:
https://codepen.io/melvinidema/pen/WWpBjp

2. Selector other than Descendant
A <picture> with a <div> as parent and a selector other Descendant Selector:
https://codepen.io/melvinidema/pen/zXZdKw

Expected Behaviour

The expected behaviour would be to have CSS treating the <picture> as a whole as if it was an <img>. As the <picture> and the <source> are only providing context. This is already the case using the Descendant Selector [space] as seen in the first example.

[AmeliaBR]

For the purposes of CSS, a <picture> element acts the same as a <span>. It isn't the element that draws the image, and by default it doesn't have any styles, but you can style it if you want.

If display: contents had existed when the picture element was added, a picture might have been defined to use that rule, creating a container that isn't drawn at all, just passing through its child contents. But, even if a <picture> had display: contents, and was therefore removed from the CSS layout rendering tree, your selector still would not work.

Selectors operate on the DOM tree, not on the rendering tree. The <img> element is not a direct child of the <div> in your DOM tree, it is a direct child of <picture>. Your <img> element is a descendent of your <div> in the DOM tree, so the descendent combinator works fine.

[MelvinIdema]

Thank you for the answer @AmeliaBR. That makes a lot of sense. Selectors operating on the DOM tree is a lot more logical than on the rendering tree.