คู่มือท่องเที่ยว สำหรับคนรักการท่องเที่ยว

Chapter 25

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 หรือ จะเขียน 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


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 เฉพาะข้อความใน <p> อันแรกเท่านั้นที่เป็นสีน้ำเงิน

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

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



< br /> Match the first <i> element in all <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 > 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 <i>แจ่มใส</i> ที่พบตัวแรกใน <p> ทุกอัน จะี่เป็นสีน้ำเงิน

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

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




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> อันแรก จะเป็นสีน้ำเงิน

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

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




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.
« Chapter 24
Chapter 26 »