ตัวเลือก

พอดแคสต์ CSS - 002: ตัวเลือก

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

<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 ได้

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

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

* {
  color: hotpink;
}

กฎนี้จะทำให้องค์ประกอบ HTML ทุกรายการในหน้ามีข้อความ hotpink

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

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

section {
  padding: 2em;
}

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

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

องค์ประกอบ 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 ที่มีคลาสที่กำหนดไว้ แทนที่จะจับคู่กับ คลาสนั้นแบบตรงตัว

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

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

#rad {
  border: 1px solid blue;
}

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

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

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

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

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

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

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

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

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

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

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

* {}

div {}

Pseudo-class และ Pseudo-element

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;
}

ดูข้อมูลเพิ่มเติมในโมดูล Pseudo-class

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

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

.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;
}

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

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

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

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

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

คุณเคยเห็นตัวเลือกมากมาย แต่บางครั้งคุณอาจต้องการการควบคุมแบบละเอียดเพิ่มเติมกับ CSS นี่คือที่ที่ตัวเลือกที่ซับซ้อนเข้ามาช่วยเหลือ

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

ชุดค่าผสม

ชุดค่าผสมคืออยู่ระหว่างตัวเลือก 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> เหล่านั้น เนื่องจาก Combinator ซ้ำกัน องค์ประกอบ <div> ทั้งหมดที่อยู่ใน .top จะมีระยะห่างจากขอบเดียวกันนี้

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

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

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

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

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

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

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

กลุ่มข้างเคียงที่ตามมา

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

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

ชุดค่าผสมย่อย

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

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

เพื่อลดปัญหานี้ เปลี่ยนตัวเลือกข้างเคียงถัดไปเพื่อรวมชุดค่าผสมย่อย: > * + * กฎจะมีผลเฉพาะกับผู้เผยแพร่โฆษณาย่อยของ .top โดยตรงเท่านั้น

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

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

a.my-class {
  color: red;
}

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

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

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

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

แหล่งข้อมูล

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