# Why the styling has both gallery and image elements

**URL:** <https://group.classcentral.com/t/why-the-styling-has-both-gallery-and-image-elements/35739>\
**Category:** Web Development Bootcamp\
**Created:** [September 19, 2022, 8:55pm UTC](https://group.classcentral.com/t/why-the-styling-has-both-gallery-and-image-elements/35739 "2022-09-19T20:55:54Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![thehappycoder](https://sea2.discourse-cdn.com/flex016/user_avatar/group.classcentral.com/thehappycoder/32/5732_2.png) [@thehappycoder](https://group.classcentral.com/u/thehappycoder)\
**Post date:** [September 19, 2022, 8:55pm UTC](https://group.classcentral.com/t/why-the-styling-has-both-gallery-and-image-elements/35739/1 "2022-09-19T20:55:54Z")

</div>

I am working on the [flex box lesson](https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-css-flexbox-by-building-a-photo-gallery/step-20) and noticed that the styling isnt changing with or without `.gallery` added to the css styling. I am not sure as to why it is important to have both gallery and img elements included for this styling. Why can’t we just have img element with the below styling?

.gallery img {  
width: 100%;  
max-width: 350px;  
height: 300px;  
object-fit: cover;  
border-radius: 10px;  
}

Could someone please let me know if I am missing a concept to understand this better?

---

<div class="post-metadata">

**Author:** ![Timiphil](https://sea2.discourse-cdn.com/flex016/user_avatar/group.classcentral.com/timiphil/32/5367_2.png) [@Timiphil](https://group.classcentral.com/u/Timiphil)\
**Post date:** [September 19, 2022, 9:12pm UTC](https://group.classcentral.com/t/why-the-styling-has-both-gallery-and-image-elements/35739/2 "2022-09-19T21:12:43Z")

</div>

Hello @thehappycoder . There maybe several reasons why your css styling isn’t changing. but mostly check your html and see if gallery is well attributed with class. having both gallery and img elements makes your styling easy and simple.

I hope this helps you figure it out. if not, you can post your code in here and we can figure it out together.

---

<div class="post-metadata">

**Author:** ![Timiphil](https://sea2.discourse-cdn.com/flex016/user_avatar/group.classcentral.com/timiphil/32/5367_2.png) [@Timiphil](https://group.classcentral.com/u/Timiphil)\
**Post date:** [September 19, 2022, 9:13pm UTC](https://group.classcentral.com/t/why-the-styling-has-both-gallery-and-image-elements/35739/3 "2022-09-19T21:13:32Z")

</div>

another thing you can do is to refresh your browser.

i hope this help too.

---

<div class="post-metadata">

**Author:** ![nurainiapanti2925855](https://sea2.discourse-cdn.com/flex016/user_avatar/group.classcentral.com/nurainiapanti2925855/32/5857_2.png) [@nurainiapanti2925855](https://group.classcentral.com/u/nurainiapanti2925855)\
**Post date:** [September 20, 2022, 5:36am UTC](https://group.classcentral.com/t/why-the-styling-has-both-gallery-and-image-elements/35739/4 "2022-09-20T05:36:24Z")

</div>

@thehappycoder rotimi is right recheck ur code…

---

<div class="post-metadata">

**Author:** ![syllie](https://sea2.discourse-cdn.com/flex016/user_avatar/group.classcentral.com/syllie/32/6257_2.png) [@syllie](https://group.classcentral.com/u/syllie)\
**Post date:** [September 20, 2022, 6:43am UTC](https://group.classcentral.com/t/why-the-styling-has-both-gallery-and-image-elements/35739/5 "2022-09-20T06:43:18Z")

</div>

Hey Ramya,

In this particular example, you are right, you can style the image element by just targetting `img`.

However, you got to think a little bit in the larger scope - a web page usually has more than just one (set of) image(s) to display. And without specifically targeting things like ‘only the images related to the gallery’, it will also apply that style elsewhere. This is just thinking ahead of the game. With a fancy word this is called ‘specificity’. This is a good resource explaining its importance: [CSS Specificity explained - YouTube](https://www.youtube.com/watch?v=c0kfcP_nD9E)

As for things not rendering properly, that sounds like what others have proposed, maybe a tiny error in the code and/or a browser hickup. Try it in a fresh browser? Or on codepen?

I hope this helps.

---

<div class="post-metadata">

**Author:** ![carlost2672543](https://sea2.discourse-cdn.com/flex016/user_avatar/group.classcentral.com/carlost2672543/32/4162_2.png) [@carlost2672543](https://group.classcentral.com/u/carlost2672543)\
**Post date:** [September 20, 2022, 9:21am UTC](https://group.classcentral.com/t/why-the-styling-has-both-gallery-and-image-elements/35739/6 "2022-09-20T09:21:27Z")

</div>

Hi @thehappycoder

Like others have say I think it is about:

- **specifity** , we ONLY want to add those styles to our gallery images
- **readability** , it is easier to understand that you just styling images inside the gallery
- **maintainability** , using elements selector for global styles and .class selector for this (not `div img`, for example) will help again with specificity and also easier to mantain because our CSS won’t depend of HTML tags (for example, if you change your `<div class="gallery">` for a `<section class="gallery">` your CSS still will work!!).

Just some thoughts. I hope it helps.

Happy day Ramya

---

<div class="post-metadata">

**Author:** ![thehappycoder](https://sea2.discourse-cdn.com/flex016/user_avatar/group.classcentral.com/thehappycoder/32/5732_2.png) [@thehappycoder](https://group.classcentral.com/u/thehappycoder)\
**Post date:** [September 20, 2022, 12:00pm UTC](https://group.classcentral.com/t/why-the-styling-has-both-gallery-and-image-elements/35739/7 "2022-09-20T12:00:58Z")

</div>

Thank you everyone for giving me such clarity!! I will check out the video on YouTube about css specificity!

Thanks so much 💜

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/ccstudygroup/original/1X/36206832181ed26910a18e33d8bfef087cf661b1.svg) [@system](https://group.classcentral.com/u/system)\
**Post date:** [November 4, 2022, 12:01pm UTC](https://group.classcentral.com/t/why-the-styling-has-both-gallery-and-image-elements/35739/8 "2022-11-04T12:01:01Z")

</div>

Closed on November 4, 2022, 12:01pm UTC

This topic was automatically closed 45 days after the last reply. New replies are no longer allowed.
