1. MORE CSS FORMATTING

2. DOM: Document Object Model

3. What are trees?

4. Or more like this…

5. A Better Example Sam & Bessie Al & Jewel Paul & Dawn Leo & Bea
Abby & Phil
Peter & Cate
Kari &
Hal
Mark &
Dina
Tess & John
Barb &
Ray
Sue
Dan & Cora
Stu
&
Chi
Mary
Leah Al
Lori
Jen
Andy
Jake
Noah
Ben
Amy Di
Sara
Moe
Andy
Lady

6. Descendents Sam & Bessie Al & Jewel Paul & Dawn Leo & Bea Abby & Phil
Peter & Cate
Kari &
Hal
Mark &
Dina
Tess & John
Barb &
Ray
Sue
Dan & Cora
Stu
&
Chi
Mary
Leah Al
Lori
Jen
Andy
Jake
Noah
Ben
Amy Di
Sara
Moe
Andy
Lady

7. Children Sam & Bessie Al & Jewel Paul & Dawn Leo & Bea Abby & Phil
Peter & Cate
Kari &
Hal
Mark &
Dina
Tess & John
Barb &
Ray
Sue
Dan & Cora
Stu
&
Chi
Mary
Leah Al
Lori
Jen
Andy
Jake
Noah
Ben
Amy Di
Sara
Moe
Andy
Lady

8. Children Sam & Bessie Al & Jewel Paul & Dawn Leo & Bea Abby & Phil
Peter & Cate
Kari &
Hal
Mark &
Dina
Tess & John
Barb &
Ray
Sue
Dan & Cora
Stu
&
Chi
Mary
Leah Al
Lori
Jen
Andy
Jake
Noah
Ben
Amy Di
Sara
Moe
Andy
Lady

9. Siblings Sam & Bessie Al & Jewel Paul & Dawn Leo & Bea Abby & Phil
Peter & Cate
Kari &
Hal
Mark &
Dina
Tess & John
Barb &
Ray
Sue
Dan & Cora
Stu
&
Chi
Mary
Leah Al
Lori
Jen
Andy
Jake
Noah
Ben
Amy Di
Sara
Moe
Andy
Lady

10. HTML Creates a tree: DOM
HTML tags create a tree
Called the DOM
(Document Object Model)
Formatting correctly makes it obvious!

11. HTML body div footer header h1 ul div section p table p ul figure litr tr li li
div td td td td td td

12. HTML body div footer header h1 ul div section p table p ul figure
child li li p p tr tr li li
div td td td td td td
siblings

13. Using the DOM
CSS will allow us to format selectively based on the tree

14. CSS Selectors context tag { context > tag { Context + tag {
Applies to any tag inside context
Space is a descendant selector
context > tag {
Applies to any tag directly inside context
> is a child selector
Context + tag {
Applies only to a tag that DIRECTLY FOLLOWS a context
+ is an adjacent sibling selector

15. HTML body div footer header h1 ul div section p table p ul figure litr tr li li
div td td td td td td

16. Child pseudo elements W3schools
first-child, last-child, nth-child(), nth-last-child()
() options:
Number
Even-odd
Formula
Every 3rd would be 3n+0
4, 7, 11 would be 3n+1
nth-last-child counts from end