CSS syntax questions

Question

.features img{...}

I understand .features is custom CSS class and div is HTML element. But I don't understand what kind of relationship this syntax will build between them?

Justin Niessner · Accepted Answer · 2010-08-31 12:48:24Z

3

This syntax doesn't build any relationship between the .features class and a div.

The style that you provided is styling any child <img> tag contained within a .features class.

Both of these would be valid and apply the given style to the image:

<div class="features">
    <img src="myImg.png" />
</div>

and

<table class="features">
    <tr>
        <td><img src="myImg.png" /></td>
    </tr>
</table>

If you wanted to specify that your class was only applicable to divs, you would need to change the declaration to:

div.features img { }

answered Aug 31, 2010 at 12:48

Justin Niessner

246k40 gold badges416 silver badges546 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pablo Over a year ago

This syntax defines scope in other words, for the element specified at the end of this definition. Can I have nested scope definition or it's limited only by two items?

Kyle Over a year ago

You can increase the scope how you wish: div.features div span a img would select an image inside an <a> tag in a nested div within a div with the class features. There are no limits :)

Justin Niessner Over a year ago

You can definitely nest them. One extremely common use of nesting is styling menus that are driven by an unordered list.

Collectives™ on Stack Overflow

CSS syntax questions

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related