» CS 318 Lab 17 – Pseudoselectors and Dropdowns

CS 318 Lab 17 – Pseudoselectors and Dropdowns

April 3, 2017 by Chris Johnson. Filed under cs318, lectures, spring 2017.

Dear students,

Today’s lab is designed around something I saw in a lot of your mockups: dropdown navigation menus. There aren’t a lot of new ideas here, but application of old ones. So, I won’t talk much.

However, I did incorporate a few of the pseudoclass selectors that you met in CSS Diner. Let’s revisit some of those:

What if you only want to apply a style to the element containing A?
```
<parent>
  <child>A</child>
  <child>B</child>
</parent>
```
When might be an occasion where this selector would be useful?
show
The selector parent:first-child might be useful if you have a list of team members and the first one is the captain, whose name should appear with emphasis.
What if you only want to apply a style to the element containing A?
```
<parent>
  <child>A</child>
</parent>
<parent>
  <child>B</child>
  <child>C</child>
</parent>
```
When might be an occasion where this selector would be useful?
show
The selector parent:only-child might be useful if you have a list of two-person teams and you want to highlight all the individuals that do not yet have a partner.
What if you only want to apply a style to the element containing C?
```
<parent>
  <child>A</child>
  <child>B</child>
  <child>C</child>
</parent>
```
When might be an occasion where this selector would be useful?
show
The selector parent:last-child might be useful if you have an image slideshow with previous and next links. On the last child, you could disable the next link.
What if you only want to apply a style to the element containing B?
```
<parent>
  <child>A</child>
  <child>B</child>
  <child>C</child>
  <child>D</child>
</parent>
```
When might be an occasion where this selector would be useful?
show
The selector parent:nth-child(2) might be useful if you have a set of tables with headers, and you want to apply a particular style to the first non-header row.
What if you only want to apply a style to the elements containing A, C, or E?
```
<parent>
  <child>A</child>
  <child>B</child>
  <child>C</child>
  <child>D</child>
  <child>E</child>
</parent>
```
When might be an occasion where this selector would be useful?
show
The selector parent:nth-child(odd) might be useful if you have a table and you want to apply a style to the odd rows.
What if you only want to apply a style to the element containing A?
```
<element>A</element>
<element>B</element>
<element>C</element>
```
When might be an occasion where this selector would be useful?
show
The selector element:first-of-type might be useful if you have a list of paragraphs, and you want the first to have larger text.

Here’s your TODO list:

Read chapter 10 in your book.
Complete the Codecademy exercise on forms. It is woefully incomplete and it uses single quotes around attributes, but it’s something.
On a quarter sheet, design a form to gather input for some interesting purpose (like for vetting would-be employees, suitors, or babysitters). Make the widget types clear (text, radio, checkbox, slider, etc.).

See you next time!

Sincerely,

Lab

First create a lab17 directory. Add a partners.html and include your first names and last initials.

Spenditures

Create in spenditures.html (sic) a table displaying a breakdown of the federal budget of the United States. It looks like this:

And it interacts with the viewer like this: