Question about Selectors

Hello all, I looked this up on the sitepoint.com reference and other places and I can’t seem to get a grasp on this very simple thing. Can somebody please explain the difference between

p.classname {} and
.classname p {}

or the diffence between:

.classA .classB {} and
.classA.classB {}

For some reason I just cannot understand the explanations I have seen online.

Here is what I think they mean. If I am wrong please clarify, because I would like to get this monkey of ignorance about this off my back.

p.classname {} means: select all <p> that have a class of “classname” like <p class=“classname”>
where .classname p {} means: select all <p> that are descendents of .classname

Or in the other example “.classA .classB {}” means “Select all elements with a classB when it occurs within parent elements with classA.”
Where “.classA.classB” means “select all elements that specify both classA and classB such as <p class=“classA classB”>”

Am I anywhere close?

You’re exactly right.

Good job!

Ok, thank you. :smiley:

Just wondering, can anyone tell me why you would need to write a class this way p.classname. When all you have to do is just this .classname and attach it to the p anyway? I don’t see the point right now.

What is the usage of doing classA.classB when you could just write them separately and attach them anyway?. Is it just for code maintenance like combo selectors or is there specific usage benefits? Any insight would be appreciated.

You could have some other item that also shared the same classname, and this would limit your rule to just the p elements with that classname.

I’m not sure I understand your second question…(:

I see what you mean about the first example being useful for same classnames. Good point.

For the second question, here is what I mean. If I write a rule: “classA.classB {}” that’s basically saying that it only uses the rule when the element calls both classnames: <p class=“classA classB”>. But why not just write both classes separately and apply them to the <p> element the same way? Why would I need to join them by the decimal? Is it for the same reason?

OK, I think I understand the question. Let’s hope I understand the answer, as well, because I’m sure I’ve never used this approach.:slight_smile:

You might have several items with .firstname and others with .secondname. Perhaps your first class has color:red and your second class has font-weight:bold. Any item with class=“firstname secondname” will be both red and bold. But then you decide it should be underlined, too. By using .firstname.secondname, you can target just those items to underline the text.

Does that help?

Ah yes. That does make sense. It allows you to make them underlined ONLY when in combination, without having to create and add a third class? Is that right?

Yes that’s right :slight_smile:

The dot separated classes don’t work properly in IE6 though and are best avoided if IE6 support is required.

In my best Southern accent: I have exerciiiiiiised the IE6 demon! Hallelujah!