Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Descendant selectors in a class

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.
like image 460
ef2011 Avatar asked Jan 20 '23 15:01

ef2011


2 Answers

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.

like image 116
BoltClock Avatar answered Jan 22 '23 04:01

BoltClock


In your example, the a tag actually has several different classes (of which one is listed twice, for some reason).

In CSS code, we'd use a space to separate decendant selectors, but in HTML it just lets us put several classes in the same set of parentheses.

like image 31
William Avatar answered Jan 22 '23 06:01

William