พอดแคสต์ 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 ได้
ตัวเลือกส่วนกลาง
ตัวเลือกสากล หรือที่เรียกว่าไวลด์การ์ด จะจับคู่กับองค์ประกอบใดก็ได้
* {
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
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้เกี่ยวกับตัวเลือกอย่างง่าย
* {}
ข้อมูลโค้ดด้านบนใช้ตัวเลือกแบบง่ายประเภทใด
[]
ใช้สำหรับตัวเลือกแบบง่ายแอตทริบิวต์#
ใช้สำหรับเครื่องมือเลือกแบบง่ายรหัส*
คือตัวเลือกแบบง่าย Universal.
จะใช้สำหรับตัวเลือกอย่างง่ายชั้นเรียนdiv {}
ข้อมูลโค้ดด้านบนใช้ตัวเลือกแบบง่ายประเภทใด
.
จะใช้สำหรับตัวเลือกอย่างง่ายคลาสelement
ใช้สำหรับตัวเลือกแบบง่าย type[]
จะใช้สำหรับตัวเลือกอย่างง่ายของแอตทริบิวต์#
จะใช้สำหรับตัวเลือกอย่างง่ายรหัสคลาส 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
องค์ประกอบจำลองมีไวยากรณ์ต่างจากคลาสจำลอง
เพราะแทนที่จะใช้โคลอนเดี่ยว (:
) เราใช้โคลอนคู่ (::
)
.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; }
ตัวอย่างสมมติที่ใช้ในข้อมูลโค้ดด้านบน
:
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
ชุดค่าผสมย่อย
ชุดค่าผสมย่อย (หรือที่เรียกว่าองค์ประกอบสืบทอดโดยตรง)
ช่วยให้คุณควบคุมการเกิดซ้ำที่มาพร้อมกับตัวเลือกชุดค่าผสม
การใช้อักขระ >
จะเป็นการจำกัดตัวเลือกชุดค่าผสมให้ใช้เฉพาะกับรายการย่อยโดยตรง
ลองพิจารณาตัวอย่างตัวเลือกระดับข้างเคียงก่อนหน้า โดยจะเว้นวรรคในแต่ละข้างเคียง แต่หากองค์ประกอบใดองค์ประกอบหนึ่งมีองค์ประกอบข้างเคียงถัดไปเป็นองค์ประกอบย่อยด้วย ก็อาจทำให้มีการเว้นระยะห่างเกินที่ไม่พึงประสงค์
เพื่อลดปัญหานี้ ให้เปลี่ยนตัวเลือกข้างเคียงถัดไปเพื่อรวมชุดค่าผสมย่อย > * + *
ตอนนี้กฎจะมีผลเฉพาะกับรายการย่อยของ .top
โดยตรงเท่านั้น
ตัวเลือกสารประกอบ
คุณรวมตัวเลือกเพื่อเพิ่มความเฉพาะเจาะจงและการอ่านได้
ตัวอย่างเช่น หากต้องการกำหนดเป้าหมายองค์ประกอบ <a>
ที่มีคลาส .my-class
ด้วย ให้เขียนดังนี้
a.my-class {
color: red;
}
ซึ่งจะไม่ใช้สีแดงกับลิงก์ทั้งหมด
และจะใช้สีแดงเฉพาะกับ .my-class
if URL นั้นอยู่ในองค์ประกอบ <a>
ดูข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ที่โมดูลความเฉพาะเจาะจง
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้เกี่ยวกับตัวเลือกที่ซับซ้อน
สัญลักษณ์ใดต่อไปนี้ไม่ใช่ชุดค่าผสมตัวเลือก
section.awesome { border: 1px solid hotpink; }
ตัวเลือกด้านบนเป็นตัวอย่างของ...