ตัวเลือก CSS

สารบัญ

    แสดงสารบัญ

ตัวเลือก CSS จะเลือกองค์ประกอบ HTML ของคุณ ต้องการสไตล์

ตัวเลือก CSS

ตัวเลือก CSS ใช้เพื่อ "ค้นหา" (หรือเลือก) องค์ประกอบ HTML ของคุณ ต้องการสไตล์

เราสามารถแบ่งตัวเลือก CSS ออกเป็นห้าประเภท:

  • ตัวเลือกอย่างง่าย (เลือกองค์ประกอบตามชื่อ รหัส คลาส)

  • ตัวเลือกตัวรวม (select องค์ประกอบตามความสัมพันธ์เฉพาะระหว่างองค์ประกอบเหล่านั้น)

  • ตัวเลือกคลาสหลอก (เลือกองค์ประกอบตามสถานะที่แน่นอน)

  • ตัวเลือกองค์ประกอบหลอก (select และจัดรูปแบบส่วนหนึ่งขององค์ประกอบ)

  • ตัวเลือกแอตทริบิวต์ (เลือกองค์ประกอบตาม คุณลักษณะหรือค่าคุณลักษณะ)

หน้านี้จะอธิบายตัวเลือก CSS ขั้นพื้นฐานที่สุด

ตัวเลือกองค์ประกอบ CSS

ตัวเลือกองค์ประกอบเลือกองค์ประกอบ HTML ตามชื่อองค์ประกอบ

ตัวอย่าง

ที่นี่ <p> องค์ประกอบทั้งหมดบนหน้าจะเป็น จัดกึ่งกลาง โดยมีสีข้อความสีแดง:

p
{
  text-align: center;
  color: red;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-align: center;
  color: red;
} 
</style>
</head>
<body>

<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>

</body>
</html>

ตัวเลือกรหัส CSS

ตัวเลือกรหัสใช้แอตทริบิวต์ id ขององค์ประกอบ HTML เพื่อเลือกองค์ประกอบเฉพาะ

รหัสขององค์ประกอบจะไม่ซ้ำกันภายในเพจ ดังนั้นตัวเลือกรหัสจึงเป็นเช่นนั้น เคย เลือกองค์ประกอบที่ไม่ซ้ำใคร!

หากต้องการเลือกองค์ประกอบที่มีรหัสเฉพาะ ให้เขียนอักขระแฮช (#) ตามด้วย รหัสขององค์ประกอบ

ตัวอย่าง

กฎ CSS ด้านล่างจะถูกนำไปใช้กับองค์ประกอบ HTML ด้วย id="para1":

#para1
{
  text-align: center;
  color: red;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>

</body>
</html>

หมายเหตุ: ชื่อ ID ไม่สามารถขึ้นต้นด้วยตัวเลขได้!

ตัวเลือกคลาส CSS

ตัวเลือกคลาสเลือกองค์ประกอบ HTML ด้วยแอตทริบิวต์คลาสเฉพาะ

ในการเลือกองค์ประกอบที่มีคลาสเฉพาะ ให้เขียนอักขระจุด (.) ตามด้วย ชื่อชั้นเรียน

ตัวอย่าง

ในตัวอย่างนี้องค์ประกอบ HTML ทั้งหมดที่มี class="center" จะเป็นสีแดงและจัดกึ่งกลาง:

.center {
  text-align: center;
  color: red;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p> 

</body>
</html>

คุณยังสามารถระบุว่าเฉพาะองค์ประกอบ HTML ที่เฉพาะเจาะจงเท่านั้นที่ควรได้รับผลกระทบจากคลาส

ตัวอย่าง

ในตัวอย่างนี้เฉพาะ <p> องค์ประกอบที่มี class="center" เท่านั้นที่จะเป็น สีแดงและจัดกึ่งกลาง:

p.center {
  text-align: center;
  color: red;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p> 

</body>
</html>

องค์ประกอบ HTML ยังสามารถอ้างถึงได้มากกว่าหนึ่งคลาส

ตัวอย่าง

ในตัวอย่างนี้ <p> องค์ประกอบจะได้รับการออกแบบตาม class="center" และไปที่ class="large":

<p class="center large">This paragraph refers to two classes.</p>

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

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
  text-align: center;
  color: red;
}

p.large {
  font-size: 300%;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p> 

</body>
</html>

หมายเหตุ: ชื่อชั้นเรียนไม่สามารถขึ้นต้นด้วยตัวเลขได้!

ตัวเลือกสากล CSS

Universal Selector (*) เลือก HTML ทั้งหมด องค์ประกอบบนหน้า

ตัวอย่าง

กฎ CSS ด้านล่างจะมีผลกับทุกองค์ประกอบ HTML บนเพจ:

 *
{
  text-align: center;
  color: blue;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
* {
  text-align: center;
  color: blue;
}
</style>
</head>
<body>

<h1>Hello world!</h1>

<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>

</body>
</html>

ตัวเลือกการจัดกลุ่ม CSS

ตัวเลือกการจัดกลุ่มจะเลือกองค์ประกอบ HTML ทั้งหมดที่มีสไตล์เดียวกัน คำจำกัดความ

ดูโค้ด CSS ต่อไปนี้ (องค์ประกอบ h1, h2 และ p มีความเหมือนกัน คำจำกัดความสไตล์):

h1
{
  text-align: center;
  color: red;
}

h2
{
   
text-align: center;
  color: red;
}

p
{
  text-align: center;
  color: red;
}

จะดีกว่าถ้าจัดกลุ่มตัวเลือกเพื่อลดขนาดโค้ด

หากต้องการจัดกลุ่มตัวเลือก ให้คั่นตัวเลือกแต่ละรายการด้วยเครื่องหมายจุลภาค

ตัวอย่าง

ในตัวอย่างนี้ เราได้จัดกลุ่มตัวเลือกจากโค้ดด้านบน:

h1, h2, p
{
   
text-align: center;
  color: red;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>

</body>
</html>

ตัวเลือก CSS แบบง่ายทั้งหมด

ตัวเลือก:

#id

ตัวอย่าง:

#firstname

คำอธิบายตัวอย่าง: เลือกองค์ประกอบที่มี id="firstname"

ตัวเลือก:

.class

ตัวอย่าง:

.intro

คำอธิบายตัวอย่าง: เลือกองค์ประกอบทั้งหมดด้วย class="intro"

ตัวเลือก:

element.class

ตัวอย่าง:

p.intro

คำอธิบายตัวอย่าง: เลือกเฉพาะ <p> องค์ประกอบที่มี class="intro"

ตัวเลือก:

*

ตัวอย่าง:

*

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

ตัวเลือก:

element

ตัวอย่าง:

p

คำอธิบายตัวอย่าง: เลือกองค์ประกอบ <p> ทั้งหมด

ตัวเลือก:

element,element,..

ตัวอย่าง:

div, p

คำอธิบายตัวอย่าง: เลือกองค์ประกอบ <div> ทั้งหมดและองค์ประกอบ <p> ทั้งหมด