Week 10: CSS Combinators, Lists, Tables

In this lesson you'll learn how to create complex selectors by using combinators and pseudo selectors. You will then learn to use those selectors to add interesting styles to lists and tables. You'll also learn a few new properties that are specific to lists and tables.

Combinators and Pseudo Seledtors

Notes

• Combinators
• Pseudo-Classes
• Pseudo-Elements

List and Table Styling

Notes

• Styling Lists
• Styling Tables

Resources

• References
  • MDN: Combinators
  • MDN: Pseudo-Classes
  • MDN: Pseudo-Elements
• Tools:
  • HTML Validator - always validate all of your HTML.
  • CSS Validator - always validate all of your CSS.
  • Lorum Ipsum Text Generator - there are other ones, I like this one. Feel free to use a different one. Generates filler text for web pages. There are even some funny ones.

Homework

Practice/Study Questions

• Complete this week's worksheet. Note that worksheets can be completed during class or after class. They can be completed using your own lecture notes or from the provided materials. Worksheets are not directly graded, but the questions might appear on exams and other evaluations. Ask the professor if you would like feedback on your worksheet (you must make an attempt on the worksheet in order to receive feedback).
• Answer the following questions where you take your class notes (form your answers using YOUR OWN WORDS; you might have to search for answers in the resources above). Feel free to DISCUSS the answers with your classmates.
  1. What are combinators? What are the 4 combinators and what does each one do?
  2. What are psuedo elements used for? What are pseudo classes used for?
  3. What's the difference between :last-child/first-child and :last-of-type/first-of-type?
  4. What's the difference between p:first-child and p :first-child?

Practice Exercises

For each exercise, validate the HTML using the HTML Validator. Fix all problems until you get no errors.

1. If you haven't already done so, create a sub-directory in your local workspace and in your server workspace (off /syst10049) called "week9". Feel free to add an extra level for all of your practice exercises (e.g. /exercises).
   • For each practice exercise in each lesson, you'll usually be asked to create an exercise directory for that project, such as "/exercise1".
   • It is assumed that you will create the exercise project directory in both your local workspace and in your server workspace using the appropriate and standard directory structure discussed in class.
2. Combinators: Go to this Codepen and follow the instructions in the CSS comments.
3. Combinators: Go to this Codepen and follow the instructions in the CSS comments.
4. Pseudo Classes: Go to this Codepen and follow the instructions in the CSS comments.
5. Pseudo Classes: Go to this Codepen and follow the instructions in the CSS comments.
6. List Styles: Go to this Codepen and and follow the instructions in the CSS tab.
7. List Styles and Counters: Go to this Codepen and add the necessary styles to create nested lists similar to this:

   

8. Table Styles: Go to this Codepen and follow the instructions in the CSS tab.
9. Table Styles and Pseudo Classes: Go to this Codepen and follow the instructions in the CSS comments.
10. Table Styles and Pseudo Classes: Go to this Codepen and follow the instructions to create a checkerboard like this:

    

11. Pseudo Classes and Tables: this Codepenand follow the instructions in the CSS comments.