michaelarob / use-all-the-selectors

A CSS exercise refreshing and teaching about all the different selectors.

summary	time	deliverables
A CSS exercise refreshing and teaching about all the different selectors.	30 minutes	1 HTML file, 1 CSS file

Use all the selectors!

Overview

• Fork this repository.
• Create a new CSS file named main.css in your css folder—it’s already connected in the HTML.
• Write the CSS selectors described below and add the requested properties.
• Double check that it matches the included screenshot.
• Do NOT change the HTML.
• Run it through Markbot and make sure it passes all the checks.

---

CSS selectors

1. Select body — add background-color: #fdf6e3;
2. Select header and footer — add font-size: 1.5rem;
3. Select ul inside nav — add font-family: sans-serif;
4. Select the logo by class — add text-transform: uppercase;
5. Select the class wrapper — add background-color: #eee8d5;
6. Select the IDs contents, favs, facts and types — add color: #93a1a1;
7. Use a child (or direct descendant) selector to get .dfn inside the wrapper — add background-color: #b58900;
8. Use an adjacent selector to get the second strong inside .dfn — add color: #fff;
9. Select all the a tags, but not the a tags with the class of .no-highlight — add background-color: #719e07;
10. Select the link with rel="external" attribute — add background-color: #2694d8;
11. Select the first li inside the ol — add color: #719e47;
12. Select the last li inside the ol — add color: #2aa198;
13. Select every odd li inside .types — add background-color: #657ba3;
14. Select every even li inside .types — add background-color: #586e75;
15. Select every 3rd li inside .types — add background-color: #d04b16;

---

Goal

Visually match the images in the “screenshots” folder.

• Final screenshots in the “screenshots” folder.

---

Hand in

Drop this folder into your Markbot application. Make sure to fix all the errors. And submit to Canvas using Markbot.