CSS Selectors: Tag Qualifying vs Child

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!

Storm Troopers In Suits Image 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:

Storm Troopers In Suits Image .large { width: 1920px; height: auto; }

Duncan Leung

Front End Developer at iHerb.com

Irvine, CA

Subscribe to Duncan Leung: Javascript and Front End Development

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!