[SalesForce] Issue with CSS selector

I'm having an issue with CSS. It seems to only select items with the :last-child pseudo selector.

My markup:

<tr class="emtpy-row">
    <td></td>
    <td></td>
</tr>

My CSS:

.THIS .empty-row td,
.THIS .emtpy-row td:last-child {
    background-color: hotpink;
}

But, only the second td turns pink.

This is very strange to me. Anyone have an idea what's going on?

Seems you have a typo. Your CSS says .THIS .empty-row td,, but the class is emtpy-row.

The :last-child pseudo-selector does not have the typo.

There are a few issues in your example:

init is not synchronized in any way with dynamic loading of javascript or rendering which is why <ltng:require afterScriptsLoaded="{!c.yourAfterScriptLoadedHandler}"> exists (it handles both of those challenges by sequencing one or more script onload events and the rendering lifecycle of lightning).
init handlers are called long before rendering happens which means that there is a timing issue there too.
S1/LEX has built in tab content caching (I believe it hold on to the last 5 tabs' content) and init is only called once in a component's lifecycle (right after creation)
manipulating DOM elements that are created on your behalf by the framework puts you at odds with the auto rerendering process and direct CSS modifications are likely to be unceremoniously overwritten. If you really need to do this it should be done in afterRender()

You are looking for the :active and :hover css selectors I guess:

.THIS .ColorBlue,
.THIS .ColorBlue:active,
.THIS .ColorBlue:hover {
    background-color: rgb(0, 95, 178);
}

EDIT

This is the final answer that works great:

.THIS.ColorBlue,
.THIS.ColorBlue:active,
.THIS.ColorBlue:hover {
    background-color: rgb(0, 95, 178) !important;
}