Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Chloe Brittain
PLUS
Chloe Brittain
Courses Plus Student 2,082 Points

.class element vs element.class

Hi,

The CSS selectors videos talked about descendant selectors, like ".my_class a", but (I could be mistaken) I don't remember them talking about element.class, like "a.my_class". However, I just had to use the latter to get a question right in objectives for "Relative Length Units". I don't understand what the difference between these two is.

I'm pretty sure that ".my_class a" selects an anchor tag (a) inside any parent or other ancestor that is of class my_class, but "a.my_class" selects any anchor tag that is of class my_class.

6 Answers

Yes there is a difference

.class nav 

will select all nav that are a descendant of a class name .class

nav.class

will select all nav elements with the class named .class

Hope this clear it up

James Barnett
James Barnett
39,199 Points

.container div

"Select any div element that is a child of any element with a class name of "container"

div.container

"Select any div element that has a class name of "container"

source: http://css-tricks.com/whats-the-difference/

.class x targets any element x that's a descendent of a class

x.class targets only those x elements assigned that class

Kevin Niedermayr
Kevin Niedermayr
3,072 Points

I could be wrong but a.my_class actually means that you want the link only in .my_class to be styled and if you use .my_class a it will add the styling to all the link elements in .my_class (there could be another div, and another). Haven't really thought about that until now, just did it that way.

a.my_class

will style ONLY the anchor tags with the class name .my_class like

<a href="#" class="my_class">Link Affected</a>

so the following would not be selected

<section class="my_class">
    <a href="#">Link not Affected</a>
</section>

Thanks

Kevin Niedermayr
Kevin Niedermayr
3,072 Points

Ah yeah, sounds right, thanks. :) But in a way it's like I meant it.

Wayne Priestley
Wayne Priestley
19,579 Points

HTML reads from right to left.

so .div a would target the a tag that was contained within a div element.

and a.div would target the div that was contained within the a element.

I'm pretty sure that ".my_class a" selects an anchor tag (a) inside any parent or other ancestor that is of class my_class, but "a.my_class" selects any anchor tag that is of class my_class.