รับทำเว็บไซต์ครบวงจร
เลือกภาษา Thai English     facebook
รายการหลัก



บทความ


Page Ranking Tool

Pseudo-classes


สอน CSS
> Pseudo-classes



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

selector:pseudo-class {property: value}

selector.css-class:pseudo-class {property: value}

Pseudo-classPurpose
: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 อื่นๆ
:langAllows 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.


Short URL click!
<< กลับคืน : เข้าชม 8,337 ครั้ง : ขึ้นไปด้านบน

รับทำเว็บไซต์ รับสร้างเว็บไซต์ รับออกแบบเว็บ รับเขียนเว็บ รับสอนทำเว็บ รับเช่า hosting รับเช่าพื้นที่เว็บไซต์ จดชื่อเว็บ รับโปรโมทเว็บไซต์ รับดูแลเว็บ SiteMap
สปริงเกอร์http://www.xn--22c2c4blb9n.xn--o3cw4h/