When targeting a Picture element in CSS, should we use img or picture selector?

Question

So the new Picture element looks like this:

<picture>
  <source ... />
  <img browsers will fall back to this width="10" height="10" />
</picture>

In our CSS, we want to set say a background color.

picture {background-color: red};
img {background-color: yellow};

Will a Picture enabled browser just show a red background, while non enabled browsers show a yellow background? Or a combination of the two. Likewise, will an Picture enabled browser see the height/width attributes on the img element, or is the img element ignored completly?

Answer 1

The idea of the picture element is that that it simply provides source information for its enclosed img element, and that it is always the img element that is rendered, not the picture element.

However, I can't see anything normative in the spec that suggests that the picture element will be treated by default as anything other than an inline element, so I expect that you will be able to style it with a different display setting, give it padding etc., in the same way as you can do with span elements, in which case, the background-color will behave in the same way as a span element around an img element does today.

So targeting both might be appropriate. The backgrounds will simply layer as normal. But the img will be rendered, so in your scenario, the background behind the image will be yellow, assuming of course that the img has at least some degree of transparency.