CSS Pseudo-คลาส

สารบัญ

แสดงสารบัญ

Pseudo-class คืออะไร?

คลาสหลอกใช้เพื่อกำหนดสถานะพิเศษ ขององค์ประกอบ

ตัวอย่างเช่น สามารถใช้เพื่อ:

จัดรูปแบบองค์ประกอบเมื่อผู้ใช้วางเมาส์เหนือองค์ประกอบนั้น
รูปแบบของลิงก์ที่เข้าชมและไม่ได้เข้าชมแตกต่างกัน
จัดรูปแบบองค์ประกอบเมื่อได้รับการโฟกัส

Mouse Over Me

ไวยากรณ์

ไวยากรณ์ของคลาสหลอก:

selector:pseudo-class {
  property: value;
}

Anchor Pseudo-คลาส

ลิงค์สามารถแสดงได้หลายวิธี:

ตัวอย่าง

  /* unvisited link */
a:link {
  color: #FF0000;
}
/* visited 
link */
a:visited {
  color: #00FF00;
}
/* mouse over link */
a:hover {
  color: #FF00FF;
}
/* selected link */
a:active {
  color: #0000FF;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}
</style>
</head>
<body>

<h2>Styling a link depending on state</h2>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
</html>

หมายเหตุ: a:hover ต้องอยู่หลัง a:link และ a:visited ในคำจำกัดความ CSS เพื่อให้มีประสิทธิภาพ! a:active ต้องตามมาทีหลัง a:hover ในคำจำกัดความ CSS เพื่อให้มีประสิทธิภาพ! ชื่อคลาสหลอกไม่คำนึงถึงขนาดตัวพิมพ์

คลาสหลอกและคลาส HTML

คลาสหลอกสามารถใช้ร่วมกับคลาส HTML:

เมื่อคุณวางเมาส์เหนือลิงก์ในตัวอย่าง มันจะเปลี่ยนสี:

ตัวอย่าง

a.highlight:hover {
  color: #ff0000;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
a.highlight:hover {
  color: #ff0000;
  font-size: 22px;
} 
</style>
</head>
<body>

<h2>Pseudo-classes and HTML Classes</h2>

<p>When you hover over the first link below, it will change color and font size:</p>

<p><a class="highlight" href="css_syntax.asp">CSS Syntax</a></p>

<p><a href="default.asp">CSS Tutorial</a></p>

</body>
</html>

วางเมาส์เหนือ <div>

ตัวอย่างของการใช้คลาสหลอก :hover ใน <div> องค์ประกอบ:

ตัวอย่าง

div:hover {
  background-color: blue;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: green;
  color: white;
  padding: 25px;
  text-align: center;
}

div:hover {
  background-color: blue;
}
</style>
</head>
<body>

<p>Mouse over the div element below to change its background color:</p>

<div>Mouse Over Me</div>

</body>
</html>

เคล็ดลับเครื่องมือง่ายๆ โฮเวอร์

วางเมาส์เหนือองค์ประกอบ <div> เพื่อแสดงองค์ประกอบ <p> (เช่นคำแนะนำเครื่องมือ):

ทาดา! ฉันอยู่นี่!

ตัวอย่าง

p {
  display: none;
  
background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}
</style>
</head>
<body>

<div>Hover over this div element to show the p element
  <p>Tada! Here I am!</p>
</div>

</body>
</html>

CSS - :ชั้นหลอกลูกคนแรก

คลาสหลอก :first-child ตรงกับองค์ประกอบที่ระบุซึ่งเป็นลูกคนแรกขององค์ประกอบอื่น

จับคู่องค์ประกอบแรก <p>

ในตัวอย่างต่อไปนี้ ตัวเลือกจะจับคู่องค์ประกอบ <p> ใด ๆ ที่เป็นลูกแรกขององค์ประกอบใด ๆ :

ตัวอย่าง

p:first-child
{
   
color: blue;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
  color: blue;
} 
</style>
</head>
<body>

<p>This is some text.</p>
<p>This is some text.</p>

<div>
  <p>This is some text.</p>
  <p>This is some text.</p>
</div>

</body>
</html>

จับคู่องค์ประกอบ <i> แรกในทุกองค์ประกอบ <p>

ในตัวอย่างต่อไปนี้ ตัวเลือกจะจับคู่องค์ประกอบแรก <i> ในองค์ประกอบ <p> ทั้งหมด:

ตัวอย่าง

p i:first-child
{
   
color: blue;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
p i:first-child {
  color: blue;
} 
</style>
</head>
<body>

<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

</body>
</html>

จับคู่องค์ประกอบ <i> ทั้งหมดในองค์ประกอบลูกแรก <p>

ในตัวอย่างต่อไปนี้ ตัวเลือกจะจับคู่องค์ประกอบ <i> ทั้งหมดในองค์ประกอบ <p> ที่เป็นลูกคนแรกขององค์ประกอบอื่น:

ตัวอย่าง

p:first-child i
{
  color: blue;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child i {
  color: blue;
} 
</style>
</head>
<body>

<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

<div>
  <p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
  <p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
</div>

</body>
</html>

CSS - The :lang Pseudo-class

คลาสหลอก :lang ช่วยให้คุณสามารถกำหนดกฎพิเศษสำหรับภาษาต่างๆ ได้

ในตัวอย่างด้านล่าง :lang กำหนดเครื่องหมายคำพูดสำหรับ องค์ประกอบด้วย lang="no":

ตัวอย่าง

<html>
<head>
<style>
  q:lang(no) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> 
Some text.</p>

</body>
</html>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
q:lang(no) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>In this example, :lang defines the quotation marks for q elements with lang="no":</p>

</body>
</html>

ตัวอย่างเพิ่มเติม

เพิ่มสไตล์ที่แตกต่างให้กับไฮเปอร์ลิงก์

<!DOCTYPE html>
<html>
<head>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>

<h2>Styling Links</h2>

<p>Mouse over the links and watch them change layout:</p>

<p><b><a class="one" href="default.asp" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">This link changes text-decoration</a></b></p>

</body>
</html>

การใช้ :โฟกัส

<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
  background-color: yellow;
}
</style>
</head>
<body>

<form action="/action_page.php" method="get">
  First name: <input type="text" name="fname"><br><br>
  Last name: <input type="text" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

คลาสหลอก CSS ทั้งหมด

:active

ตัวอย่าง:

a:active

คำอธิบายตัวอย่าง:

เลือกลิงค์ที่ใช้งานอยู่

:checked

ตัวอย่าง:

input:checked

คำอธิบายตัวอย่าง:

เลือกทุกองค์ประกอบที่เลือก <input>

:disabled

ตัวอย่าง:

input:disabled

คำอธิบายตัวอย่าง:

เลือกทุกองค์ประกอบที่ปิดการใช้งาน <input>

:empty

ตัวอย่าง:

p:empty

คำอธิบายตัวอย่าง:

เลือกทุก <p> องค์ประกอบที่ไม่มีลูก

:enabled

ตัวอย่าง:

input:enabled

คำอธิบายตัวอย่าง:

เลือกทุกองค์ประกอบที่เปิดใช้งาน <input>

:first-child

ตัวอย่าง:

p:first-child

คำอธิบายตัวอย่าง:

เลือกทุก <p> องค์ประกอบที่เป็นลูกคนแรกของผู้ปกครอง

:first-of-type

ตัวอย่าง:

p:first-of-type

คำอธิบายตัวอย่าง:

เลือกทุก <p> องค์ประกอบที่เป็นองค์ประกอบแรก <p> ของผู้ปกครอง

:focus

ตัวอย่าง:

input:focus

คำอธิบายตัวอย่าง:

เลือก <input> องค์ประกอบที่มีโฟกัส

:hover

ตัวอย่าง:

a:hover

คำอธิบายตัวอย่าง:

เลือกลิงก์เมื่อวางเมาส์ไว้เหนือ

:in-range

ตัวอย่าง:

input:in-range

คำอธิบายตัวอย่าง:

เลือก <input> องค์ประกอบที่มีค่าภายในช่วงที่ระบุ

:invalid

ตัวอย่าง:

input:invalid

คำอธิบายตัวอย่าง:

เลือกองค์ประกอบ <input> ทั้งหมดที่มีค่าไม่ถูกต้อง

:lang(language)

ตัวอย่าง:

p:lang(it)

คำอธิบายตัวอย่าง:

เลือกทุก <p> องค์ประกอบที่มีค่าแอตทริบิวต์ lang เริ่มต้นด้วย "it"

:last-child

ตัวอย่าง:

p:last-child

คำอธิบายตัวอย่าง:

เลือกทุก <p> องค์ประกอบที่เป็นลูกคนสุดท้ายของผู้ปกครอง

:last-of-type

ตัวอย่าง:

p:last-of-type

คำอธิบายตัวอย่าง:

เลือกทุกองค์ประกอบ <p> ที่เป็นองค์ประกอบ <p> สุดท้ายของผู้ปกครอง

:link

ตัวอย่าง:

a:link

คำอธิบายตัวอย่าง:

เลือกลิงก์ที่ยังไม่ได้เยี่ยมชมทั้งหมด

:not(selector)

ตัวอย่าง:

:not(p)

คำอธิบายตัวอย่าง:

เลือกทุกองค์ประกอบที่ไม่ใช่องค์ประกอบ <p>

:nth-child(n)

ตัวอย่าง:

p:nth-child(2)

คำอธิบายตัวอย่าง:

เลือกทุก <p> องค์ประกอบที่เป็นลูกคนที่สองของผู้ปกครอง

:nth-last-child(n)

ตัวอย่าง:

p:nth-last-child(2)

คำอธิบายตัวอย่าง:

เลือกทุกองค์ประกอบ <p> ที่เป็นลูกคนที่สองของแม่ นับจากลูกคนสุดท้าย

:nth-last-of-type(n)

ตัวอย่าง:

p:nth-last-of-type(2)

คำอธิบายตัวอย่าง:

เลือกทุกองค์ประกอบ <p> ที่เป็นองค์ประกอบ <p> ที่สองขององค์ประกอบหลัก นับจากลูกสุดท้าย

:nth-of-type(n)

ตัวอย่าง:

p:nth-of-type(2)

คำอธิบายตัวอย่าง:

เลือกทุก <p> องค์ประกอบที่เป็นองค์ประกอบที่สอง <p> ของผู้ปกครอง

:only-of-type

ตัวอย่าง:

p:only-of-type

คำอธิบายตัวอย่าง:

เลือกทุกองค์ประกอบ <p> ที่เป็นเพียงองค์ประกอบ <p> ของผู้ปกครอง

:only-child

ตัวอย่าง:

p:only-child

คำอธิบายตัวอย่าง:

เลือกทุก <p> องค์ประกอบที่เป็นลูกเพียงคนเดียวของผู้ปกครอง

:optional

ตัวอย่าง:

input:optional

คำอธิบายตัวอย่าง:

เลือก <input> องค์ประกอบที่ไม่มีแอตทริบิวต์ "required"

:out-of-range

ตัวอย่าง:

input:out-of-range

คำอธิบายตัวอย่าง:

เลือก <input> องค์ประกอบที่มีค่าอยู่นอกช่วงที่ระบุ

:read-only

ตัวอย่าง:

input:read-only

คำอธิบายตัวอย่าง:

เลือก <input> องค์ประกอบที่มีแอตทริบิวต์ "อ่านอย่างเดียว" ที่ระบุ

:read-write

ตัวอย่าง:

input:read-write

คำอธิบายตัวอย่าง:

เลือก <input> องค์ประกอบที่ไม่มีแอตทริบิวต์ "อ่านอย่างเดียว"

:required

ตัวอย่าง:

input:required

คำอธิบายตัวอย่าง:

เลือก <input> องค์ประกอบที่มีแอตทริบิวต์ "required" ที่ระบุ

:root

ตัวอย่าง:

root

คำอธิบายตัวอย่าง:

เลือกองค์ประกอบรากของเอกสาร

:target

ตัวอย่าง:

#news:target

คำอธิบายตัวอย่าง:

เลือกองค์ประกอบ #news ที่ใช้งานอยู่ในปัจจุบัน (คลิกที่ URL ที่มีชื่อจุดยึดนั้น)

:valid

ตัวอย่าง:

input:valid

คำอธิบายตัวอย่าง:

เลือกทั้งหมด <input> องค์ประกอบที่มีค่าที่ถูกต้อง

:visited

ตัวอย่าง:

a:visited

คำอธิบายตัวอย่าง:

เลือกลิงก์ที่เยี่ยมชมทั้งหมด

องค์ประกอบหลอก CSS ทั้งหมด

::after

ตัวอย่าง:

p::after

คำอธิบายตัวอย่าง:

แทรกเนื้อหาหลังจากทุกๆ <p> องค์ประกอบ

::before

ตัวอย่าง:

p::before

คำอธิบายตัวอย่าง:

แทรกเนื้อหาก่อนทุกๆ <p> องค์ประกอบ

::first-letter

ตัวอย่าง:

p::first-letter

คำอธิบายตัวอย่าง:

เลือกตัวอักษรตัวแรกของทุกๆ <p> องค์ประกอบ

::first-line

ตัวอย่าง:

p::first-line

คำอธิบายตัวอย่าง:

เลือกบรรทัดแรกของทุกๆ <p> องค์ประกอบ

::marker

ตัวอย่าง:

::marker

คำอธิบายตัวอย่าง:

เลือกเครื่องหมายของรายการ

::selection

ตัวอย่าง:

p::selection

คำอธิบายตัวอย่าง:

เลือกส่วนขององค์ประกอบที่ผู้ใช้เลือก

CSS Pseudo-คลาส

สารบัญ

Pseudo-class คืออะไร?

ไวยากรณ์

Anchor Pseudo-คลาส

ตัวอย่าง

คลาสหลอกและคลาส HTML

ตัวอย่าง

วางเมาส์เหนือ <div>

ตัวอย่าง

เคล็ดลับเครื่องมือง่ายๆ โฮเวอร์

ตัวอย่าง

CSS - :ชั้นหลอกลูกคนแรก

จับคู่องค์ประกอบแรก <p>

ตัวอย่าง

จับคู่องค์ประกอบ <i> แรกในทุกองค์ประกอบ <p>

ตัวอย่าง

จับคู่องค์ประกอบ <i> ทั้งหมดในองค์ประกอบลูกแรก <p>

ตัวอย่าง

CSS - The :lang Pseudo-class

ตัวอย่าง

ตัวอย่างเพิ่มเติม

คลาสหลอก CSS ทั้งหมด

:active

:checked

:disabled

:empty

:enabled

:first-child

:first-of-type

:focus

:hover

:in-range

:invalid

:lang(language)

:last-child

:last-of-type

:link

:not(selector)

:nth-child(n)

:nth-last-child(n)

:nth-last-of-type(n)

:nth-of-type(n)

:only-of-type

:only-child

:optional

:out-of-range

:read-only

:read-write

:required

:root

:target

:valid

:visited

องค์ประกอบหลอก CSS ทั้งหมด

::after

::before

::first-letter

::first-line

::marker

::selection