Demo: add-class

Example 01: Add a CSS class to every second row.

Example 02: Add a CSS class to all strong elements on event.

Click here …

<!-- EXAMPLE 01 -->

<h3>Example 01: Add a CSS class to every second row.</h3>

<table id="example-zebra-table">
	<tr><td>Lorem ipsum dolor</td><td>Lorem ipsum dolor</td></tr>
	<tr><td>Lorem ipsum dolor</td><td>Lorem ipsum dolor</td></tr>
	<tr><td>Lorem ipsum dolor</td><td>Lorem ipsum dolor</td></tr>
	<tr><td>Lorem ipsum dolor</td><td>Lorem ipsum dolor</td></tr>
	<tr><td>Lorem ipsum dolor</td><td>Lorem ipsum dolor</td></tr>
	<tr><td>Lorem ipsum dolor</td><td>Lorem ipsum dolor</td></tr>
</table>
 
 
<!-- EXAMPLE 02 -->

<h3>Example 02: Add a CSS class to all strong elements on event.</h3>

<p id="example-strong-link"><a>Click here …</a></p>
 
<table id="example-strong-elements">
	<tr><td><strong>Lorem</strong> ipsum dolor</td><td>Lorem <strong>ipsum</strong> dolor</td></tr>
	<tr><td>Lorem <strong>ipsum</strong> dolor</td><td>Lorem ipsum dolor</td></tr>
	<tr><td>Lorem ipsum dolor</td><td>Lorem <strong>ipsum</strong> dolor</td></tr>
	<tr><td>Lorem ipsum <strong>dolor</strong></td><td>Lorem ipsum dolor</td></tr>
	<tr><td>Lorem <strong>ipsum</strong> dolor</td><td><strong>Lorem</strong> ipsum dolor</td></tr>
	<tr><td><strong>Lorem</strong> ipsum dolor</td><td>Lorem <strong>ipsum</strong> dolor</td></tr>
</table>

tr.blue td {
	background-color: #D0E3FF;
	color: #FFFFFF;
}
 
.red {
	color: red;
}

/* EXAMPLE 01 */

#example-zebra-table tr:every-second {
	add-class: blue;
}
 
/* EXAMPLE 02 */

#example-strong-link a:active => #example-strong-elements strong {
	add-class: red;
}