2.1 +3 selectors

Advanced selectors—practice

10/10/17

As shown in Resume notes1, these are the most common types of CSS 2.1 selectors:

Universal selector
Child selectors
Adjacent-sibling selectors
Attribute selectors
Pseudo-elements (use div:before and div:after for generated content); other CSS2.1 ones were :first-line and :first-letter)

CSS3 selectors include (Q: When would each of these be useful?):

Advanced attribute selectors (they have one free video in each category generally)
^ = starts with:
a[href^="http"] {}
$ = ends with:
a[href$=".pdf""]{}
* = an instance of
a[href*="wikipedia.org"]{}
structural pseudo-class selectors
:root, also :not (e.g. p:not(.fred) {})
div:first-child {}
p:first-of-type(){} selects the first <p> element in a parent element
div:last-child {}
div:last-of-type {}
div:nth-child(i) {} selects the <div> that is the ith child e.g. div:nth-child(4) selects the <div> that is the 4th child; also can use li:nth-child(even) or (odd)
div:nth-last-child() {}
tr:nth-of-type(i){} selects the <tr> that is the ith of its type
tr:nth-last-of-type() {}
tr:nth-of-type(odd) {} also (even) or expression e.g. (2n-1)
There's also an :only-child {} (not so useful), :only-of-type {}, a :not selector
a:not ([href*="w3.org"]) {} and an :empty selector (element has no children or text)
Extensions of :hover, :focus. Think of this for form elements e.g. input:focus{background: #300;}
:target {}
Pseudo-elements now properly have two colons e.g. #header p::first-letter{color: #123;}

Use these to answer the questions below. Try to think them through (diagram the tree first) and then use Firefox or Safari to see if they work. They should be OK in IE9 with the proper <!DOCTYPE>. Try to do these with + > first-child() and * without using attribute selectors, or adding classes, which is what would have been done in a lot of cases.

<body>
<h1>Hel<strong>lo</strong> there!</h1>
<p>Welcome to CSS 3 selector practice. I'm <strong>so</strong> glad you're here! CSS 2.1 selectors include: </p>
<ul> <li><a href="child.html">Child</a></li>
<li><a href="adjacent.html">Adjacent sibling </a></li>
<li><a href="attribute.html">Attribute</a></li>
<li><a href="universal.html">And<em>universal </em> selectors </a></li>
</ul>
<div class="quirks">
<p> You will find that things go awry when you're in Quirks mode. I <strong>hate</strong> quirks mode! If everyone used standards, quirks mode wouldn't be a problem. </p>
<p> Support <em>standards</em>!</p>
</div>
<p> If you want, e-mail me at <a href="mailto:quirks@abcd.com">quirks@abcd.com</a>, but <em>not</em> if you don't support standards. </p>
<p>Have a nice day!</p>

</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>

</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>

</table>

<div class="footer"> All content copyright <a href="photo.html">this guy </a>.
</div>
</body>

Make the words "this guy" in the footer bold.
Make the word "hate" emphasized.
Add a border only to those elements that are children of the body element (not all descendants).
Make "Support<em>standards</em>!" red.
Make "universal" yellow.
Give the list item "And universal selectors " a light gray background and change the font to Georgia (CSS3 selectors).
Give the table a checkerboard pattern and a border without adding new <div> or class attributes (CSS3 selectors: start with this bit of CSS):
```
td {width: 40px;height: 40px;}    table {border-collapse: collapse; background-color: #fff;}
```

And here are the answers.

Back to home page