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:
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:
multiple class names assigned to the same tag
.Insights (please correct if you spot a mistake):
.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.#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.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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With