Combinators

#HelloFrontend #HelloErmine #HelloWorld2021

Combinator เป็นเหมือนเทคนิคที่ทำให้เขียน CSS ได้ง่ายขึ้น ไม่ต้องสร้าง class ใหม่ในทุก element โดยเเบ่งประเภทออกเป็น 3 ประเภท

1. Descendant combinators

คือ การสั่งการทำงานทั้งหมด ทั้ง ลูก หลาน เหลน โหลน โดยการเขียนนั้น ใช้ "ช่องว่าง" ในการสั่งงาน

ตัวอย่าง

HTML

<div>
    <p>Paragraph 1 in the div.</p>
    <p>Paragraph 2 in the div.</p>
    <section><p>Paragraph 3 in the div.</p></section>
</div>

CSS

div p {
    background-color: yellow;
}

ผลลัพธ์

ผลลัพธ์

2. Child combinators

คือ การสั่งการทำงานเฉพาะ "ลูก" เท่านั้น ไม่นับรวมหลาน เหลน โหลน การเขียนนั้น ใช้ "เครื่องหมายมากกว่า (>)"

ตัวอย่าง

HTML

<div>
    <p>Paragraph 1 in the div.</p>
    <p>Paragraph 2 in the div.</p>
    <section><p>Paragraph 3 in the div.</p></section>
    <p>Paragraph 4 in the div.</p>
</div>

CSS

div > p {
    background-color: yellow;
}

ผลลัพธ์

ผลลัพธ์

จากตัวอย่างจะเห็นว่า เรากำหนดให้เลือกเเสดงผล tag p ที่เป็น ลูก ของ div ซึ่งจะมี tag p ที่อยู่ในลำดับลูก 3 tag จึงเเสดงผลเป็นเเถบเหลือง ส่วน p ที่ 3 อยู่ใน tag section อีกที ทำให้อยู่ในสถานะ ‘หลาน’ ของ div p ที่ 3 จึงไม่เเสดงผลเป็นเเถบเหลือง

3. Sibling combinators

Adjacent sibling combinator

คือ การสั่งการทำงานเฉพาะ "น้อง" ที่อยู่ถัดไป 1 คนเท่านั้น ไม่นับคนที่ 3 หรือ คนอื่น ๆ การเขียนนั้น ใช้ "เครื่องหมายบวก (+)"

ตัวอย่าง

HTML

<div>
    <p>Paragraph 1 in the div.</p>
    <p>Paragraph 2 in the div.</p>
</div>

<p>Paragraph 3. After a div.</p>
<p>Paragraph 4. After a div.</p>

CSS

div + p {
    background-color: yellow;
}

ผลลัพธ์

ผลลัพธ์

จากตัวอย่างจะเห็นว่า เรากำหนดให้เลือกเเสดงผล tag p ที่เป็น Adjacent sibling ของ div ซึ่งเป็น p ตัวที่ 3 ที่เป็นน้องลำดับถัดจาก div 1 ลำดับ จึงเเสดงผลเป็นเเถบเหลืองเเค่ tag p ตัวนี้ ส่วน p ตัวที่ 4 เป็นน้องจาก div ไป 2 ลำดับ จึงไม่เเสดงผล (เเสดงผลเเค่น้องลำดับที่ 1 เท่านั้น นอกนั้นไม่เเสดงผล)

General sibling combinator

คือ การสั่งการทำงานน้องที่อยู่ถัดไปทุก ๆ คน ใช้ "เครื่องหมายตัวหนอน (~)"

ตัวอย่าง

HTML

<p>Paragraph 1.</p>

<div>
    <p>Paragraph 2.</p>
</div>

<p>Paragraph 3.</p>
<code>Some code.</code>
<p>Paragraph 4.</p>

CSS

div ~ p {
    background-color: yellow;
}

ผลลัพธ์

ผลลัพธ์

จากตัวอย่างจะเห็นว่า เรากำหนดให้เลือกเเสดงผล tag p ที่เป็น General sibling ของ div ซึ่งมีเเค่ p ตัวที่ 3 เเละ 4 เท่านั้นที่เป็นน้องของ div จึงเเสดงผลเเถบสีเหลือง โดยเนื่องจาก p ตัวที่ 1 เขียนอยู่ก่อนหน้า div จึงมีสถานะเป็นพี่ของ div จึงไม่เเสดงผลเเถบเหลือง ส่วน tag code ไม่ใช่ tag p จึงไม่เเสดงผลเช่นกัน (ไม่เเสดงผลที่เป็นพี่ เเสดงผลเเค่ที่เป็นน้องเท่านั้น น้องในทุกลำดับ)