以上為 準類別（Pseudo-classes）的子元素準類別。主要用在控制子元素的展現風格。
指定的元素為父元素的第一子元素時，會應用此設計的風格。
- 風格用法：
<style type='text/css'>
.fst I:first-child {background:green;
color:red;
font-size:140%
}
</style>
<div class=fst>
<i>第一子元素</i>
<i>第二子元素</i>
<i>第三子元素</i>
</div> - 執行結果：
第一子元素 第二子元素 第三子元素
- IE6 無此項；IE8, Firefox3.0, Safari, Chrome 都成功。
指定的元素為父元素的最後一個子元素時，會應用此設計的風格。
- 風格用法：
<style type='text/css'>
.lst I:last-child {background:green;
color:red;
font-size:140%
}
</style>
<div class=lst>
<i>第一子元素</i>
<i>第二子元素</i>
<i>第三子元素</i>
</div> - 執行結果：
第一子元素 第二子元素 第三子元素
- IE6 無此項；Firefox3.0, Safari, Chrome 都成功。
:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。
- 風格用法：
<style type='text/css'>
.hvr * {border:solid 1px red}
.hvr:hover :first-child
{background:red}
.hvr:active :last-child
{background:blue}
</style>
<div class=hvr>
<i>第一子元素</i>
<i>第二子元素</i>
<q>第三子元素</q>
</div> - 執行結果：
第一子元素 第二子元素
第三子元素
| child（你正在看 第一頁） | : | 第一頁 | 第二頁 |
