Demo: Selector Pseudo-Classes

Example 01: Add a CSS class to the first P element.

Example 02: Add a CSS class to the last P element.

Example 03: Add a CSS class to every second P element.

Example 04: Add a CSS class to all P elements if anchor is set.

The anchor link

Example 05: Add a CSS class to next P element on click.

Click here to highlight P tags forwards …

Example 06: Add a CSS class to previous P element on click.

Click here to highlight P tags backwards …

<!-- EXAMPLE 01 -->

<h3>Example 01: Add a CSS class to the first P element.</h3>

<div id="example-first">
	<p>Revenge is a dish which is best served cold.</p>
	<p>Better to die on your feet than live on your knees.</p>
	<p>When a warrior goes into battle, he does not abandon his friends.</p>
</div>
 
<!-- EXAMPLE 02 -->

<h3>Example 02: Add a CSS class to the last P element.</h3>

<div id="example-last">
	<p>Revenge is a dish which is best served cold.</p>
	<p>Better to die on your feet than live on your knees.</p>
	<p>When a warrior goes into battle, he does not abandon his friends.</p>
</div>
 
<!-- EXAMPLE 03 -->

<h3>Example 03: Add a CSS class to every second P element.</h3>

<div id="example-every-second">
	<p>Revenge is a dish which is best served cold.</p>
	<p>Better to die on your feet than live on your knees.</p>
	<p>When a warrior goes into battle, he does not abandon his friends.</p>
	<p>That is not my dagger protruding from your midsection.</p>
	<p>If winning is not important, why keep score?</p>
</div>
 
<!-- EXAMPLE 04 -->

<h3>Example 04: Add a CSS class to all P elements if anchor is set.</h3>

<p id="example-anchor-link"><a href="pages/selector-pseudo-classes-demo/redirect.html#my-anchor">The anchor link</a></p>
 
<div id="example-anchor">
	<a name="my-anchor"></a>
	<p>Revenge is a dish which is best served cold.</p>
	<p>Better to die on your feet than live on your knees.</p>
	<p>When a warrior goes into battle, he does not abandon his friends.</p>
	<p>That is not my dagger protruding from your midsection.</p>
	<p>If winning is not important, why keep score?</p>
</div>
 
<!-- EXAMPLE 05 -->

<h3>Example 05: Add a CSS class to next P element on click.</h3>

<p id="example-forward-link"><a>Click here to highlight P tags forwards …</a></p>
 
<div id="example-forward">
	<p>Revenge is a dish which is best served cold.</p>
	<p>Better to die on your feet than live on your knees.</p>
	<p>When a warrior goes into battle, he does not abandon his friends.</p>
	<p>That is not my dagger protruding from your midsection.</p>
	<p>If winning is not important, why keep score?</p>
</div>
 
<!-- EXAMPLE 06 -->

<h3>Example 06: Add a CSS class to previous P element on click.</h3>

<p id="example-backward-link"><a>Click here to highlight P tags backwards …</a></p>
 
<div id="example-backward">
	<p>Revenge is a dish which is best served cold.</p>
	<p>Better to die on your feet than live on your knees.</p>
	<p>When a warrior goes into battle, he does not abandon his friends.</p>
	<p>That is not my dagger protruding from your midsection.</p>
	<p>If winning is not important, why keep score?</p>
</div>

.red {
	color: red;
}

/* EXAMPLE 01 */

#example-first p:first {
	add-class: red;
}
 
/* EXAMPLE 02 */

#example-last p:last {
	add-class: red;
}
 
/* EXAMPLE 03 */

#example-every-second p:every-second {
	add-class: red;
}
 
/* EXAMPLE 04 */

#example-anchor-link a:anchor => #example-anchor {
	add-class: red;
}
 
/* EXAMPLE 05 */

#example-forward-link a:active => #example-forward p:forward {
	add-class: red;
}
 
/* EXAMPLE 06 */

#example-backward-link a:active => #example-backward p:backward {
	add-class: red;
}