Question

While studying how to build a nested table from list elements in CSS, I stumbled across this page: http://css.maxdesign.com.au/listamatic2/horizontal01.htm.

I noticed that the stylesheet uses a few symbols I’m not familiar with in CSS, namely the > and * symbols as what seem to be some kind of CSS operators.

For example:

ul#navlist li * a:link, ul#navlist li * a:visited

I was able to Google and find out that > simply indicates a parent/child relationship between two elements, but I still have no idea what * does. I’m also curious to know whether or not there are other “operators” like these, and if so, could somebody direct me to a reference of all of them?

Answer 1

* is the universal selector. It selects any element.

However, it’s a simple selector, and as such it doesn’t belong in the same family as what are called combinators (which indicate relationships between two elements). > is the child combinator, which as you say defines a parent-child relationship between two elements.

The spaces between ul#navlist and li, li and *, etc are all descendant combinators. Unlike >, the space doesn’t indicate a parent-child relationship; it just asks for an element that’s contained somewhere within, whether it’s a child, grandchild, great-grandchild, etc, but not a sibling.

The difference between these two selectors (from your link):

ul#navlist li > a:link, ul#navlist li > a:visited
ul#navlist li * a:link, ul#navlist li * a:visited

Is that the first one with > asks for a:link and a:visited elements
that sit directly within ul#navlist li elements,

while the second one with * asks for a:link and a:visited elements
that sit within any element that’s within ul#navlist li.
In other words, a:link, a:visited that’s not directly within ul#navlist li.