CSS reference an ID that is inside a container?

Question

I want to reference one of the images in my container by id 'reg' without changing the properties of the others, how would I do that?

<div class="two_third lastcolumn">
    <div class="container clients">                   
        <div class="one_sixth"><a href="userProfile.php"><img src="../../images/reg.png" alt="" id="reg"/></a></div>
        <div class="one_sixth"><a href="../../community/feedback.php"><img src="../../images/feedback.png" alt=""/></a></div>
        <div class="one_sixth"><a href="../../resources/donation.php"><img src="../../images/donate.png" alt=""/></a></div>
        <div class="one_sixth"><a href="userProfile.php"><img src="../../images/oneyear.png" alt=""/></a></div>
    </div>
</div>

My guess would be something like

.clients img #reg {
    ...
}

`img #reg` is looking for an element with the id `#reg` that is a child of an `img` element - which of course is impossible. Just do `#reg`. Only one element on the page can have that Id, so you don't need to preface it with other selectors — crush, Dec 09 '15 at 02:35
`.clients img#reg`, `.clients #reg` or `#reg` is fine. Noted these CSS selectors has different meanings, but they work the same. — Raptor, Dec 09 '15 at 02:35

score 0 · Answer 1 · edited May 23 '17 at 11:52

You actually don't need to use all those selectors.

index.html

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <div>
            <div class="clients">                   
                <div><a href="#"><img src="a.png.png" id="small" alt=""/></a></div>
                <div><a href="#"><img src="b.png.png" alt=""/></a></div>
            </div>
        </div>
    </body>
</html>

styles.css

img {
    width: 200;
    height: 200;
}
#small {
    width: 150;
    height: 150;
}

If you need to specify further, instead of assigning the class "clients" to the div, apply it to each img like this, with no spaces. Reference: How to combine class and ID in CSS selector?

index.html

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <div>
            <div><a href="#"><img src="a.png.png" alt=""/></a></div> 
            <div class="clients">                   
                <div><a href="#"><img src="a.png.png" class="clients" id="small" alt=""/></a></div>
                <div><a href="#"><img src="b.png.png" class="clients" alt=""/></a></div>
            </div>
        </div>
    </body>
</html>

styles.css

img {
    width: 100;
    height: 100;
}
img.clients {
    width: 200;
    height: 200;
}
img.clients#small {
    width: 150;
    height: 150;
}

OP might need them for other styling purposes – henry Dec 09 '15 at 06:27 — henry, Dec 09 '15 at 06:27

CSS reference an ID that is inside a container?

1 Answers1