Question

I can very well understand from this Selectutorial what element/tag based descendant selectors are, how and why they work and for what purpose.

But then I came across certain websites which define a class name for an anchor <a> which is made of several names separated by spaces, e.g.

<a class="samename nav_item samename" href="/messages/?refid=7"> Text </a>

I then found out that these are also called “descendant selectors” — or are they called descendant combinators?

This is where I stopped understanding:

1. Is the 2nd type of “descendant
   selectors” the same as the 1st type?
2. Does the 2nd type of “descendant
   selectors” have a different name,
   that can help me differentiate it
   from the 1st type when referring to
   it?
3. What is the purpose of this 2nd type
   of “descendant selectors”?
4. Why repeat samename in such
   descendant selector?

Any tips or pointers to places where I can learn more about this 2nd type would be much appreciated.

EDIT: The replies below helped put order into things, especially in regard to proper terminology. I will try to summarize my understanding so far — first by attempting to answer the questions above in a respective manner, then listing some insights, with the hope that it can help future css-laymen like me:

1. The 2nd type is not “descendant
   selectors” at all, so it cannot
   possibly be the same as the 1st
   type.
2. The name for the 2nd type, for now,
   is multiple class names assigned to the same tag.
3. One use of attributing multiple classes per element is that one can then chain class selectors, such that only elements with all the classes listed are matched, not those that have one or fewer of the classes.
4. This is most likely a programming mistake/error/bug (although I found it on a very prominent website).

Insights (please correct if you spot a mistake):

1. Despite what’s written in
   w3schools, a class (name) is
   not a selector! A selector can only be an HTML element.
2. However, a CSS rule may refer
   to an HTML element (or a group of
   HTML elements) by class name, using
   the .classname notation. This
   notation is referred to by some as
   “the class selector” and this
   is where my confusion stemmed from. It merely means it can be used to select any HTML element that has a class attribute.
3. A CSS rule may also refer to an HTML
   element (or a group of HTML
   elements) by element id, using the
   #elementid notation. This is an
   entirely different subject but since
   this notation is referred to by some
   as “the id selector” it’s quite
   possible this could be a source for
   confusion as well, so it’s briefly
   mentioned here.
4. In HTML, “class” is an attribute. In
   CSS, it is a “selector aggregator“,
   used to select any HTML element that
   has that class attribute.
5. The best CSS tutorial, by far, is
   Selectutorial.

Answer 1

There is only one CSS descendant selector, and that is the space character:

E F /* Selects any F that descends from (or is contained by) an E */

Space-separated class names are just multiple classes that are separated by spaces, in a single HTML class attribute. The class attribute is not a selector, in fact not even part of CSS for that matter.

On a somewhat related note, however, one use of listing multiple classes per element is that you can then chain class selectors, such that only elements with all the classes listed are matched, not those that have one or fewer of the classes. For example:

.samename.nav_item /* Selects only elements that have both classes */

As to why samename is repeated in your given HTML, I have no idea. It’s the same as having just one samename class.