multiple selectors in style sheet

[CalabiYau]

Hi!
Sorry if this is a known question, I didn't know which keywords to search for.

In a style sheet there is a style

ul#menu li ul li a:hover
{ ... }

My question are the following:

1. What does it mean when different selectors (in this case ul#menu, li, ul etc.) stand before a style declaration (and in this order). I only know the case

p, h1, h2 {...}

which means that this style will concern p, h1 and h2 at the same time.

Is the former some kind of inheritance?

2. What does ul#menu mean? I know what "#id" means, but I do not know the syntax "selector#id"

Thank you for your patience

[notflip]

ul#menu means that it will select every UL which has the id "menu".

[CalabiYau]

Thanks a lot! Can anyone say something about the first question?

[auntnini]

(2) If several elements have the same style rule, you can group these selectors together in a comma-delineated list. You could also use a wildcard * asterisk for all elements. For instance, CSS elements are display: inline by default. Browsers have applied display: block to things we think of as block-level (headers, paragraphs, etc.). Since browsers have not yet set styles for new HTML5 elements you might want to

/* Tell the browser to render new HTML 5 elements as block */ 
header, footer, aside, nav, article { 
display: block; 
}

(1) Space-separated selectors, on the other hand, are as you said "some kind of inheritance" or nested "specificity" or contextual selectors.

See http://coding.smashingmagazine.com/2...css-selectors/
and http://coding.smashingmagazine.com/2...u-should-know/ cover "specifity" -- which might also be described as "contextual" nested selectors.

See also http://www.daaq.net/old/css/index.ph...s+syntaxSimple

Contextual Selectors
You can use contextual selectors to indicate the context of a selector. The context of a selector is determined by what its parent element is. In other words, what the element is nested within or what precedes it in the document.

For instance, if you wanted to have some form of special formatting for unordered lists inside ordered lists, you could write:

ol ul { ... }

This can be read as "for any unordered list that is nested within an ordered list." Thus they style rule will only apply to unordered lists inside ordered lists.

See http://www.w3.org/TR/CSS2/selector.html#grouping

5.2.1 Grouping
When several selectors share the same declarations, they may be grouped into a comma-separated list.

In this example, we condense three rules with identical declarations into one. Thus,

h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif }

is equivalent to:

h1, h2, h3 { font-family: sans-serif }

5.5 Descendant selectors
At times, authors may want selectors to match an element that is the descendant of another element in the document tree (e.g., "Match those EM elements that are contained by an H1 element"). Descendant selectors express such a relationship in a pattern. A descendant selector is made up of two or more selectors separated by white space. A descendant selector of the form "A B" matches when an element B is an arbitrary descendant of some ancestor element A.

For example, consider the following rules:

h1 { color: red } em { color: red }

Although the intention of these rules is to add emphasis to text by changing its color, the effect will be lost in a case such as:

<H1>This headline is <EM>very</EM> important</H1>

We address this case by supplementing the previous rules with a rule that sets the text color to blue whenever an EM occurs anywhere within an H1:

h1 { color: red } em { color: red } h1 em { color: blue }

The third rule will match the EM in the following fragment:

<H1>This <SPAN class="myclass">headline is <EM>very</EM> important</SPAN></H1>

[CalabiYau]

Thank you very much, this is exactly what I have been looking for!