CODEWITHSUNDEEP
htmlcss
Warg
Warg

Reputation: 77

CSS- Targeting multiple images inside a div

I'm attempting to add individual borders to each image inside of a div. Currently I have a border around the entire section that holds the photos, but I'm trying to get the actual image itself.

Below is an example of the html

<div id="options">
 <img id="rock" src="rock.jpg" name="rock" width="265" height="250" />

 <img id="paper" src="paper.jpg" name="paper" width="265" height="250" />
 <img id="scissors" src="scissors.jpg" name="scissors" width="265" height="250" />
 <img id="lizard" src="lizard.jpg" name="lizard" width="265" height="250" />
 <img id="spock" src="spock.jpg" alt="spock" width="265" height="250" />

<div id="compPick">
 <img id="blank" src="blankpic.jpg" name="blank" width="265" height="250" />
</div>
 //div below ends the option div
</div>

below is my current css

 #options{
text-align: center; 
border: 2px solid #333333;
background-color: #D0CECE;
display: block;
 }

 #compPick{
text-align: center; 
border: 2px solid #333333;
padding: 5px;
 }

compPick is a blank image that changes depending on a randomly generated number/choice. I'd like to keep the border around the sections, but I also would like the border around the images themselves.

Thank you for your help.

Upvotes: 4

Views: 23283

Answers (2)

Nirajan Mahara
Nirajan Mahara

Reputation: 1992

Use this CSS:

.div img {
  margin: 0 1vmax;
  transition: all 0.5s;
}

The img selects all <img> tags.

Explanation: When you add a space between selectors, it means "descendant of".

Upvotes: 0

Sumner Evans
Sumner Evans

Reputation: 9157

Use this CSS:

#options img {
    border: 2px solid #333333;
}

The img selects all <img> tags.

Explanation: When you add a space between selectors, it means "descendant of". For example, with this HTML:

<div class="awesome">
    <div class="foo">
        <div class="bar">text 1</div>
    </div>
    <div class="bar">text 2</div>
</div>

<div class="bar">text 3</div>

if you use this selector in CSS:

.awesome .bar { /* styles here */ }

it will select both the div with text 1 and the div with text 2 but it does not select the div with text 3 since that div is not a descendant of an element with class awesome.

Upvotes: 13

Related Questions