以上為 準類別（Pseudo-classes）的子型態準類別。主要用在控制子元素的展現風格。另外有一組 子元素準類別 也是控制子元素的風格。
父元素的子元素清單中，第一個有此型態的子元素，會應用此設計的風格。
- 風格用法：
<style type='text/css'>
.fst I:first-OF-TYPE {background:green;
color:red;
font-size:140%
}
</style>
<div class=fst>
<q>第一個 Q 元素</q>
<i>第一個 I 元素</i>
<i>第二個 I 元素</i>
<i>第三個 I 元素</i>
<q>第二個 Q 元素</q>
</div> - 執行結果：
第一個 Q 元素
第一個 I 元素 第二個 I 元素 第三個 I 元素第二個 Q 元素
- IE6, Firefox3.0 無此項；Safari, Chrome 都成功。
父元素的子元素清單中，最後一個有此型態的子元素，會應用此設計的風格。
- 風格用法：
<style type='text/css'>
.lst I:last-OF-TYPE {background:green;
color:red;
font-size:140%
}
</style>
<div class=lst>
<q>第一個 Q 元素</q>
<i>第一個 I 元素</i>
<i>第二個 I 元素</i>
<i>第三個 I 元素</i>
<q>第二個 Q 元素</q>
</div> - 執行結果：
第一個 Q 元素
第一個 I 元素 第二個 I 元素 第三個 I 元素第二個 Q 元素
- IE6, Firefox3.0 無此項；Safari, Chrome 都成功。
父元素的子元素清單中，由前算起的固定間隔有此型態的子元素，會應用此設計的風格。其語法是：
元素:nth-OF-TYPE(a*n + b) { 風格區塊 }
上述的意思是：由前算起第 b 個同形態的子元素，及每隔 a 個同形態的子元素，都是被選取的子元素。a, b 須是整數。第一個同形態的子元素的指標是 1。如果 a 是負值，則由第 b 個同形態的子元素起向前算。
也可以使用 :nth-OF-TYPE(even) 選取偶數同形態的子元素；或 :nth-OF-TYPE(odd) 選取奇數同形態的子元素。:nth-OF-TYPE(0*n + 1) 與 :nth-OF-TYPE(1) 等同於 :first-OF-TYPE。
- 風格用法：
<style type='text/css'>
.nth I:nth-OF-TYPE(3n+2) {background:gray;
color:red;
font-size:140%
}
</style>
<div class=nth>
<i>第一子元素</i>
<i>第二子元素</i>
<i>第三子元素</i>
<i>第四子元素</i>
<i>第五子元素</i>
</div> - 執行結果：
第一子元素 第二子元素 第三子元素 第四子元素 第五子元素
- IE6, Firefox3.0, Safari, Chrome 無此項。
指定的元素為父元素由後算起固定間隔有此型態的子元素時，會應用此設計的風格。其語法是：
元素:nth-last-OF-TYPE(a*n + b) { 風格區塊 }
上述的意思是：由後算起第 b 個同形態的子元素起，及每隔 a 個同形態的子元素，都是被選取的子元素。a, b 須是整數。最後一個同形態的子元素的指標是 1。如果 a 是負值，則向後算。
也可以使用 :nth-last-OF-TYPE(even) 選取偶數同形態的子元素；或 :nth-last-OF-TYPE(odd) 選取奇數同形態的子元素。:nth-last-OF-TYPE(0*n + 1) 與 :nth-last-OF-TYPE(1) 等同於 :last-OF-TYPE。
- 風格用法：
<style type='text/css'>
.nlst I:nth-last-OF-TYPE(3n+2) {background:gray;
color:red;
font-size:140%
}
</style>
<div class=nlst>
<i>第一子元素</i>
<i>第二子元素</i>
<i>第三子元素</i>
<i>第四子元素</i>
<i>第五子元素</i>
</div> - 執行結果：
第一子元素 第二子元素 第三子元素 第四子元素 第五子元素
- IE6, Firefox3.0, Safari, Chrome 無此項。
父元素的子元素清單中，唯一有此型態的子元素，會應用此設計的風格。
- 風格用法：
<style type='text/css'>
.nlst Q:only-OF-TYPE {background:gray;
color:red;
font-size:140%
}
</style>
<div class=nlst>
<i>第一子元素</i>
<i>第二子元素</i>
<q>第一個 Q 元素</q>
<i>第三子元素</i>
<i>第四子元素</i>
</div> - 執行結果：
第一子元素 第二子元素
第一個 Q 元素
第三子元素 第四子元素
- IE6, Firefox3.0 無此項；Safari, Chrome 都成功。
