CSS selector / class - Post ID 217526

User 2600440 Photo


Registered User
12 posts

Ok. So I'm wondering what the difference, benefits, negatives, hard and fast rules about the following in a style sheet. Or am I going down the wrong tracks entirely in some regard here.

Example:

HTML

<figure class="image">

<img src="hello.jpg" height="2" width="3">
<figcaption>Greetings</figcaption>

</figure>


CSS

img.image { display:block; }


or

.image img { display:block; }


I can't figure out which words to google to figure out an answer and I can't conceptualize the difference between these two. Both seem to work interchangeably in HTML Editor's preview but I am wondering if they would ever diverge in rendering.
User 2600440 Photo


Registered User
12 posts

I lied. They do work differently. The 3px image padding disappears if it's img.image. I feel like I'm close to understanding why but can't quite wrap my head around it right now.
User 2600440 Photo


Registered User
12 posts

I think I understand:

img.image
means any
<img class="image">
will be formatted.

While

.image img
means any
<element class="image">
<img>
</element>
will be formatted.
User 187934 Photo


Senior Advisor
20,266 posts
Online Now

Looks like your figuring out the meaning of CSS.
Cascading Style Sheets
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2600440 Photo


Registered User
12 posts

Yeah. I've always had an interest in web design. I love the control aspect and the allure of designing a web site from the ground up that is precisely what I want. This time I think I have a better chance of sticking with it because I have a practical need for it as well.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.