Week 3 Practice Quiz

Calculate the spcificity of each of the following selectors. Please format your answer in either hyphen- or comma-separated notation (e.g., 0-0-0 or 0,0,0).
1. body#home
  1,0,1
2. div.example strong
  0,1,2
3. html body div table tr td ul li ol li em
  0,0,11
4. p.warning + p
  0,1,2
5. *:first-child > a:hover
  0,2,1
6. p#help:first-line
  1,0,1
7. p[id="help"]:first-line
  0,1,1
8. a:visited:focus *.link
  0,3,1
9. div > * + ul > a
  0,0,3
10. div[class~="urgent"][title~="notice"] p
  0,2,2
Explain why hyperlinks don't inherit color from their ancestor elements.
- Hyperlinks are styled by the user agent (e.g., a Web browser) by default. These styles are usually set via a preference dialog, but could also be affected by a user stylesheet. Because these styles are explicitly assigned (as though the UA had a stylesheet which read something like a:link {color: blue;}), these styles override any inherited values for the same properties which are "pre-styled." Therefore, in the case of some properties (usually color) authors must explicitly assign styles to hyperlinks in order to influence them.
Consider this markup:
```
<body>
<h1 id="pg-title">Page Title</h1>
<p>The lead paragraph</p>
<p class="main-point">Allow me to make my main point here.</p>
<div id="footer">copyright somebody</div>
```
Given the following stylesheet, how will the "main-point" paragraph be styled? You need only describe the effects of the styles shown here; do not worry about taking browser defaults into account.
```
body {color: black; font-weight: normal;}
h1#title + p {font-style: italic; color: gray;}
p.main-point {font-weight: bold; margin-left: 2em;}
p + * {color: purple; margin-top: 0.25em;}
p {color: black; font-style: normal;}
```
- The styles which apply the paragraph with a class of main-point are:
```
margin-top: 0.25em;
color: black; 
font-style: normal;
font-weight: bold; 
margin-left: 2em;
```
The second rule (h1#title + p) was a red herring; it doesn't apply to the "main-point" paragraph at all, and in fact doesn't apply to anything in the markup I provided. The declarations which could have been inherited from the body element were also sort of red herrings, since both of them were overridden by explicitly assign values later on. Below, I've struck out the declarations which were overridden by declarations have higher specificity (or which didn't apply at all).
```
body {color: black; font-weight: normal;}
h1#title + p {font-style: italic; color: gray;}
p.main-point {font-weight: bold; margin-left: 2em;}
p + * {color: purple; margin-top: 0.25em;}
p {color: black; font-style: normal;}
```
I expect the most surprising thing to be that the purple color lost out to the black. Both selectors (p and p + *) have the same specificity (0,0,1) so the rule specified later wins out-- and thus black trumps purple.