patterncssMinor

CSS selector for image captions

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

selectorimagecaptionscssfor

Problem

I have this CSS selector:

.img + *{
}

Which, from my understanding, will make the browser look for all the elements and then select only those which follow an element with the class img. Is there a better way of writing this selection to improve performance?

Relevant HTML structure:


    
        
    
    content is here

Solution

My recommendation would be to not worry about the performance (see: http://www.kendoui.com/blogs/teamblog/posts/12-09-28/css_tip_star_selector_not_that_bad.aspx for actual tests).

If you're still not convinced that it's not as bad as everyone makes it out to be, then your only real option is to modify the contents of ``.


    
        
    
    content is here

Which allows your CSS to be:

.img + #foo { ... }

Or just

#foo { ... }

Code Snippets

<div class="media">
    <div class="img">
        <img src="an-image.jpg">
    </div>
    <random-element><div id="foo">content is here</div></random-element>
</div>

.img + #foo { ... }

#foo { ... }

Context

StackExchange Code Review Q#36026, answer score: 2

Revisions (0)

No revisions yet.