What is the property in property binding [class.selected]?
<p>I am learning angular 2 from <a href="https://angular.io/docs/ts/latest/tutorial/toh-pt2.html" rel="noreferrer">official hero tutorial</a>. </p>

<pre><code>&lt;ul class="heroes"&gt;
      &lt;li *ngFor="let hero of heroes"
        [class.selected]="hero === selectedHero"
        (click)="onSelect(hero)"&gt;
        &lt;span class="badge"&gt;{{hero.id}}&lt;/span&gt; {{hero.name}}
      &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>I've read the guide about property binding <a href="https://angular.io/docs/ts/latest/guide/template-syntax.html#!#property-binding" rel="noreferrer">here</a>, but still couldn't understand the following code:</p>

<pre><code>[class.selected]="hero === selectedHero"
</code></pre>

<p><strong>Question 1:</strong>
I know html tag has a class property, but class property does not have a key called "selected". The class property may have a value, which is string "selected". How come this property binding is valid? </p>

<p><strong>Question 2:</strong>
How does above property binding translated to class="selected" ?</p>