ตัวเลือก

The CSS Podcast - 002: Selectors

หากมีข้อความที่ต้องการให้มีขนาดใหญ่ขึ้นและเป็นสีแดงเฉพาะในกรณีที่เป็นย่อหน้าแรกของบทความ คุณจะทำอย่างไร

<article>
  <p>I want to be red and larger than the other text.</p>
  <p>I want to be normal sized and the default color.</p>
</article>

คุณใช้ตัวเลือก CSS เพื่อค้นหาองค์ประกอบที่เฉพาะเจาะจงนั้นและใช้กฎ CSS ดังตัวอย่างนี้

article p:first-of-type {
  color: red;
  font-size: 1.5em;
}

CSS มีตัวเลือกมากมายในการเลือกองค์ประกอบและใช้กฎกับองค์ประกอบเหล่านั้น ซึ่งมีทั้งแบบง่ายและแบบซับซ้อนมาก เพื่อช่วยแก้ปัญหาเช่นนี้

ส่วนต่างๆ ของกฎ CSS

หากต้องการทำความเข้าใจวิธีการทํางานของตัวเลือกและบทบาทของตัวเลือกใน CSS คุณควรทราบส่วนต่างๆ ของกฎ CSS กฎ CSS คือบล็อกโค้ดที่มีเครื่องมือเลือกอย่างน้อย 1 รายการและการประกาศอย่างน้อย 1 รายการ

ในกฎ CSS นี้ ตัวเลือกคือ .my-css-rule ซึ่งจะค้นหาองค์ประกอบทั้งหมดที่มีคลาส my-css-rule ในหน้า มีการประกาศ 3 รายการภายในวงเล็บปีกกา การประกาศคือคู่พร็อพเพอร์ตี้และค่าที่ใช้รูปแบบกับองค์ประกอบที่ตรงกับตัวเลือก กฎ CSS อาจมีประกาศและตัวเลือกได้มากเท่าที่ต้องการ

ตัวเลือกแบบง่าย

กลุ่มตัวเลือกที่ตรงไปตรงมาที่สุดจะกําหนดเป้าหมายองค์ประกอบ HTML รวมถึงคลาส รหัส และแอตทริบิวต์อื่นๆ ที่อาจเพิ่มลงในแท็ก HTML

ตัวเลือกส่วนกลาง

Browser Support

• 1
• 12
• 1
• 1

Source

ตัวเลือกส่วนกลางหรือที่เรียกว่าไวลด์การ์ดจะจับคู่กับองค์ประกอบใดก็ได้

* {
  color: hotpink;
}

กฎนี้ทําให้องค์ประกอบ HTML ทั้งหมดในหน้ามีข้อความสีชมพูร้อน

ตัวเลือกประเภท

Browser Support

• 1
• 12
• 1
• 1

Source

ตัวเลือกประเภทจะจับคู่กับองค์ประกอบ HTML โดยตรง

section {
  padding: 2em;
}

กฎนี้ทําให้องค์ประกอบ <section> ทั้งหมดมี 2em ของ padding ในทุกด้าน

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

Browser Support

• 1
• 12
• 1
• 1

Source

องค์ประกอบ HTML อาจมีรายการที่กําหนดไว้ในแอตทริบิวต์ class อย่างน้อย 1 รายการ ตัวเลือกคลาสจะจับคู่กับองค์ประกอบใดก็ตามที่มีการใช้คลาสนั้น

<div class="my-class"></div>
<button class="my-class"></button>
<p class="my-class"></p>

องค์ประกอบที่มีการใช้คลาสจะเปลี่ยนเป็นสีแดง

.my-class {
  color: red;
}

โปรดสังเกตว่า . อยู่ใน CSS เท่านั้นและไม่ได้อยู่ใน HTML เนื่องจากอักขระ . บอกภาษา CSS ให้จับคู่สมาชิกแอตทริบิวต์คลาส รูปแบบนี้เป็นรูปแบบทั่วไปใน CSS ซึ่งจะใช้อักขระพิเศษหรือชุดอักขระเพื่อกำหนดประเภทตัวเลือก

องค์ประกอบ HTML ที่มีคลาส .my-class จะยังคงจับคู่กับกฎ CSS ข้างต้นแม้ว่าจะมีคลาสอื่นๆ อีกหลายคลาส ดังนี้

<div class="my-class another-class some-other-class"></div>

เนื่องจาก CSS จะมองหาแอตทริบิวต์ class ที่มีคลาสที่กําหนดไว้ แทนที่จะจับคู่คลาสนั้นทุกประการ

หมายเหตุ: ค่าของแอตทริบิวต์คลาสอาจเป็นอะไรก็ได้ตามต้องการ สิ่งที่อาจทำให้คุณสับสนได้คือคุณไม่สามารถเริ่มต้นคลาส (หรือรหัส) ด้วยตัวเลข เช่น .1element อ่านข้อมูลเพิ่มเติมได้ในข้อกําหนด

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

Browser Support

• 1
• 12
• 1
• 1

Source

เอลิเมนต์ HTML ที่มีแอตทริบิวต์ id ควรเป็นองค์ประกอบเดียวในหน้าเว็บที่มีค่ารหัสนั้น คุณเลือกองค์ประกอบด้วยตัวเลือกรหัสดังนี้

#rad {
  border: 1px solid blue;
}

CSS นี้จะใส่เส้นขอบสีน้ำเงินให้กับองค์ประกอบ HTML ที่มี id ของ rad ดังนี้

<div id="rad"></div>

ในทำนองเดียวกับตัวเลือกคลาส . ให้ใช้อักขระ # เพื่อสั่งให้ CSS ค้นหาองค์ประกอบที่ตรงกับ id ที่ตามหลัง

หมายเหตุ: หากเบราว์เซอร์พบอินสแตนซ์ของ id มากกว่า 1 รายการ เบราว์เซอร์จะยังคงใช้กฎ CSS ที่ตรงกับตัวเลือกของ id นั้น อย่างไรก็ตาม องค์ประกอบที่มีแอตทริบิวต์ id ควรมีค่าที่ไม่ซ้ำกัน ดังนั้นโปรดหลีกเลี่ยงการใช้สไตล์ที่มีตัวเลือก id เว้นแต่คุณจะเขียน CSS ที่เฉพาะเจาะจงมากสำหรับองค์ประกอบเดียว เนื่องจากคุณจะใช้สไตล์เหล่านั้นซ้ำที่อื่นไม่ได้

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

Browser Support

• 1
• 12
• 1
• 3

Source

คุณค้นหาองค์ประกอบที่มีแอตทริบิวต์ HTML บางรายการ หรือมีค่าบางอย่างสำหรับแอตทริบิวต์ HTML ได้โดยใช้ตัวเลือกแอตทริบิวต์ สั่งให้ CSS ค้นหาแอตทริบิวต์โดยใส่ตัวเลือกไว้ในวงเล็บเหลี่ยม ([ ])

[data-type='primary'] {
  color: red;
}

CSS นี้จะค้นหาองค์ประกอบทั้งหมดที่มีแอตทริบิวต์ data-type ที่มีค่าเป็น primary ดังนี้

<div data-type="primary"></div>

แทนที่จะมองหาค่าที่เฉพาะเจาะจงของ data-type คุณยังค้นหาองค์ประกอบที่มีแอตทริบิวต์นั้นอยู่ได้ โดยไม่คำนึงถึงค่าของแอตทริบิวต์

[data-type] {
  color: red;
}

<div data-type="primary"></div>
<div data-type="secondary"></div>

องค์ประกอบ <div> ทั้ง 2 รายการจะมีข้อความสีแดง

คุณสามารถใช้ตัวเลือกแอตทริบิวต์ที่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ได้โดยการใส่โอเปอเรเตอร์ s ลงในตัวเลือกแอตทริบิวต์

[data-type='primary' s] {
  color: red;
}

ซึ่งหมายความว่าหากองค์ประกอบ HTML มี data-type ของ Primary แทนที่จะเป็น primary องค์ประกอบนั้นจะไม่แสดงข้อความสีแดง คุณทําตรงข้ามได้ นั่นคือไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ โดยใช้โอเปอเรเตอร์ i

นอกจากโอเปอเรเตอร์ตัวพิมพ์เล็กและตัวพิมพ์ใหญ่แล้ว คุณยังมีสิทธิ์เข้าถึงโอเปอเรเตอร์ที่จับคู่บางส่วนของสตริงภายในค่าแอตทริบิวต์

/* A href that contains "example.com" */
[href*='example.com'] {
  color: red;
}

/* A href that starts with https */
[href^='https'] {
  color: green;
}

/* A href that ends with .com */
[href$='.com'] {
  color: blue;
}

ในการแสดงตัวอย่างนี้ โอเปอเรเตอร์ `$` ในตัวเลือกแอตทริบิวต์จะรับประเภทไฟล์จากแอตทริบิวต์ `href` วิธีนี้ช่วยให้คุณใส่คำนำหน้าป้ายกำกับตามประเภทไฟล์ได้โดยใช้องค์ประกอบจำลอง

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

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

strong,
em,
.my-class,
[lang] {
  color: red;
}

ตัวอย่างนี้ขยายการเปลี่ยนสีไปยังทั้งองค์ประกอบ <strong> และองค์ประกอบ <em> และยังขยายไปยังคลาสชื่อ .my-class และองค์ประกอบที่มีแอตทริบิวต์ lang ด้วย

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับตัวเลือกแบบง่าย

* {}

มีการใช้ตัวเลือกแบบง่ายประเภทใดในสนิปเพลตด้านบน

แอตทริบิวต์

[] ใช้สำหรับตัวเลือกแอตทริบิวต์แบบง่าย

รหัส

# ใช้สำหรับเครื่องมือเลือกแบบง่ายของ ID

สากล

* คือตัวเลือกแบบง่ายสากล

คลาส

. ใช้สำหรับเครื่องมือเลือกแบบง่ายของ class

div {}

มีการใช้ตัวเลือกแบบง่ายประเภทใดในสนิปเพลตด้านบน

คลาส

. ใช้สำหรับเครื่องมือเลือกแบบง่ายของ class

ประเภท

ชื่อ element ใช้สำหรับเครื่องมือเลือกแบบง่ายประเภท

แอตทริบิวต์

วงเล็บเหลี่ยม [] ใช้สำหรับเครื่องมือเลือกแบบง่ายของแอตทริบิวต์

รหัส

ใช้ # สำหรับเครื่องมือเลือกแบบง่ายของ ID

คลาสจำลองและองค์ประกอบจำลอง

CSS มีประเภทตัวเลือกที่มีประโยชน์ซึ่งมุ่งเน้นที่สถานะแพลตฟอร์มที่เฉพาะเจาะจง เช่น เมื่อวางเมาส์เหนือองค์ประกอบ โครงสร้างภายในองค์ประกอบ หรือส่วนต่างๆ ขององค์ประกอบ

คลาสจำลอง

องค์ประกอบ HTML อยู่ในรูปแบบต่างๆ ไม่ว่าจะมีการโต้ตอบกับองค์ประกอบนั้น หรือองค์ประกอบย่อยขององค์ประกอบนั้นอยู่ในสถานะหนึ่งๆ

เช่น ผู้ใช้อาจวางเมาส์เหนือองค์ประกอบ HTMLหรือองค์ประกอบย่อยก็ได้ ในกรณีดังกล่าว ให้ใช้คลาสจำลอง :hover

/* Our link is hovered */
a:hover {
  outline: 1px dotted green;
}

/* Sets all even paragraphs to have a different background */
p:nth-child(even) {
  background: floralwhite;
}

ดูข้อมูลเพิ่มเติมในโมดูลคลาสจำลอง

องค์ประกอบจำลอง

องค์ประกอบจำลองแตกต่างจากคลาสจำลองตรงที่องค์ประกอบจำลองจะทํางานราวกับว่ากําลังแทรกองค์ประกอบใหม่ด้วย CSS แทนที่จะตอบสนองต่อสถานะของแพลตฟอร์ม องค์ประกอบจำลองยังมีไวยากรณ์แตกต่างจากคลาสจำลองด้วย เนื่องจากเราใช้โคลอนคู่ (::) แทนการใช้โคลอนเดี่ยว (:)

หมายเหตุ: เครื่องหมายโคลอนคู่ (::) เป็นตัวช่วยแยกองค์ประกอบจำลองออกจากคลาสจำลอง แต่เนื่องจากไม่มีความแตกต่างนี้ในข้อกำหนด CSS เวอร์ชันเก่า เบราว์เซอร์จึงรองรับเครื่องหมายโคลอนเดี่ยวสำหรับองค์ประกอบจำลองเดิม เช่น :before และ :after เพื่อช่วยในการรองรับการทำงานร่วมกับเบราว์เซอร์รุ่นเก่า เช่น IE8

.my-element::before {
  content: 'Prefix - ';
}

ดังในตัวอย่างด้านบนที่คุณใส่คำนำหน้าประเภทไฟล์ไว้หน้าป้ายกำกับของลิงก์ คุณสามารถใช้องค์ประกอบจำลอง ::before เพื่อแทรกเนื้อหาที่จุดเริ่มต้นขององค์ประกอบ หรือใช้องค์ประกอบจำลอง ::after เพื่อแทรกเนื้อหาที่จุดสิ้นสุดขององค์ประกอบ

แต่องค์ประกอบจำลองไม่ได้จำกัดอยู่แค่การแทรกเนื้อหา นอกจากนี้ คุณยังใช้เพื่อกําหนดเป้าหมายส่วนต่างๆ ขององค์ประกอบได้ด้วย ตัวอย่างเช่น สมมติว่าคุณมีรายการ ใช้ ::marker เพื่อจัดรูปแบบสัญลักษณ์หัวข้อย่อย (หรือตัวเลข) แต่ละรายการในรายการ

/* Your list will now either have red dots, or red numbers */
li::marker {
  color: red;
}

นอกจากนี้ คุณยังใช้ ::selection เพื่อจัดรูปแบบเนื้อหาที่ผู้ใช้ไฮไลต์ไว้ได้ด้วย

::selection {
  background: black;
  color: white;
}

ดูข้อมูลเพิ่มเติมในโมดูลเกี่ยวกับองค์ประกอบจำลอง

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับตัวเลือกเสมือน

ตัวเลือกองค์ประกอบจำลองใช้เครื่องหมายโคลอนกี่ตัว

:

: 1 ตัวใช้เพื่อกำหนดเป้าหมายคลาสจำลอง

::

:: 2 ตัวใช้เพื่อกำหนดเป้าหมายองค์ประกอบจำลอง

:::

การดำเนินการนี้ไม่ถูกต้องและไม่ได้กําหนดเป้าหมาย

p:hover {
  background: white;
  color: black;
}

มีการใช้ตัวเลือกจำลองประเภทใดในสนิปเพลตด้านบน

คลาสจำลอง

: 1 ตัวใช้เพื่อกำหนดเป้าหมายคลาสจำลอง

องค์ประกอบจำลอง

:: 2 ตัวใช้เพื่อกำหนดเป้าหมายองค์ประกอบจำลอง

ตัวเลือกที่ซับซ้อน

คุณได้ดูตัวเลือกต่างๆ มากมายแล้ว แต่บางครั้งคุณจะต้องควบคุมแบบละเอียดมากขึ้นด้วย CSS ในกรณีนี้ ตัวเลือกที่ซับซ้อนจะเข้ามาช่วย

โปรดทราบว่าแม้ว่าตัวเลือกต่อไปนี้จะให้ความสามารถมากขึ้น แต่เราจะเลือกตามลำดับชั้นจากบนลงล่างได้เท่านั้น โดยเลือกองค์ประกอบย่อย เราไม่สามารถกําหนดเป้าหมายขึ้นและเลือกองค์ประกอบหลักได้ เราจะอธิบายความหมายและวิธีการทํางานของการแสดงโฆษณาตามลำดับขั้นในบทเรียนต่อๆ ไป

ตัวรวม

ตัวคอมบิเนเตอร์คือสิ่งที่อยู่ตรงกลางระหว่างตัวเลือก 2 รายการ เช่น หากตัวเลือกคือ p > strong ตัวคอมบิเนเตอร์คืออักขระ > ตัวเลือกที่ใช้คอมบิเนเตอร์เหล่านี้จะช่วยคุณเลือกรายการตามตําแหน่งในเอกสาร

ตัวคอมบิเนเตอร์ขององค์ประกอบสืบทอด

หากต้องการทําความเข้าใจตัวรวมองค์ประกอบที่สืบทอด คุณต้องเข้าใจองค์ประกอบหลักและองค์ประกอบย่อยก่อน

<p>A paragraph of text with some <strong>bold text for emphasis</strong>.</p>

องค์ประกอบหลักคือ <p> ที่มีข้อความ ภายในองค์ประกอบ <p> มีองค์ประกอบ <strong> ซึ่งทำให้เนื้อหาเป็นตัวหนา เนื่องจากอยู่ภายใน <p> จึงถือเป็นองค์ประกอบย่อย

ตัวรวมองค์ประกอบที่สืบทอดมาช่วยให้เรากําหนดเป้าหมายองค์ประกอบย่อยได้ ตัวอย่างนี้ใช้เว้นวรรค () เพื่อสั่งให้เบราว์เซอร์ค้นหาองค์ประกอบย่อย

p strong {
  color: blue;
}

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

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

คุณจะเห็นภาพเอฟเฟกต์นี้ได้ดีขึ้นในตัวอย่างข้างต้น ซึ่งใช้ตัวเลือกคอมบิเนเตอร์ .top div กฎ CSS ดังกล่าวจะเพิ่มระยะขอบด้านซ้ายให้กับองค์ประกอบ <div> เหล่านั้น เนื่องจากคอมบิเนเตอร์เป็นแบบเรียกซ้ำ องค์ประกอบ <div> ทั้งหมดที่อยู่ใน .top จึงจะมีระยะห่างจากขอบเดียวกัน

ดูที่แผง HTML ในการแสดงตัวอย่างนี้เพื่อดูว่าองค์ประกอบ .top มีองค์ประกอบย่อย <div> หลายรายการ ซึ่งองค์ประกอบย่อยเหล่านั้นก็มีองค์ประกอบย่อย <div> เช่นกัน

ตัวคอมบิเนเตอร์ของรายการถัดไป

คุณสามารถค้นหาองค์ประกอบที่อยู่ถัดจากองค์ประกอบอื่นโดยทันทีได้โดยใช้อักขระ + ในตัวเลือก

หากต้องการเพิ่มเว้นวรรคระหว่างองค์ประกอบที่ซ้อนกัน ให้ใช้คอมบิเนเตอร์องค์ประกอบพี่น้องถัดไปเพื่อเพิ่มเว้นวรรคเฉพาะในกรณีที่องค์ประกอบเป็นองค์ประกอบพี่น้องถัดไปขององค์ประกอบย่อยของ .top

คุณสามารถเพิ่มระยะขอบให้กับองค์ประกอบย่อยทั้งหมดของ .top ได้โดยใช้ตัวเลือกต่อไปนี้

.top * {
  margin-top: 1em;
}

ปัญหาของวิธีนี้คือ เนื่องจากคุณเลือกองค์ประกอบย่อยทุกรายการของ .top กฎนี้จึงอาจสร้างพื้นที่ว่างที่ไม่จำเป็นเพิ่มเติม คอมบิเนเตอร์องค์ประกอบพี่น้องถัดไปเมื่อใช้ร่วมกับตัวเลือกสากลจะช่วยให้คุณไม่เพียงควบคุมได้ว่าองค์ประกอบใดจะได้รับการจัดระยะห่าง แต่ยังใช้การจัดระยะห่างกับองค์ประกอบใดก็ได้ วิธีนี้ช่วยให้คุณมีความยืดหยุ่นในระยะยาว ไม่ว่าเอลิเมนต์ HTML ใดจะปรากฏใน .top ก็ตาม

ตัวคอมบิเนเตอร์ระดับถัดไป

ตัวคอมบิเนเตอร์ที่ตามมาจะคล้ายกับตัวเลือกพี่น้องถัดไปอย่างมาก แต่ให้ใช้อักขระ ~ แทนอักขระ + ความแตกต่างคือองค์ประกอบต้องอยู่หลังองค์ประกอบอื่นที่มีองค์ประกอบหลักเดียวกัน แทนที่จะเป็นองค์ประกอบถัดไปที่มีองค์ประกอบหลักเดียวกัน

ใช้ตัวเลือกที่ตามมาพร้อมกับคลาสจำลอง ":checked" เพื่อสร้างองค์ประกอบสวิตช์ CSS ล้วน

ตัวคอมบิเนเตอร์ลำดับถัดไปนี้มีความยืดหยุ่นน้อยลงเล็กน้อย ซึ่งมีประโยชน์ในบริบทต่างๆ เช่น ตัวอย่างข้างต้น ซึ่งเราเปลี่ยนสีของสวิตช์ที่กำหนดเองเมื่อช่องทําเครื่องหมายที่เชื่อมโยงมีสถานะ :checked

ตัวคอมบิเนเตอร์ย่อย

ตัวประกอบย่อย (หรือที่เรียกว่ารายการสืบทอดโดยตรง) ช่วยให้คุณควบคุมการเกิดซ้ำที่มาพร้อมกับตัวเลือกตัวประกอบได้มากขึ้น การใช้อักขระ > จะจํากัดตัวเลือกคอมบิเนเตอร์ให้ใช้กับรายการย่อยโดยตรงเท่านั้น

พิจารณาตัวอย่างตัวเลือกพี่น้องก่อนหน้าและถัดไปก่อนหน้านี้ ระบบจะเพิ่มเว้นวรรคให้กับองค์ประกอบพี่น้องถัดไปแต่ละรายการ แต่หากองค์ประกอบใดองค์ประกอบหนึ่งมีองค์ประกอบพี่น้องถัดไปเป็นองค์ประกอบย่อยด้วย ก็อาจส่งผลให้มีเว้นวรรคเพิ่มเติมที่ไม่ต้องการ

หากต้องการแก้ไขปัญหานี้ ให้เปลี่ยนตัวเลือกพี่น้องถัดไปเพื่อรวมคอมบิเนเตอร์ย่อย > * + * ต่อไปนี้ กฎจะมีผลกับแท็กย่อยโดยตรงของ .top เท่านั้น

ตัวเลือกแบบผสม

คุณสามารถรวมตัวเลือกเข้าด้วยกันเพื่อเพิ่มความเฉพาะเจาะจงและความสามารถในการอ่านได้ เช่น หากต้องการกําหนดเป้าหมายองค์ประกอบ <a> ที่มีคลาส .my-class ด้วย ให้เขียนดังนี้

a.my-class {
  color: red;
}

การดำเนินการนี้จะไม่เปลี่ยนสีลิงก์ทั้งหมดเป็นสีแดง และจะใช้สีแดงกับ .my-class ifอยู่ในองค์ประกอบ <a> ดูข้อมูลเพิ่มเติมได้ที่โมดูลความเฉพาะเจาะจง

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับตัวเลือกที่ซับซ้อน

สัญลักษณ์ใดต่อไปนี้ไม่ใช่ตัวรวมตัวเลือก

>

ตัวรวมรายการที่สืบทอดโดยตรง

÷

ไม่ถูกต้อง ไม่ใช่สัญลักษณ์ CSS

+

ตัวคอมบิเนเตอร์พี่น้องถัดไป

*

ตัวเลือกแบบง่ายแบบสากลนี้

.

ตัวเลือกคลาสแบบง่าย

section.awesome {
  border: 1px solid hotpink;
}

ตัวเลือกด้านบนคือตัวอย่างของ...

ตัวรวม

สัญลักษณ์ที่ใช้รวมตัวเลือกเข้าด้วยกันเพื่อให้เจาะจงมากขึ้น

ตัวเลือกคอมโพเนนต์

เมื่อใช้ตัวเลือกตั้งแต่ 2 รายการขึ้นไปร่วมกันโดยไม่มีคอมบิเนเตอร์เพื่อสร้างตัวเลือกที่เฉพาะเจาะจงมากขึ้น

Terminator

ไม่ใช่ประเภทตัวเลือก แต่ฟังดูคล้ายกันใช่ไหม 🤖

แหล่งข้อมูล

• ข้อมูลอ้างอิงเกี่ยวกับตัวเลือก CSS
• เกมตัวเลือกแบบอินเทอร์แอกทีฟ
• การอ้างอิงคลาสจำลองและองค์ประกอบจำลอง
• เครื่องมือที่แปลตัวเลือก CSS เป็นคำอธิบายภาษาอังกฤษแบบเข้าใจง่าย