Pseudo-classes

หน้าแรก CSS Pseudo-classes

เป็น selector กลุ่มที่น่าสนใจที่จัดรูปแบบการแสดงผลโดยขึ้นกับสถานะ หรือเงื่อนไข เช่น link เมื่อถูกคลิกจะเปลี่ยนสี เป็นต้น

selector: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 เราสามารถกำหนดรูปแบบให้แตกต่างกันได้

Example

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>

Output

Chapter24 Chapter25

หรือ จะเขียน Pseudo-classes กับ CSS Classes ก็ได้
ถ้าต้องการระบุให้เฉพาะบาง 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>

Output

Chapter22 Chapter23 Chapter24 Chapter25

CSS2 - The :first-child Pseudo-class

จะจัดรูปแบบการแสดงผลให้กับ element ที่พบอันแรกเท่านั้น สำหรับ web browser IE จะ้ต้องประกาศ <!DOCTYPE> ด้วย

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
{
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>

Output เฉพาะข้อความใน อันแรกเท่านั้นที่เป็นสีน้ำเงิน

วันนี้อากาศแจ่มใส

Match the first element in all elements

ตัวอย่างนี้ซับซ้อนขึ้น โดยจัดรูปแบบการแสดงผลให้ selector ที่พบอันแรก ใน 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 > 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>

Output แจ่มใส ที่พบตัวแรกใน ทุกอัน จะี่เป็นสีน้ำเงิน

วันนี้อากาศแจ่มใส วันนี้อากาศแจ่มใส

Match all elements in all first child elements

ตัวอย่างนี้สลับกับข้างบน โดยจัดรูปแบบการแสดงผลให้ selector ทุกอัน ที่พบใน 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 แจ่มใส ทุกอัน ที่พบใน อันแรก จะเป็นสีน้ำเงิน

วันนี้อากาศแจ่มใส วันนี้อากาศแจ่มใส

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

Some text ~A quote in a paragraph~ Some text.

ขึ้นไปด้านบน