พอดแคสต์ 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
ด้วย
ตรวจสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับตัวเลือกง่ายๆ
* {}
ตัวเลือกอย่างง่ายประเภทใดที่ใช้ในข้อมูลโค้ดด้านบน
[]
ใช้สำหรับตัวเลือกแบบง่ายแอตทริบิวต์#
ใช้สำหรับตัวเลือกรหัสแบบง่าย*
คือตัวเลือกอย่างง่ายสำหรับสากล.
ใช้สำหรับตัวเลือกพื้นฐานแบบ classdiv {}
ตัวเลือกอย่างง่ายประเภทใดที่ใช้ในข้อมูลโค้ดด้านบน
.
สำหรับตัวเลือกอย่างง่ายของคลาสelement
จะใช้สำหรับตัวเลือกประเภทแบบง่าย[]
ใช้สำหรับตัวเลือกแบบง่ายของแอตทริบิวต์#
สำหรับตัวเลือกแบบง่ายรหัส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;
}
ดูข้อมูลเพิ่มเติมในโมดูลเกี่ยวกับองค์ประกอบเทียม
ตรวจสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับตัวเลือกเทียม
ตัวเลือกองค์ประกอบจำลองมีเครื่องหมายโคลอนกี่ตัว
:
1 รายการเพื่อกำหนดเป้าหมายคลาสเทียม::
2 รายการเพื่อกำหนดเป้าหมายองค์ประกอบเทียมp:hover { background: white; color: black; }
ตัวเลือกเทียมประเภทใดที่ใช้ในข้อมูลโค้ดด้านบน
:
1 รายการเพื่อกำหนดเป้าหมายคลาสเทียม::
2 รายการเพื่อกำหนดเป้าหมายองค์ประกอบเทียมตัวเลือกที่ซับซ้อน
คุณเคยเห็นตัวเลือกมากมาย แต่บางครั้งคุณอาจต้องการการควบคุมแบบละเอียดเพิ่มเติมกับ 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; }
ตัวเลือกด้านบนเป็นตัวอย่างของ...