The submission i was working on was for a row of 5 avatars, positioned absolutely on the very bottom of a component. I had used flex for the row and wrapped each image in a div to control the size but when the component got too small, i wanted to shrink the number of avatars in the container. With the row position: absolute I also aimed to use :nth-child to select a range of avatars for the first time.
For such a simple component, I was dealing with a bunch of firsts; using @container on a flex container with image elements and using :nth-child to select a range. When i initially added container-type: inline-size to the flex row, everything shrunk. Adding flex-grow or a flex: 1 to the image wrappers did nothing. I could see they werent gone completely as just a small circle of the border colour was left. I tried a few different things and what I ended up finding that worked was giving a width to the container as the children can no longer make up its size. It was a departure from my usual habits as I had learned for responsive coding to let the content and padding make up the elements size! To avoid setting widths or especially heights whenever possible. The image wrappers also had a width: min(100%, 8ch) but that did nothing when the container collapsed because obviously the 100% value was smaller than 8ch. Once i gave the container a width, my images were back and i could then apply an @container rule to tackle the :nth-child ranges.
My first mistake was my habit of using :is(). Initially i tried .avatar-wrapper:is(:nth-child(1n - 5)):is(:nth-child(1n + 3)) if memory serves (I am so shite with trying to use :nth-child, the only way I am comfortable with it is selecting one element out of several with the same class name with :nth-child(1 of .className) ; trying to select a range was new). That was not working. Even putting .avatar-wrapper:is(:nth-child(1n - 5), :nth-child(1n + 3)) didnt work either. The range that eventually selected the range of three to five was .avatar-wrapper:nth-child(1n + 3):nth-child(1n - 5) and thanks to Kevin Powell’s video on selecting ranges of content that helped me decide to drop the :is() selector and chain them the traditional way. I eventually dropped the second :nth-child(1n - 5) because i realized I just needed .avatar-wrapper:nth-child(1n + 3) to accomplish what I needed, which was to set the last 2 to display: none.
So thats what I learned. Two days later i saw another submission on the same challenge that looked nearly identical to mine. They had used the same colour palette, unique offset border-radius, many of the same class names and for a moment i felt miffed; like all my hard work and struggle had been nicked. But scanning their code i realized they hadnt just copied and pasted; they took the time to dissect and do things their way and had only borrowed a few aesthetic elements. Imitation is the sincerest form of flattery and having a design someone WANTS to copy is very flattering!
The completed submission I coded and struggled to use @container on a flex row and to target the right :nth-child() selectors can be seen here on iCodeThis Social Login. I hope i have more confidence to use @container now that I know how to use it in combination with flex properties and <img> elements, hopefully less challenging content will be a breeze!