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;
}

Great idea. But I think some browsers already do the fade-in you describe, once their images load. I believe I have seen this happen in Chrome.

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?