Multiple Selectors

Compound Selectors

Introduction

• H05a - (2:49)
  • Compound selectors are also referred to as:
    • contextual selectors
    • using selective styling
  • The application of the styles is contingent on the context that the selector is in.
  • Compound selectors provide very targeted application of styles which is usually what is desired.
    • This is what a designer wants: to provide different styles unique to a certain page section or type of element.
  • They also provide increased specificity to help ensure successful application of the rule.
  • In all cases, the style is applied to the last selector listed.
  • First, some terminology:
    • A parent selector is a selector that has a child selector directly beneath it with no other selectors between them. Here is an example: ul is the parent and li is the child:
      • <ul><li>text</li></ul>
    • A descendent selector is one that can be a child or grand-child, or grand-grand child and so on, of a selector. The strong element selector is a descendent of the side class selector
    • <ul class=side><li>This is <em>the message that <strong>MUST</strong><em> be told!

Descendent selectors

• H05b - (4:40)
  • Descendent selectors are those that require specific nesting of one or more elements inside another in order to be applied.
  • In the examples below, the letters a and b represent any type of selector:
    • The following means that the b selector must be a descendent of selector a:
      • a b
    • Being a descendent means that selector b must be somewhere inside selector a in the code - it does not need to be a child of selector a although it could be.
    • The space between the a and b means that there can be selectors nested between the two selectors and the a b selector will still work.
  • Code examples:
    • The following would mean any em element that is anywhere inside a p element will have the rule applied:
      • p em
      • The following code would qualify even though there is a strong element between the p and em:
      • <p>It is with great pleasure that I introduce you to <strong>Sam <em>The Shark</em>Smith.</strong></p>
    • Likewise, the following means any strong element inside a table will have the rule applied. One can assume that there would be at least <tr> and <td> tags between the table and the strong elements, but the rule would still apply to the strong selector.
      • table strong
  • There can be multiple descendent selectors required for the style to be applied, for example:
    • a b c d
    • The rule will be applied to the d selector if the d selector is a descendent of the c selector, and so forth.
  • Example:
    • This would mean any strong element that is inside any element that has the class of hilite that is inside a li element inside a ul element that has the class attribute of side in it would then have the style applied. (whew!)
      • .side li .hilite strong
    • This is what would apply that rule to the strong tag:
    • <ul class=side>
  <li>This is a <em class=hilite>true example of <strong>superlative
  behavior!</strong></em>
  </li>
</ul>


Dependent selectors

• H05c - (3:17)
  • Dependent selectors require that a class or id attribute with a specific value be in the tag in order for the rule to be applied.
    • Here are two examples of how it would look using a to represent an element, b to represent a class selector, and c to represent an id selector:
      • a.b
      • a#c
    • Examples of such rules:
      • em.sop
      • strong#baseball
    • Example of the code that would apply them
      • <em class=sop>
      • <strong id=baseball>
        
• Dependent selectors can be included in a list of selectors in a compound selector.
  • For Example:
    • #wrapper p em.sop
    • strong#baseball h1 em.hyper

More multiple selectors

Multiple classes in one class attribute

• H05d - (0:40)
  • Multiple classes in one class attribute are permitted
  • Two or more classes can be applied in a tag's class attribute.
  • In this example, two classes are applied to a paragraph element:
    
    <p class="minor fltrt">copyright 2011 Tablet Talk, Inc.</p>
    

Grouping selectors

• H05e - (1:03)
• Grouping selectors is very common to reduce the amount of code.
• If two or more selectors have the same rules, list the selectors together, separated by commas, then put in the declaration block that they will all use.
• Doing it requires a lot less code than providing the same declaration block to each selector individually.
  • Example:
    • Instead of this to make the three selectors specify green text:
      
      h1 { color:#0F0; }
#side { color:#0F0; }
.intro { color:#0F0; }
      
      
    • Do this, which will make the text of those selectors green with a lot less code. Note the commas separating the selectors:
      
      h1, #side, .intro { color:#0F0; }

Online examples

• H05f - (6:59)
• Real world examples: look for grouped, dependent, descendent selectors:
  • Getty Center
    • Getty home page: - check the source code for id and class attributes.
    • Getty css file - check for examples of descendent, dependent, and other selector types.
  • UCLA Extension
    • UCLA Extension home page - check the source code for id and class attributes.
    • UCLA Extension css file linked to from home page - check for examples of descendent, dependent, and other selector types.

Advanced compound selectors

• H05g - (2:44)
  • These are supported by IE7+ and all modern browsers.
    • Direct child
      • In this example of a direct child selector, the em element must be inside an h3 element without any other tags between them in order for the rule to be applied.
      • The following rule is followed by an example of when it would apply:
        • h3 > em {color:#5F39DE;}
        • <h3>I must <em>insist</em> that you join us!</h3>
      • It would not apply here because there is a strong tag between the h3 and the em:
        • <h3>I <strong>must <em>insist</em></strong> that you join us!</h3>
    • Adjacent sibling
      • Siblings are elements that have the same direct parent.
      • Adjacent means that the elements must be in the code one directly after the other.
      • In this example the style would apply to both paragraph tags because they are one immediately after the other and they both have the same parent:
        • p + p {color:#033;}
        • <div id=weather><p>Temperatures are up.</p><p>Humidity is down.<p></div>
  • The following is supported by IE8+ and all other modern browsers
  • General sibling means that strong needs to be a sibling of em and that strong needs to come anywhere beforeem. The following rule would apply to the example that follows it:
    • strong ~ em {color:green}
    • <li>The <strong>meaning</strong> of life is<em> TBD</em></li>

Assignment

• H05h- (3:49)
  1. Create an html5 file and name it yourlastname_H05.html
  2. Add some Lorem ipsum text.
  3. Create an embedded style sheet that includes the following and then apply them in the text in any way you like. In all cases, use only one declaration: the color property but each with a distinctly different color. Here are the selector requirements:
     • A single dependent selector.
     • A descendent selector that is nested within three selectors - that's a total of four nested selectors.
       • Use an id selector at the top, then one class followed by two tag selectors.
       • Here is the syntax for it:
         #id  .class  tag  tag
         
     • Four grouped selectors using different selectors than the ones above.
  4. You ought to end up with three different colors of text within the file, and one of the colors ought to be in four places (the grouped selectors).
  5. Until you understand the principles of inheritance, keep the colors discrete - separate them all, don't have one color inside another color.
  6. Please test the file in your browser before sending it.

© 2014 Dan Hitchcock Vaughan and licensors