ตัวเลือก

พอดแคสต์ CSS - 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 รายการและการประกาศ

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

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

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

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

การสนับสนุนเบราว์เซอร์

• 1
• 12
• 1
• 1

แหล่งที่มา

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

* {
  color: hotpink;
}

กฎนี้จะทำให้องค์ประกอบ HTML ทั้งหมดในหน้าเว็บมีข้อความ Hotpink

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

การสนับสนุนเบราว์เซอร์

• 1
• 12
• 1
• 1

แหล่งที่มา

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

section {
  padding: 2em;
}

กฎนี้ทำให้องค์ประกอบ <section> ทุกรายการมี 2em เป็น padding ทุกด้าน

ตัวเลือกชั้นเรียน

การสนับสนุนเบราว์เซอร์

• 1
• 12
• 1
• 1

แหล่งที่มา

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

<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 อ่านเพิ่มเติมได้ในข้อกำหนด

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

การสนับสนุนเบราว์เซอร์

• 1
• 12
• 1
• 1

แหล่งที่มา

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

#rad {
  border: 1px solid blue;
}

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

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

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

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

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

การสนับสนุนเบราว์เซอร์

• 1
• 12
• 1
• 3

แหล่งที่มา

คุณมองหาองค์ประกอบที่มีแอตทริบิวต์ 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

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

สากล

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

คลาส

. จะใช้สำหรับตัวเลือกอย่างง่ายชั้นเรียน

div {}

ข้อมูลโค้ดด้านบนใช้ตัวเลือกแบบง่ายประเภทใด

คลาส

. จะใช้สำหรับตัวเลือกอย่างง่ายคลาส

ประเภท

ชื่อ element ใช้สำหรับตัวเลือกแบบง่าย type

แอตทริบิวต์

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

ID

ส่วน # จะใช้สำหรับตัวเลือกอย่างง่ายรหัส

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

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

คลาสจำลอง

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

เช่น ผู้ใช้อาจวางเมาส์เหนือองค์ประกอบ HTML ด้วยตัวชี้เมาส์หรือผู้ใช้วางเมาส์เหนือองค์ประกอบย่อยได้เช่นกัน สำหรับสถานการณ์ดังกล่าว ให้ใช้คลาส Pseudo :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;
}

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

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

องค์ประกอบจำลองแตกต่างจาก Pseudo-class เนื่องจากแทนที่จะตอบสนองต่อสถานะของแพลตฟอร์ม จะทำหน้าที่เหมือนกำลังแทรกองค์ประกอบใหม่ด้วย 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 รายการเพื่อกำหนดเป้าหมายคลาส Pseudo

::

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

:::

ซึ่งไม่ถูกต้องและไม่ได้กำหนดเป้าหมาย

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

ตัวอย่างสมมติที่ใช้ในข้อมูลโค้ดด้านบน

คลาส Pseudo

ใช้ : 1 รายการเพื่อกำหนดเป้าหมายคลาส Pseudo

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

ใช้ :: 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 URL นั้นอยู่ในองค์ประกอบ <a> ดูข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ที่โมดูลความเฉพาะเจาะจง

ตรวจสอบความเข้าใจของคุณ

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

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

>

ชุดค่าผสมสืบทอดโดยตรง

÷

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

+

ชุดค่าผสมข้างเคียงถัดไป

*

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

.

ตัวเลือกอย่างง่ายของชั้นเรียน

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

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

ชุดค่าผสม

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

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

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

จุดสิ้นสุด

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

แหล่งข้อมูล

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