Selector Sampler

A selector states which tag the rule selects. There are many ways you can identify a selector

• Standard Selector:
  strong {color: green;}
  List the tag - strong, then the style - green in color
• Multiple Selector:
  p, q, span {font-style:italic;}
  List all tags you wish to have the same style. In this case - p, q, span will all be in italic.
• Contextual Selector:
  p strong {color:blue;}
  List any tag nested within another tag in the order they appear. No commas. It doesn't matter how many other tags are in between. Here any strong tag within a <p> tag would be blue.
• Contextual Selector - Child:
  blockquote>strong {color:red;}
  List the tag (child) nested within the tag preceding it. The strong tag after the blockquote tag would be red.
• Grandchild Selector:
  blockquote * strong {color:blue;}
  Similar to above. List the second tag (grandchild) nested within the tags preceding it. The strong tag after the blockquote tag and one other tag would be blue.
• Adjacent Sibling Selector:
  h3 + p {color:orange;}
  List a tag (p) following a tag nested at the same level (h3). The p tag that follows the h3 tag is affected and will be orange.
• Attribute Selector:
  img[title] {border: 3px dotted aqua;}
  Title your image - i.e. title="dogboy". This makes any img with a title "dogboy" have a aqua, three-pixel dotted border around it.
  or
  img[alt|="???"] {border: 3px dotted aqua;}
  Give several images the same alt atribute before a hyphen and all will have the same style.
  <img src="../1.jpg" alt="???-photo1">
  <img src="../2.jpg" alt="???-photo2">
  <img src="../3.jpg" alt="???-photo3">
  would all have an aqua, three-pixel dotted border around them.
• Universal Selector: A.K.A. Star selector
  * {color:red;}
  * means "anything"! - No tag is needed. All type will be red, except where you style it different in other rules.

• Class Vs. ID:
  A class will be used many times and an id name is only be used once in a document. An id is more powerful than a class.
  An id would be used on something like a footnote that you want to apply a set of CSS rules to. It's used on each page only once.
  <div id="footnote">
  With CSS - #footnote {font-size:70%}
  Any text in the footnote div would be 70% of the regular text.
  A class would be used to create one spacific style for multiple tags in a document. If you used the name of several singers you would use a class.
  <span class="singer">Aerosmith
  <span class="singer">Korn
  <span class="singer">No Doubt
  With CSS - .singer {{font-variant:small-caps;}
  All span classes "singer", Aerosmith, Korn, No Doubt, would have small caps.
• Pseudo Classes:
  a:link {color:white;}
  a:visited {color:orange;}
  a:hover {font-size3em;}
  a:active {color:navy;}
  Theese are selection tags used mostly with hyperlinks. Usually used with the <a> tag enabling styles initally, when rolled over, when active, or after visited.
• Other Pseudo-Class:
  z:first-child
  This pseudo class selects the first-child element with the tag name "z".
  In this case:
  p strong:first-child{color:red;}
  <p>I<strong>LOVE</strong>music, do<strong>you?</strong> </p>
  'LOVE' is in red and 'you' is not. Another example is
  z:focus
  A text field of a form gets focus when the user clicks it.
  input:focus {background-color: grey}
  has a grey border around the field when the user clicks it.
• Pseudeo Elements:
  Z:first-letter {font-size:150%; color:yellow;}
  or
  p:first-line {font-size:120%; color:blue;}
  Creates a style for just the first letter or the entire first line.
  So the first letter "z" wold be sized 150% and be yellow. Or creates a style for just the first line of a block element.Also it can provide the effect of extra markup elements in your HTML without adding any markup like the first line in every paragraph would be sized 120% and be blue.