More interesting concepts that I’ve come across while working through exercises. We’re learning about images and filetypes for images. I wanted to play around with CSS selectors to resize my image, and I was just not able to do it. Frustrating!
img .large { width: 1920px; height: auto; }
I realized after that there’s a difference between img .large and img.large. That space actually means something – whoops!
“Select any element with a class name “large”, that is a child of any img element.
img .large
I read and found that a space in a CSS selector has the special meaning. The selector that occurs to the right of the space is a child of the part of the selector to the left.
“Select any img element that has a class name of “large”
img.large
This type of selector is called: tag qualifying. It will select only elements with a class name of “large” and no other elements.
Apparently it’s also an inefficient way of selecting elements, so generally – don’t use tag qualifying selectors! Read more at: CSS-Tricks
My code should look like this in the end:
.large { width: 1920px; height: auto; }