# HTML/CSS/GRIDs Pseudo-selectors and classes

**URL:** <https://forum.codewithmosh.com/t/html-css-grids-pseudo-selectors-and-classes/21059>\
**Category:** HTML/CSS\
**Created:** [June 25, 2023, 9:04am UTC](https://forum.codewithmosh.com/t/html-css-grids-pseudo-selectors-and-classes/21059 "2023-06-25T09:04:08Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Walter](https://avatars.discourse-cdn.com/v4/letter/w/85e7bf/32.png) [@Walter](https://forum.codewithmosh.com/u/Walter)\
**Post date:** [June 25, 2023, 9:04am UTC](https://forum.codewithmosh.com/t/html-css-grids-pseudo-selectors-and-classes/21059/1 "2023-06-25T09:04:08Z")

</div>

Hi there. In the HTML-2 course/Grid topic/Exercises/Gallery Pseudo-selectors doesn’t work. It sounds weird but when I tried to expand a 3-rd photo to 2 columns horizontally and 2 rows vertically it does nothing:  
.gallery img:nth-of-type(3)  
grid-column: 2 / 4;  
grid-row: 1 / 3;  
I’ve used classes:  
.img3 {  
grid-row: 1/3;  
grid-column: 2/4;  
} and it works.  
Windows 11, VSC  
Does anyone have the same problem or it’s just me? 😀

---

<div class="post-metadata">

**Author:** ![lucidlear](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/lucidlear/32/5477_2.png) [@lucidlear](https://forum.codewithmosh.com/u/lucidlear)\
**Post date:** [June 25, 2023, 9:56am UTC](https://forum.codewithmosh.com/t/html-css-grids-pseudo-selectors-and-classes/21059/2 "2023-06-25T09:56:31Z")

</div>

Hi it works for me, im on windows 10. Check the class name of your img container is indeed ‘gallery’

---

<div class="post-metadata">

**Author:** ![Walter](https://avatars.discourse-cdn.com/v4/letter/w/85e7bf/32.png) [@Walter](https://forum.codewithmosh.com/u/Walter)\
**Post date:** [June 25, 2023, 12:46pm UTC](https://forum.codewithmosh.com/t/html-css-grids-pseudo-selectors-and-classes/21059/3 "2023-06-25T12:46:23Z")

</div>

Thanks for helping, when I literally copied and pasted Moshe’s code it’s OK. May be problem was somewhere else in my code, may be with sizing items, but anyway thank you

---

<div class="post-metadata">

**Author:** ![Walter](https://avatars.discourse-cdn.com/v4/letter/w/85e7bf/32.png) [@Walter](https://forum.codewithmosh.com/u/Walter)\
**Post date:** [June 25, 2023, 12:48pm UTC](https://forum.codewithmosh.com/t/html-css-grids-pseudo-selectors-and-classes/21059/4 "2023-06-25T12:48:46Z")

</div>

I don’t really get what 1fr means in this case

---

<div class="post-metadata">

**Author:** ![usnRet95](https://avatars.discourse-cdn.com/v4/letter/u/7feea3/32.png) [@usnRet95](https://forum.codewithmosh.com/u/usnRet95)\
**Post date:** [June 30, 2023, 8:58pm UTC](https://forum.codewithmosh.com/t/html-css-grids-pseudo-selectors-and-classes/21059/5 "2023-06-30T20:58:47Z")

</div>

![image](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/0/0a8be9aa88edb405535b5c4f46c1039d87a2e2a5.png)

This was captured from asking chatGPT that question.

---

<div class="post-metadata">

**Author:** ![lucidlear](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/lucidlear/32/5477_2.png) [@lucidlear](https://forum.codewithmosh.com/u/lucidlear)\
**Post date:** [July 2, 2023, 6:20am UTC](https://forum.codewithmosh.com/t/html-css-grids-pseudo-selectors-and-classes/21059/6 "2023-07-02T06:20:50Z")

</div>

> [@Walter](#):
>
> I don’t really get what 1fr means in this case

Its a fractional unit. Because its relative value and not fixed it allows us to build more responsive layouts. This is why Mosh recommends to size your grids in this unit. You can think the bottom rules to be the same. It just means 3 columns and each column take up 1 even unit of available space. Which means all 3 columns are equal in size or 1/3-1/3-1/3, they are all the same fraction. if we had 1fr 1fr 2fr then the 3rd column would be the same size as the first two columns so its 1/4-1/4-2/4 in fractions.

grid-template-columns: 1fr 1fr 1fr;  
grid-template-columns: repeat(3, 1fr);