CSS Level 2
Exam 3
- Calculate the specificity of each of the following selectors. Please format your answer in either hyphen- or comma-separated notation (e.g., 0-0-0-0 or 0,0,0,0).
ul li em
: 0,0,0,3
body#home *.example
: 0,1,1,1
p.footer a:hover
: 0,0,2,2
h1 + * p
: 0,0,0,2
body > .aside > ul a:visited
: 0,0,2,3
a:link:hover img[alt]
: 0,0,3,2
div[title] + * #que > li
: 0,1,1,2
p[class~="help"]:first-child:first-line
: 0.0,2,2
* + * > * * > * + * *
: 0,0,0,0
html:lang(en) body div.ii table tr td p:first-letter
: 0,0,2,8
- Explain why HTML-based presentational hints (e.g., font) are given a specificity of 0 (zero) in CSS2.
Because CSS declarations in the author style sheet always override them?
- Given the following document markup, list the final set of declarations which apply to each of the three numbered elements below. Consider the specificity of selectors, possible inheritance, and the effects of inline styles.
- Allow me to make my main point here :
style="font-weight: bold; font-style: italic;"
- the second point :
h1[id|="pg"] + * + div {font-weight: normal;}
li {color: maroon;}
- copyright somebody :
div {font-weight: bold;}
Exam 2
- Describe the following selectors
- Any
a
element with a class
attribute that contains the word external
and has been visited.
- Any
a
element that hasn't been visited and is being hovered.
- Any
strong
element which is a descendant of any element with a href
attribute which is focus
.
- Any
a
element which hasn't been visited and is a first child of a descendant of a td
element which class is navbar
.
- Any
li
element that is a first child and a desendant of a ul
element directly following a h1
element that is a first child of a descendant of a div
element.
- The first displayed letter of any element which is in a language or locale whose identifier equals
fr
or begins with fr-
.
- The first displayed line of any element which is a child of any element which is a descendant of a
div
element directly following an h1
element.
- Any
p
element directly following any element with a src
attribute and is a descendant of a div
element directly following a p
element, direcly following an h2
element.
- Any
em
element with a class
attribute and is a child of a span
element which is a descendant of a td
element with a class
attribute that equals negative
.
- Any
td
element with a class
attribute that contains the word total
, and is a descendant of a tr
element with a class
attribute that equals odd subsummary
and is a descendant of a table
which is a first child of another element.
- Explain the difference between a pseudo-class and a pseudo-element. List at least three of each type of selector.
To attach style to an element, it has to be part of a document tree, pseudo-elements and pseudo-classes enable formatting based on information not included in a document tree.
- Pseudo-elements refers to elements that do not really exist and as such are not accessible through normal document grammar or are outside the source document.
- Examples are:
:first-letter
, :first-line
or :before
- Pseudo-classes refers to classes that do not really exist and are based on elements carateristics other than their name, attributes or content.
- Examples are:
:first-child
, :link
or :hover
- Explain what, if anything, is wrong with the following selectors being applied to an HTML document. Browser limitations should not figure into your answers.
- pseudo-elements can only appear at the end of a selector chain, so
[class="aside"]:first-line
cannot be followed by em
.
- There is an element missing between
+
and >
.
- There should be a tilde-equal sign before
"white"
and not a -=
.
- Can't see anything wrong with that one...
:hover
cannot exist on it's own, it should be a:hover
or *:hover
.
- For each question, write a single rule (without using a grouped selector) to accomplish the given task with the markup that follows
- a. Uppercase the word "so" in the first paragraph
h1 + p strong:first-child {text-transform: uppercase;}
- b. Color green the word narcissistic.
div.rant ul li:first-child + li + li {color:green;}
.
- c. Make the link "my cat" purple when it's been visited, using a selector that begins with
div
and that contains a :first-child
somewhere within it.div.rant strong:first-child + a:visited {color:purple;}
- d. Boldface the first letter of the paragraphs beginning with "Welcome to" and "The other day" using a single selector.
- Sorry, I can't figure this one out...This is the closest I can get:
body > ul + *:first-letter {font-weight:bold;}
- e. Uppercase the strong elements containing the text "lo" and "really" (but no others) using a single selector.
- I'm afraid I can't figure this one out either...this the closest I can get:
*:first-child > *:first-child {text-transform: uppercase;}
Exam 1
- Describe the following selectors
- A
li
element that is a descendant of a ul
element, that is a descendant of div.aside
element, that is a descendant of a body
element.
- A
table
element directly following a div
element.
- A
table
element that is a child of a div
element.
- Any element directly following an
h1
element.
- A
p
element directly following a p
element directly following any element that is a descendant of a div
element.
- A
li
element which class is move
and is a child of an ul
element directly following a p
element which id is intro
and that is directly following a h1
element.
- An
a
element that is a child of any element that is a descendant of a li
element that is a child of an ol
element that is a descendant of a li
element that is a child of an ul
element.
- Any element directly following a
p
element directly following any element that is a child of a div
element directly following a p
element, directly following an h1
element that is a child of a body
element.
- Any element that is a descendant of a
li
element that is a child of an ul
element that is a descendant of div
element that is a child of a td
element that is a descendant of a table
element directly following any element directly following a h3
element directly following any element that is a child of any element that is a descendant of a body
element.
- Any element?
- Briefly explain the difference between
div *
and div*
The first one is correct and indictaes that div
is an ancestor of an element. The second one doesn't mean anything.
- Briefly explain the difference between
td > ul
and td>ul
.
There isn't any.
- Briefly explain the difference between
*#sidebar
and #sidebar
.
There isn't any.
- Write rules to accomplish the following tasks.
-
a.Put a border around the "rant."
div.rant {border-style: solid; border-width: thin; border-color: green;}
- b.Strikethrough all of the em elements found in the "rant."
div.rant em {text-decoration: line-through;}
- c.Make the word "really" in "really lame" red.
div.rant > ul > li > em {color: red;}
- d.Underline the word "there" in "So there."
div.rant >p em {text-decoration: underline;}
- e.Boldface the mailto: link near the end of the page.
p > a {font-weight: bold;}
- f.Boldface the paragraph "Have a nice day!"
body > p + p {font-weight: bold;}
- g.Set a left margin of 1.5em for the sub-category lists for both pictures and poetry.
body > ul >li > ul > li {margin-left: 1.5em;}
- h.Set a left margin of 2em for only the poetry sub-category list.
body > ul > li + li > ul > li {margin-left: 2em;}
- i.Uppercase the word "beer."
body> ul ul > li+ li + li > a {font-variant:small-caps;}
- j.Set a border around the last three category list items near the beginning of the page, without having that change carry into the sub-category lists. (I'm not sure I understand what you mean, but this is the closest I could come up with)
body> ul > li+li {border-style:solid; border-width: thin; border color:green;}