CODEWITHSUNDEEP
javascripthtmlcss
Eyal
Eyal

Reputation: 5848

How do I add a CSS class to an element from CSS (not jquery nor javascript)?

I want for all images on my webpage to have CSS class "fadeIn" so that when when they first appear, they will fade into view. (I'm using CSS animations to do the fadeIn. Later, I use jquery to add and remove the class.)

I'd normal make an img element and use myImg.addClass("fadeIn") but the element is made deep within the code of Google Maps and I don't have access to element. It's also uncertain when the img element will actually be created.

Something like this, in CSS:

img {
   height: 100;
   width: 50;
   AddClassToThisElement: "fadeIn"  ***
}

Is something like this possible?

Edit: The actual CSS that I had was:

  img[src^="da"] {
    -webkit-animation-name: fadeInFrames;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-timing-function: linear;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
  }

  .fadeOut {
    -webkit-animation-name: fadeOutFrames;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-timing-function: linear;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
  }

The former was more specific so adding class fadeOut to elements didn't work. By changing .fadeOut to img[src^="da"].fadeOut, the latter is now more specific and adding fadeOut to the element works.

Upvotes: 3

Views: 258

Answers (3)

ScottS
ScottS

Reputation: 72261

I agree with DragoonWraith, that if you really want "all images on my webpage" to have this fade effect, then you should be able to target them all more generically. However, if you need more specificity, find out the path. My answer is similar to Leslie Hanks (who posted just before my completing this), except as I understand it, you are not wanting initially to use jQuery, but a css transition. So if you need more specificity, find out the path:

#someGoogleMapId .someDeepContainerClass img {
   /* apply the css transitions */
}

Upvotes: 1

Leslie Hanks
Leslie Hanks

Reputation: 2377

If you are using jQuery to do the fade in, you might be able to come up with a selector that is unique to these images rather than using a basic $('.fadeIn') selector.

So if you are doing 

$('.fadeIn').fadeIn()

you might find that there is something in the DOM structure that is unique to those images like

$('#SomeMapId div#SomeContainerId IMG').fadeIn()

Without seeing your page I couldn't say if the DOM is unique enough to make this work.

Upvotes: 1

KRyan
KRyan

Reputation: 7598

CSS cannot do this, to the best of my knowledge.

My suggestion, then, is to use something like this:

img,
.fadeIn
{
    /* styling */
}

Now all images have the same styling as .fadeIn. Of course, you'll also have to add img, with any relevant (pseudo-)selectors/classes for each use of .fadeIn in your style sheet.

Upvotes: 2

Related Questions