set image properties based on id in css file

Issue

I have the following html structure:

<div id="bookshelf">
        <img src="images/bookshelf.png" id="background_img" />
        <img src="images/book-cover-people.png"/>
        <img src="images/sports_cover.png" />
        <img src="images/travels_book_cover.png" />
        <img src="images/photoalbum_cover.png"/>
    </div>

and i want to set css properties differently for each image. how can i specify in the css file that for one image i want certain properties and for another image i want others.

currently what i am doing is:

#bookshelf img {
    width: 90%;
    height: 90%;
    background-size: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

but this is changing the properties of every image inside the bookshelf div, not specific images.

Solution

The best way would be to use an id attribute on each image, unique to each img element.

Take:

<div id="bookshelf">
    <img src="images/bookshelf.png" id="background_img" id="one" />
    <img src="images/book-cover-people.png" id="two"/>
    <img src="images/sports_cover.png" id="three" />
    <img src="images/travels_book_cover.png" id="four" />
    <img src="images/photoalbum_cover.png" id="five"/>
</div>

now you can use the following selector to set properties that are common to all the images:

#bookshelf img {}

and the following selectors for styles applicable to individual images:

#one { }
#two { }
#three { }
#four { }
#five { }

Answered By – michaelward82

Answer Checked By – Marie Seifert (AngularFixing Admin)

Leave a Reply

Your email address will not be published.