Week 2 Exam

Selectors can be described in a fairly straightforward way, as long as you work backwards. For example, the selector body div > * can be described as "any element that is a child of a 'div' that is a descendant of the 'body' element." Describe the following selectors.

a.external:visited

CSS1 way to do a pseudo class. It says any visited link with the class of external.
a:link:hover

Any unvisited link that is hovered with the mouse pointer.
[href]:focus strong

Any strong element that is a descendant of any element with the attribute of href that has attained focus.
td.navbar a:first-child:link

Any anchor element that is an unvisited link that is a first child (pseudo-class selector) and a descendant of a table data element with the class of navbar.
div h1:first-child + ul li:first-child

Any list item that is a first child and descendant of an unordered list immediately preceded by a first child heading 1 element that is a descendant of a div element.
*:lang(fr):first-letter

The first letter (pseudo element) of any element that is in the language of French (pseudo class). This means the element has the attribute of lang which has a value of fr for French.
h1 + div * > *:first-line

The first line (pseudo element) of any element that is a child of any element that is a descendant of a div element that is immediately preceded by a heading 1 element.
h2 + p + div *[src] + p

A paragraph element that is immediately preceded by any element with a src attribute (no matter what it's value) that is a descendant of a div element that is immediately preceded by a paragraph element that is immediately preceded by a heading 2 element.
td[class="negative"] div > em[class]

Any emphasis element with a class attribute (whatever the value) that is a child of a div element that is a descendant of a table data element with a class attribute that equals "negative".
table:first-child tr[class="odd subsummary"] td[class~="total"]

Any table data element with a class attribute that contains the value of "total" that is a descendant of a table row element with a class attribute that equals "odd subsummary" and descendant of a first child table element.

Explain the difference between a pseudo-class and a pseudo-element. List at least three of each type of selector.

"A pseudo-elements effects can be most accurately described as invoking a nonexistent element and styling it.". Pseudo-elements have stricter rules than pseudo-classes. Pseudo-elements may only appear at the end of a selector chain. Here is an example of an illegal selector: p:first-letter strong {font-size: 100%} and :first-letter is the pseudo-element. So :first-letter, :first-line, :before, :after, :right, :left and :first are all pseudo-elements. Pseudo-elements cannot be combined in the same selector, here is an illegal example: p:first-line:first-letter and the pseudo-element selector must come after any class or ID names in that selector chain. Here is a legal example: div.answer:first-letter { font-size: 110%; font-weight: bold; color:#990099; }

Pseudo-classes have less strict rules compared to pseudo-elements. They can appear almost anywhere in a selector chain and you can combine more than one at a time. "They operate as if phantom classes were added to various elements.". a:link { color: blue; } is a pseudo-class that would make all unvisited links blue, whereas a:visited { color: purple; } would make all visited links purple. Here is an example of another pseudo-class :hover that is combined with another pseudo-class: a:visited:hover { background-color: black; color: white; }. Other pseudo-classes are :active, :focus, and :lang

Explain what, if anything, is wrong with the following selectors being applied to an HTML document. Browser limitations should not figure into your answers.

div + [class="aside"]:first-line em
The pseudo-element :first-line must be the last selector before the curly brackets. So em cannot be after it.
ul > * li * + > *[class] *
There are two selectors in a row (> and +) which is not legal. It makes no sense that an element with an attribute of class can be a child of immediately preceding . . .
table > td[bgcolor-="white"]
This selector has a hyphen not a tilde before the equal sign and there is no such thing
p[id] em.stronger a[href]
This says any anchor element with the attribute of href that is a descendant of an emphasis element with the class of stronger which is a descendant of a paragraph element with an attribute of ID. This is ok.
div#gallery > :hover img[alt|="fig"]
This says any img element with the attribute of alt whose value equals fig or begins with fig-. This element would be a descendant of a pseudo-class of :hover. there's nothing wrong - it's a legal selector. :hover is the same as *:hover.

For each question, write a single rule (without using a grouped selector) to accomplish the given task with the markup that follows. Note that in some cases it may be possible to accomplish a task in multiple ways.

***Write a singe rule for the following markup***

Uppercase the word "so" in the first paragraph.
Color green the word "narcissistic."
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.
Boldface the first letter of the paragraphs beginning with "Welcome to" and "The other day" using a single selector.
Uppercase the strong elements containing the text "lo" and "really" (but no others) using a single selector.

<body>
<h1>Hel<strong>lo</strong> there!</h1>
<p>Welcome to my Web site.  I'm <strong>so</strong> glad 
you're here!  On this site you can find:
</p>
<ul>
<li><a href="mepics.html">Pictures of me</a>...
<ul>
<li>...with <a href="friendpics.html">friends</a></li>
<li>...with <a href="fampics.html">family</a></li>
<li>...with <a href="beerpics.html">beer</a></li>
</ul>
</li>
<li><a href="fluffpics.html">Pictures of my cat Fluffy</a></li>
<li><a href="poetry.html">My poetry</a>...
<ul>
<li>...written to <a href="seriouspoetry.html">be serious</a></li>
<li>...written to <a href="funnypoetry.html">be funny</a></li>
</ul>
</li>
<li><a href="favlinks.html">My <em>favorite</em> Web sites</a></li>
</ul>
<div class="rant">
Want to hear something annoying?
<p>
I mean, <strong>really</strong> annoying?
</p>
Well then, here goes.
<p>
The other day someone wrote telling my site was:
</p>
<ul>
<li>lame</li>
<li>stupid</li>
<li>narcissistic</li>
<li><em>really</em> lame</li>
</ul>
<p>
I <strong>hate</strong> that!  Why do people do things like that?  
After all, if you don't like the Web site, don't come here.  I'm proud of 
<a href="fluffpics.html">my cat</a> and there's nothing wrong with
naming a mynx Fluffy anyway.
</p>
<p>
So <em>there</em>.
</p>
</div>
<p>
Sorry about that little bit of ranting.  I promise to be more cheerful in the 
future.  If you want, e-mail me at <a href="mailto:me@my.web.site">me@my.web.site</a>, 
but <em>not</em> if you're going to complain.
</p>
<p>Have a nice day!</p>
<div class="footer">
All content copyright <a href="mepics.html">me</a>, on the date I 
wrote it.
</div>
</body>