targeting specific selectors

camner

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?

Hikin' Mike

To change the color only on the lightbox, I'm seeing this on my site: .sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption {}

The only ID that never changes is the widgets. As an example: .sm-page-widget-16756204

Hikin' Mike

To add, if you need help, please post your site.

camner

Thanks, Mike, for your quick, reply. Changing the color was just an example. I'm actually wanting to do much more than that.

The purpose of my question was to see if I get more info to help me learn how to figure out the CSS myself instead of just getting a solution to a very specific task. (That way, I don't have to bug kind people like you all the time!)

What is the purpose of the {} at the end of your CSS?

Here's a screenshot of a Lightbox page showing the Inspector in FireFox. I've highlighted what appears to me to be the caption div.
. It's based on what I see here that I thought that this might work:

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

What I am trying to accomplish is several things:
1. Have the caption, if present, be OPEN by default and closed via hovering over the arrow, the reverse of Smugmug's default
2. Have the caption, if present, open ENTIRELY, and not just show a portion of the caption

Hikin' Mike

@camner said:
What is the purpose of the {} at the end of your CSS?

Laziness. I didn't add any code between the brackets. In your example, this will change the color of the caption text on the Lightbox.

.sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption {
    color: purple;
    }

camner

Sorry. That should have been obvious … I was thinking perhaps {} was some CSS syntax I didn’t know.