/* 1 */
.page-wrapper {
    background-color: #eee;
}
* {
    /* 2 */
    font-family: Arial, Helvetica, sans-serif;
    /* 3 */
    line-height: 1.4em;
}
/* 4 */
.header {
    background-color: #ccc;
}
/* 5 */
.logo,
/* 10 */
.footer {
    text-transform: uppercase;
}
/* 6 */
.logo {
    color: green;
}
/* 7 */
.content { 
    /* actual class is called "content clearfix" which had me confused, but selectors look for classes including the string, so its not excluding other characters i suppose, since this works */
    background-color: #fff;
}
/* 8 */
.footer {
    /* remember "color" is specifically font color */
    color: #ccc;
}
/* 9 */
.footer span:nth-child(3) {
    color: #fff;
    background-color: #000;
}
/* 11 */
.footer span:not(:first-child):before {
    content: "|";
}
/* 14 */
.menu *{
    text-decoration: none;
}
/* 12 */
.menu h3 {
    color: orange;
}
/* 15 */
.menu li:last-child * {
    color: green;
}
/* 13 */
#about-us li:nth-child(2)::marker {
    color: red;
}
/* 16 */
.menu a::before {
    content: url(/css-selectors-a-z-materiale/img/icon-plus.png);
}
/* 17 */
.main h2 {
    background-color: orange;
}
/* 18 */
.main h2:nth-of-type(3) {
    background-color: red;
}
/* 19 */
.main p:first-of-type {
    color: red;
}
/* 20 */
.main h2 + p {
    color: blue;
}
/* 21 */
.main ol ~ h2 {
    color: green;
}
/* 22 */
.main ul + p {
    color: orange;
}
/* 23 */
.main li:nth-child(even) {
    background-color: #eee;
}
/* 24 */
/* creates a pseudo-element before list items containing links that end with ".pdf" */
.main li:has(a[href$=".pdf"])::before {
    content: url(/css-selectors-a-z-materiale/img/icon-pdf.gif);
}
/* what happened to 25? */
/* 26 */
.sidebar:nth-child(3) ul:nth-of-type(1) li:nth-child(3) a {
    color: red;
}
/* 27 */
.sidebar:nth-child(3) li:nth-child(2)::marker {
    color: green;
}
/* 28 */
.sidebar:nth-child(3) a {
    color: yellow;
}
/* 29 */
.sidebar:nth-child(3) form {
    background-color: #eee;
}
/* 30 */
.sidebar:nth-child(3) form input[type="text"]:focus {
    background-color: #3d0;
}