0

I want to select some <img> from my page with different sections and give it a width of 80% of its container. I realized my code only selects the <img> element from .things-love class! Is there a way I can select all the sections with classes I want changes to apply with <img> element?

.about-me, .education, .skills, .experience, .things-love img{
    width: 80%
}
Husnul Aman
  • 379
  • 1
  • 9
  • `.about-me, .education, .skills, .experience, img{ width: 80% }` if you noticed, I removed `.things-love` from your code. that should work. – Jacob Nelson Jul 01 '19 at 08:58

2 Answers2

1

2021 update:

Most browsers now support :is() pseudo-class. This lets us express the same selector more succinctly:

:is(.about-me, .education, .skills, .experience, .things-love) img { 
  width: 80% 
}

See: https://developer.mozilla.org/en-US/docs/Web/CSS/:is


Old solution

Add img after each container like this:

.about-me img, 
.education img, 
.skills img, 
.experience img, 
.things-love img { 
  width: 80% 
}

Or add a class to imgs and target them directly

...
<div class="about-me">
   <img class="container-img" src="...">
</div>
...
.container-img {
  width: 70%;
}
abdusco
  • 7,899
  • 2
  • 23
  • 39
0

.about-me img, .education img, .skills img, .experience img, .things-love img{
    width: 80%
}

You have to provide image tag for every class. What you did is you selected the classes for other sections but you have selected image for the .things-love class only

nazifa rashid
  • 1,369
  • 1
  • 7
  • 20