เป็น selector กลุ่มที่น่าสนใจที่จัดรูปแบบการแสดงผลโดยขึ้นกับสถานะ หรือเงื่อนไข เช่น link เมื่อถูกคลิกจะเปลี่ยนสี เป็นต้น
selector:pseudo-class {property: value}
selector.css-class:pseudo-class {property: value}
selector.css-class:pseudo-class {property: value}
| Pseudo-class | Purpose |
|---|---|
| :link | กำหนด style ให้กับ link ปกติที่ยังไม่เคยถูก click |
| :visited | กำหนด style ให้กับ link ที่เคยถูกคลิกแล้ว |
| :hover | กำหนด style ให้กับ link เมื่อเลื่อนเมาส์ไปอยู่เหนือ link |
| :active | กำหนด style ให้กับ link ขณะถูกคลิก |
| :focus | กำหนด style ให้กับ element ขณะถูก focus |
| :first-child | กำหนด style ให้กับ element ที่เป็น first child ของ element อื่นๆ |
| :lang | Allows the author to specify a language to use in a specified element |
Anchor Pseudo-classes
link ที่มีสถานะ active, visited, unvisited, หรือเมื่อนำเมาส์วางบน link เราสามารถกำหนดรูปแบบให้แตกต่างกันได้
ตัวอย่าง
a:link {color: #FF0000} /* unvisited link สีแดง*/
a:visited {color: #00FF00} /* visited link สีเขียว*/
a:hover {color: #FF00FF} /* mouse over link สีชมพู */
a:active {color: #0000FF} /* selected link สีน้ำเงิน*/
<a href="css_chapter24.html">Chapter24</a>
<a href="css_chapter25.html">Chapter25</a>
ผลลัพธ์
หรือ จะเขียน Pseudo-classes กับ CSS Classes ก็ได้ a:visited {color: #00FF00} /* visited link สีเขียว*/
a:hover {color: #FF00FF} /* mouse over link สีชมพู */
a:active {color: #0000FF} /* selected link สีน้ำเงิน*/
<a href="css_chapter24.html">Chapter24</a>
<a href="css_chapter25.html">Chapter25</a>
ถ้าต้องการระบุให้เฉพาะบาง link เท่านั้นที่แสดงผลต่างจะ link อื่น เขียนได้ดังนี้
ตัวอย่าง
a.special:hover {color: #FF0000; background-color:#CCFF99}
/* mouse over link สีแดง พื้นเขียว */
<a class="special" href="css_chapter22.html">Chapter22</a>
<a class="special" href="css_chapter23.html">Chapter23</a>
<a href="css_chapter24.html">Chapter24</a>
<a href="css_chapter25.html">Chapter25</a>
ผลลัพธ์
/* mouse over link สีแดง พื้นเขียว */
<a class="special" href="css_chapter22.html">Chapter22</a>
<a class="special" href="css_chapter23.html">Chapter23</a>
<a href="css_chapter24.html">Chapter24</a>
<a href="css_chapter25.html">Chapter25</a>
CSS2 - The :first-child Pseudo-class
จะจัดรูปแบบการแสดงผลให้กับ element ที่พบอันแรกเท่านั้น สำหรับ web browser IE จะ้ต้องประกาศ <!DOCTYPE> ด้วย
ตัวอย่าง
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
p:first-child
{
color:blue
}
</style>
</head>
<body>
<p> วันนี้อากาศแจ่มใส </p>
<p> วันนี้อากาศแจ่มใส </p>
<p><b>Note:</b> For :first-child to work in IE a DOCTYPE must be declared.</p>
</body>
</html>
ผลลีัพธ์ เฉพาะข้อความใน <p> อันแรกเท่านั้นที่เป็นสีน้ำเงิน<html>
<head>
<style type="text/css">
p:first-child
{
color:blue
}
</style>
</head>
<body>
<p> วันนี้อากาศแจ่มใส </p>
<p> วันนี้อากาศแจ่มใส </p>
<p><b>Note:</b> For :first-child to work in IE a DOCTYPE must be declared.</p>
</body>
</html>
วันนี้อากาศแจ่มใส
วันนี้อากาศแจ่มใส< br /> Match the first <i> element in all <p> elements
ตัวอย่างนี้ซับซ้อนขึ้น โดยจัดรูปแบบการแสดงผลให้ selector <i> ที่พบอันแรก ใน <p> elements ทุกๆ อัน
ตัวอย่าง
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
p > i:first-child
{
color:blue
}
</style>
</head>
<body>
<p>วันนี้อากาศ <i>แจ่มใส</i> วันนี้อากาศ <i>แจ่มใส</i></p>
<p>วันนี้อากาศ <i>แจ่มใส</i> วันนี้อากาศ <i>แจ่มใส</i></p>
<p><b>Note:</b> For :first-child to work in IE a DOCTYPE must be declared.</p>
</body>
</html>
ผลลัพธ์ <i>แจ่มใส</i> ที่พบตัวแรกใน <p> ทุกอัน จะี่เป็นสีน้ำเงิน<html>
<head>
<style type="text/css">
p > i:first-child
{
color:blue
}
</style>
</head>
<body>
<p>วันนี้อากาศ <i>แจ่มใส</i> วันนี้อากาศ <i>แจ่มใส</i></p>
<p>วันนี้อากาศ <i>แจ่มใส</i> วันนี้อากาศ <i>แจ่มใส</i></p>
<p><b>Note:</b> For :first-child to work in IE a DOCTYPE must be declared.</p>
</body>
</html>
วันนี้อากาศแจ่มใส วันนี้อากาศแจ่มใส
วันนี้อากาศแจ่มใส วันนี้อากาศแจ่มใส
วันนี้อากาศแจ่มใส วันนี้อากาศแจ่มใส
Match all <i> elements in all first child <p> elements
ตัวอย่างนี้สลับกับข้างบน โดยจัดรูปแบบการแสดงผลให้ selector <i> ทุกอัน ที่พบใน <p> elements อันแรก
Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
p:first-child i
{
color:blue
}
</style>
</head>
<body>
<p>วันนี้อากาศ <i>แจ่มใส</i> วันนี้อากาศ <i>แจ่มใส</i></p>
<p>วันนี้อากาศ <i>แจ่มใส</i> วันนี้อากาศ <i>แจ่มใส</i></p>
<p><b>Note:</b> For :first-child to work in IE a DOCTYPE must be declared.</p>
</body>
</html>
Output <i>แจ่มใส</i> ทุกอัน ที่พบใน <p> อันแรก จะเป็นสีน้ำเงิน<html>
<head>
<style type="text/css">
p:first-child i
{
color:blue
}
</style>
</head>
<body>
<p>วันนี้อากาศ <i>แจ่มใส</i> วันนี้อากาศ <i>แจ่มใส</i></p>
<p>วันนี้อากาศ <i>แจ่มใส</i> วันนี้อากาศ <i>แจ่มใส</i></p>
<p><b>Note:</b> For :first-child to work in IE a DOCTYPE must be declared.</p>
</body>
</html>
วันนี้อากาศแจ่มใส วันนี้อากาศแจ่มใส
วันนี้อากาศแจ่มใส วันนี้อากาศแจ่มใส
วันนี้อากาศแจ่มใส วันนี้อากาศแจ่มใส
CSS2 - The :lang Pseudo-class
เราสามารถกำหนด special rules สำหรับภาษาต่างๆ ได้ แต่ Pseudo-class *ใช้ไม่ได้กับ web browser IE
Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q>Some text.</p>
</body>
</html>
Output<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q>Some text.</p>
</body>
</html>
Some text ~A quote in a paragraph~ Some text.
