multiple selectors in style sheet

@notflipApr 11.2012 — #[B]ul#menu[/B] means that it will select every UL which has the id "menu".

@CalabiYauauthorApr 11.2012 — #Thanks a lot! Can anyone say something about the first question?

@auntniniApr 11.2012 — #(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 [B]display: inline[/B] 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

<i>
 </i>/* 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/2009/08/17/taming-advanced-css-selectors/

and http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ cover "specifity" -- which might also be described as "contextual" nested selectors.

See also http://www.daaq.net/old/css/index.php?page=css+context+selectors&parent=css+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.
[/quote]

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>
[/quote]

@CalabiYauauthorApr 12.2012 — #Thank you very much, this is exactly what I have been looking for!

multiple selectors in style sheet

4 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

multiple selectors in style sheet

4 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #CSS _↴