ตัวเลือกแอตทริบิวต์ CSS

สารบัญ

    แสดงสารบัญ

จัดรูปแบบองค์ประกอบ HTML ด้วยคุณสมบัติเฉพาะ

เป็นไปได้ที่จะจัดรูปแบบองค์ประกอบ HTML ที่มีแอตทริบิวต์เฉพาะหรือค่าแอตทริบิวต์

ตัวเลือก CSS [คุณสมบัติ]

[attribute] ตัวเลือกจะใช้ในการเลือกองค์ประกอบที่มีการระบุ คุณลักษณะ.

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

ตัวอย่าง

a[target] {
  background-color: yellow;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute] Selector</h2>
<p>The links with a target attribute gets a yellow background:</p>

<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

</body>
</html>

ตัวเลือก CSS [attribute="value"]

[attribute="value"] ตัวเลือกจะใช้ในการเลือกองค์ประกอบที่มีการระบุ คุณลักษณะและคุณค่า

ตัวอย่างต่อไปนี้เลือกทั้งหมด <a> องค์ประกอบที่มี target="_blank" แอตทริบิวต์:

ตัวอย่าง

a[target="_blank"] { 
  background-color: yellow;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
a[target="_blank"] {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute="value"] Selector</h2>
<p>The link with target="_blank" gets a yellow background:</p>

<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

</body>
</html>

ตัวเลือก CSS [attribute~="value"]

[attribute~="value"] ตัวเลือกที่ใช้ในการเลือกองค์ประกอบที่มีแอตทริบิวต์ ค่าที่มีคำที่ระบุ

ตัวอย่างต่อไปนี้เลือกองค์ประกอบทั้งหมดที่มีแอตทริบิวต์ชื่อที่ ประกอบด้วยรายการคำที่คั่นด้วยช่องว่าง หนึ่งในนั้นคือ "ดอกไม้":

ตัวอย่าง

[title~="flower"] {
  border: 5px solid yellow;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
[title~="flower"] {
  border: 5px solid yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute~="value"] Selector</h2>
<p>All images with the title attribute containing the word "flower" get a yellow border.</p>

<img src="klematis.jpg" title="klematis flower" width="150" height="113">
<img src="img_flwr.gif" title="flower" width="224" height="162">
<img src="img_tree.gif" title="tree" width="200" height="358">

</body>
</html>

ตัวอย่างข้างต้นจะจับคู่องค์ประกอบที่มี title="flower", title="summer flower" และ title="flower new" แต่ไม่ใช่ title="my-flower" หรือ title="flowers"

ตัวเลือก CSS [attribute|="value"]

ตัวเลือก [attribute|="value"] ใช้เพื่อเลือกองค์ประกอบที่มีแอตทริบิวต์ที่ระบุซึ่งสามารถมีค่าได้ เป็นค่าที่ระบุทุกประการ หรือค่าที่ระบุตามด้วยยัติภังค์ (-)

หมายเหตุ: ค่าจะต้องเป็นคำทั้งคำ เช่น เพียงอย่างเดียว class="top" หรือตามด้วยยัติภังค์ ( - ) เช่น class="top-text"

ตัวอย่าง

[class|="top"] {
  background: yellow;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
[class|="top"] {
  background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute|="value"] Selector</h2>

<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>

</body>
</html>

ตัวเลือก CSS [attribute^="value"]

ตัวเลือก [attribute^="value"] ใช้เพื่อเลือกองค์ประกอบที่มีแอตทริบิวต์ที่ระบุซึ่งมีค่าขึ้นต้นด้วย ค่าที่ระบุ

ตัวอย่างต่อไปนี้เลือกองค์ประกอบทั้งหมดที่มีค่าแอตทริบิวต์คลาสที่ ขึ้นต้นด้วย "บน":

หมายเหตุ: ค่าไม่จำเป็นต้องเป็นทั้งคำ!

ตัวอย่าง

[class^="top"] {
  background: yellow;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
[class^="top"] {
  background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute^="value"] Selector</h2>

<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>

</body>
</html>

ตัวเลือก CSS [attribute$="value"]

[attribute$="value"] ตัวเลือกที่ใช้ในการเลือกองค์ประกอบที่มีแอตทริบิวต์ ค่าลงท้ายด้วยค่าที่ระบุ

ตัวอย่างต่อไปนี้เลือกองค์ประกอบทั้งหมดที่มีค่าแอตทริบิวต์คลาสที่ ลงท้ายด้วย "ทดสอบ":

หมายเหตุ: ค่าไม่จำเป็นต้องเป็นทั้งคำ!

ตัวอย่าง

[class$="test"] {
  background: yellow;
}

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

<!DOCTYPE html>
<html>
<head>
<style> 
[class$="test"] {
  background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute$="value"] Selector</h2>

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>

</body>
</html>

ตัวเลือก CSS [attribute*="value"]

[attribute*="value"] ตัวเลือกที่ใช้ในการเลือกองค์ประกอบที่มีแอตทริบิวต์ value มีค่าที่ระบุ

ตัวอย่างต่อไปนี้เลือกองค์ประกอบทั้งหมดที่มีค่าแอตทริบิวต์คลาสที่ มี "เต้":

หมายเหตุ: ค่าไม่จำเป็นต้องเป็นทั้งคำ!

ตัวอย่าง

[class*="te"] {
  background: yellow;
}

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

<!DOCTYPE html>
<html>
<head>
<style> 
[class*="te"] {
  background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute*="value"] Selector</h2>

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>

</body>
</html>

แบบฟอร์มจัดแต่งทรงผม

ตัวเลือกแอตทริบิวต์จะมีประโยชน์สำหรับการจัดรูปแบบรูปแบบที่ไม่มีคลาสหรือ ID:

ตัวอย่าง

input[type="text"]
{
  width: 150px;
   
display: block;
   
margin-bottom: 10px;
   
background-color: yellow;
}

input[type="button"]
{
  width: 120px;
  margin-left: 35px;
  display: block;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}

input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}
</style>
</head>
<body>

<h2>Styling Forms</h2>

<form name="input" action="" method="get">
  Firstname:<input type="text" name="Name" value="Peter" size="20">
  Lastname:<input type="text" name="Name" value="Griffin" size="20">
  <input type="button" value="Example Button">
</form>

</body>
</html>

เคล็ดลับ: ไปที่บทช่วยสอนแบบฟอร์ม CSS ของเรา เพื่อดูตัวอย่างเพิ่มเติมเกี่ยวกับวิธีจัดรูปแบบแบบฟอร์มด้วย CSS

ตัวเลือกแอตทริบิวต์ CSS ทั้งหมด

[attribute]

ตัวอย่าง

[target]

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

เลือกองค์ประกอบทั้งหมดที่มีแอตทริบิวต์เป้าหมาย

[attribute=value]

ตัวอย่าง

[target="_blank"]

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

เลือกองค์ประกอบทั้งหมดด้วย target="_blank"

[attribute~=value]

ตัวอย่าง

[title~="flower"]

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

เลือกองค์ประกอบทั้งหมดที่มีแอตทริบิวต์ชื่อซึ่งมีรายการคำที่คั่นด้วยช่องว่าง หนึ่งในนั้นคือ "ดอกไม้"

[attribute|=value]

ตัวอย่าง

[lang|="en"]

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

เลือกองค์ประกอบทั้งหมดที่มีค่าแอตทริบิวต์ lang เริ่มต้นด้วย "en"

[attribute^=value]

ตัวอย่าง

a[href^="https"]

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

เลือกทั้งหมด <a> องค์ประกอบที่มีค่าแอตทริบิวต์ href เริ่มต้นด้วย "https"

[attribute$=value]

ตัวอย่าง

a[href$=".pdf"]

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

เลือกทั้งหมด <a> องค์ประกอบที่มีค่าแอตทริบิวต์ href ที่ลงท้ายด้วย ".pdf"

[attribute*=value]

ตัวอย่าง

a[href*="w3schools"]

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

เลือกทั้งหมด <a> องค์ประกอบที่มีค่าแอตทริบิวต์ href ที่มีสตริงย่อย "w3schools"