www.webdeveloper.com
Results 1 to 5 of 5

Thread: multiple selectors in style sheet

  1. #1
    Join Date
    Apr 2012
    Posts
    6

    multiple selectors in style sheet

    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

    Code:
    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

    Code:
    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

  2. #2
    Join Date
    Mar 2012
    Location
    Ghent
    Posts
    22
    ul#menu means that it will select every UL which has the id "menu".
    interactive and development tutorials | http://blog.notflip.be

  3. #3
    Join Date
    Apr 2012
    Posts
    6
    Thanks a lot! Can anyone say something about the first question?

  4. #4
    Join Date
    Sep 2006
    Location
    new york
    Posts
    265

    Grouping & contextual

    (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
    Code:
    /* 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>

  5. #5
    Join Date
    Apr 2012
    Posts
    6

    Lightbulb Thank You All

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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles