/* Type selectors */
#type-selectors {
    span {
        background-color: yellow;
    }

    strong {
        color: rebeccapurple;
    }

    em {
        color: rebeccapurple;
    }
}

/* Class selectors */
#class-selectors {
    .highlight {
        background-color: yellow;
    }
}

/* Targeting classes on particular elements */
#targeting-classes {
    span.highlight {
        background-color: yellow;
    }

    h1.highlight {
        background-color: pink;
    }
}

/* Target an element if it has more than one class applied */
#multiple-classes {
    .notebox {
        border: 4px solid #666;
        padding: 0.5em;
        margin: 0.5em;
    }

    .notebox.warning {
        border-color: orange;
        font-weight: bold;
    }

    .notebox.danger {
        border-color: red;
        font-weight: bold;
    }
}

/* ID selectors */
#id-selectors {
    #one {
        background-color: yellow;
    }

    h1#heading {
        color: rebeccapurple;
    }
}

/* Selector lists */
#selector-lists {
    span {
        background-color: yellow;
    }

    strong,
    em {
        color: rebeccapurple;
    }
}

/* Universal selector */
#universal {
    * {
        color: goldenrod;
    }
}