Nature Drawing 101: Draw a Tree! - solutions
- Draw the structure (DOM tree) of the following HTML document:
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
</head>
<body>
<header>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</header>
<section>
<h1>Welcome to my site!</h1>
<img src="/static/say_cheese.jpg">
<p>Words and <a href="/">links</a></p>
</section>
<footer>
<small>Copyright 2015 Jon Doe.</small>
</footer>
</body>
</html>
- How many children does
header
have? - Name a direct child of the
p
element. - Name a direct parent of the
p
element - What is the parent of the
html
element?
CSS Selector Challenge - solutions
Please refer to this google doc.
For each page, come up with as many CSS Selectors as you can think of to select the html elments in red, and only the elements in red.