@HostBinding class assignment not respecting CSS :nth-child
<p>I'm running into the following issue which I can't think of a way around:</p>

<p>I have a the following application structure:</p>

<pre><code>AppComponent (access to Redux store)
   ||
CardStackComponent
   ||
CardComponent (many cards in a stack)
</code></pre>

<p>each <code>CardComponent</code> can have three states: accepted, rejected, or neither, represented by three classes: <code>card--accepted</code>, <code>card--rejected</code>, and <code>card--in-stack</code>.</p>

<p>There are buttons the user can click to accept or reject the topmost <code>CardComponent</code>, which bubbles an event up to AppComponent.  AppComponent then uses a reducer to update the value of an accepted and rejected property on the Object that is used to render the <code>CardComponent</code>.  In <code>CardComponent</code> I have three <code>@HostBinding</code> decorators which are used to add/remove classes from the <code>CardComponent</code> host element.</p>

<pre><code>@HostBinding('class.card--accepted') accepted: boolean = false;
@HostBinding('class.card--rejected') rejected: boolean = false;
@HostBinding('class.card--in-stack') inStack: boolean = true;
</code></pre>

<p>the classes are being added/removed as expected as I hit the buttons to accept/reject the cards, however, there's one strange issue: To allow the cards to stack, I'm using CSS to position the top three cards absolutely on top of eachother, and hide any others.  This works perfectly and is achieved using <code>:nth-child</code></p>

<pre><code>card--in-stack {
    &amp;:nth-child(1) {...}
    &amp;:nth-child(2) {...}
    &amp;:nth-child(3) {...}
    &amp;:nth-child(n+4) {...}
}
</code></pre>

<p>however, when the top card is accepted, the class <code>card--in-stack</code> is removed and the class <code>card--accepted</code> is added.  This means that what was the second card in the stack (<code>card--in-stack:nth-child(2)</code>) should now be <code>card--in-stack:nth-child(1)</code>, the one below it should now be <code>card--in-stack:nth-child(2)</code>, and so on.  Inspecting the second card in the stack (the one under the card that was just accepted), it still has the <code>card--in-stack:nth-child(2)</code> styles being applied, even through it is the first element on the page with class <code>card--in-stack</code>.  Is there a way to get the CSS to respect <code>:nth-child</code> when changing classes on a component using the <code>@HostBinding</code> decorator?</p>