targeting specific selectors

camnercamner Registered Users Posts: 109 Major grins

Temp for forum post to DrGrin

I want to target the photo caption in the Lightbox. Using Firefox “Inspector,” I can see that the CSS selector is “sm-tile-caption”.

I have read in forum posts that in order to maximize the likelihood that custom CSS will actually affect the desired element, it is preferable to create the custom CSS using as many (all) of the parent selectors as well.

So, instead of just

.sm-tile-caption {
    color: purple;
}

This would be preferable

.sm-tile-info .sm-tile-info-text .sm-tile-caption {
         color: purple;
}

But this doesn’t go all the way up the DOM tree to the top element, of course!

Aside from tediously reading the code in the Inspector and working one’s way up the tree, is there an easier way to determine what selectors to include in the custom CSS to increase the likelihood of successfully targeting the element I want to change the styling of?

Second question: On the particular page I am looking at, there are many IDs of the form “…yui…various numbers…” which are IDs that are unique to my site and perhaps to the particular image. Since I DON’T want to be that narrow in targeting the caption (I want to target ALL captions, not just the caption for a single image), can I just leave out these IDs and only use the “class” selectors?

Comments

Sign In or Register to comment.