I'd love to have a :loaded pseudo selector in css, which makes it possible to style elements when they are actually loaded – like images, iframes or the entire document

loaded.css

img {
  opacity: 0;
  -webkit-transition: opacity .2s;
  -moz-transition: opacity .2s;
  -o-transition: opacity .2s;
  transition: opacity .2s;
}

img:loaded {
  opacity: 1;
}

Fading them in was just one example. There are loads of cool things you could do with this IMHO.

transform: scale immediately comes to mind. But I wonder if this could be implemented in a way that allows for modifying the parent's properties too. For now it's limited to only the tag itself.

Coolest thing would be to have this for all dynamically loaded contents. But maybe it's just too fancy for css and should be done with js anyway.

body:loaded div#someId {
content: 'something heavy I loaded in after the important stuff'
}
Of course javascript can do that but there is a trend of trying to get css to cover more ground, and it's a perfectly valid trend.

You can do this with keyframes, though I agree a dedicated pseudo selector would be nice.

@keyframes fade_in {
    from { opacity: 0; }
    to { opacity: 1; }
}

img {
    animation: fade_in 0.2s linear;
    opacity: 1;
}

(Yes, I am aware this is a decade-old post.)

I would love that to be possible as well. I have a carousel for whose elements I set a background so that something is visible while images, videos and iframes haven't loaded yet. I would like to remove that background after each element has loaded.

@lthoerner does the animation only trigger once the element has loaded?

We're getting closer 😂

img {
  transition: opacity 0.25s linear;
  @starting-style {
    opacity: 0;
  }
}

Unfortunately, this only seems to affect the appearance of the element on the page and not the actual loading process of the image, but it does work if the image is loading quickly or is already loaded.