Clever Geek Handbook

How to refer to an image with a specific ID that is in a section with a specific ID - CSS

I have a website and I want to use @media

to make it responsive. I am thinking to use content:url("image.jpg")

to get the image with the required size, but I don't know how to put the image with id inside a section with a different id in CSS.

My html is like:

<section id="1">
    <img class="photo" id="1"/>
    <img class="photo" id="2"/>
    <img class="photo" id="3"/>
</section>
+3


source to share


2 answers


Why not give the image classes alphabetically. So you have a container with ID 1 with images of classes a, b, c, etc. Next container with ID 2 and classes a, b, c, d, etc. Then you can easily access any image:

#1 .a {
    //css code
}
#2 .d{
    //css code
}

and etc.

EDIT:

Multiple classes can be added to a class attribute, i.e.



<section id="1">
    <img class="photo 1" id="1"/>
    <img class="photo 2" id="2"/>
    <img class="photo 3" id="3"/>
</section>

and apply the CSS like so:

#1 .1 {
    //css code
}
#2 .2{
    //css code
}

Lloan Alas is right that you can only assign unique values ​​to IDs, so you will have to strip the id attribute on your images!

+1


source


You cannot duplicate identifiers. IDs must be unique.

You can target these images in a number of ways, but usage nth-child

is how I went instead of cluttering your CSS with multiple IDs.

For example:



section#1 > img:first-child { /* first image*/ }
section#1 > img:nth-child(2) { /* second child */ }
section#1 > img:last-child {/* last image */}

This should give you an idea of ​​how to target those images.

+1


source






More articles:


All Articles