div.message {   
    font-size: 12pt;
}

footer .message { 
    color: #888;
}

footer div.message {
    color: #888;
}

h2, h2.message, h3 { 
    color: #888;
}

div.message:hovered {
    color: #f00;
}

footer .message #text {
    color: #369;
}

.message:hover {
    color: #963;
}

.message[data-attr='42'] {
    color: #AAA;
}

.sublist H4 { /* h4 descendant */
    color: #BBB;
}

.sublist H4 p { /* h4 is _NOT_ the rightmost type selector */
    color: #111;
}

h4.good { /* h4 _IS_ rightmost type selector */
    color: #222;
}

h4 .bad { /* h4 is _NOT_ rightmost type selector */
    color: #444;
}

h4 p .description { /* h4 is _NOT_ the rightmost simple selector */
    color: #333;
}

h4#sidebar { /* Has an ID selector */
    color: #888;
}

h4[data-attr='42'] { /* Has an attribute selector */
    color: #369;
}

h4:first-child { /* Has a pseudo-selector */
    font-size: 20pt;
}

#h4 { /* h4 as an ID */
    color: #000
}

.h4 { /* h4 as a class */
    color: #000
}

body[foo='0'] { /* h4 as an attribute name */
    color: #000
}

h40 { /* h4 substring */
    color: #000
}

_h4 { /* h4 substring */
    color: #000
}