ตัวผสมคือสิ่งที่อธิบายความสัมพันธ์ระหว่างตัวเลือก
ตัวเลือก CSS สามารถมีตัวเลือกแบบง่ายได้มากกว่าหนึ่งตัว ระหว่างความเรียบง่าย selector เราก็สามารถใส่ตัวผสมเข้าไปได้
มีตัวผสมที่แตกต่างกันสี่ตัวใน CSS:
ตัวเลือกลูกหลาน (ช่องว่าง)
ตัวเลือกลูก (>)
ตัวเลือกพี่น้องที่อยู่ติดกัน (+)
ตัวเลือกพี่น้องทั่วไป (~)
ตัวเลือกลูกหลานตรงกับองค์ประกอบทั้งหมดที่เป็นลูกหลานของที่ระบุ องค์ประกอบ.
ตัวอย่างต่อไปนี้เลือกทั้งหมด <p> องค์ประกอบภายใน <div> องค์ประกอบ:
div p {
background-color: yellow;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
div p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Descendant Selector</h2>
<p>The descendant selector matches all elements that are descendants of a specified element.</p>
<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>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
</body>
</html>
ตัวเลือกลูกจะเลือกองค์ประกอบทั้งหมดที่เป็นลูกของ องค์ประกอบที่ระบุ
ตัวอย่างต่อไปนี้เลือกทั้งหมด <p> องค์ประกอบที่เป็น ลูกของ <div> องค์ประกอบ:
div > p {
background-color: yellow;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Child Selector</h2>
<p>The child selector (>) selects all elements that are the children of a specified element.</p>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<section>
<!-- not Child but Descendant -->
<p>Paragraph 3 in the div (inside a section element).</p>
</section>
<p>Paragraph 4 in the div.</p>
</div>
<p>Paragraph 5. Not in a div.</p>
<p>Paragraph 6. Not in a div.</p>
</body>
</html>
ตัวเลือกพี่น้องที่อยู่ติดกันจะใช้เพื่อเลือกองค์ประกอบที่อยู่ติดกันโดยตรง หลังจากองค์ประกอบเฉพาะอื่น
องค์ประกอบพี่น้องจะต้องมีองค์ประกอบหลักเดียวกัน และ "ที่อยู่ติดกัน" หมายถึง "ตามไปทันที"
ตัวอย่างต่อไปนี้เลือกองค์ประกอบ <p> แรกที่ถูกวางไว้ทันทีหลังองค์ประกอบ <div>:
div + p {
background-color: yellow;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Adjacent Sibling Selector</h2>
<p>The + selector is used to select an element that is directly after another specific element.</p>
<p>The following example selects the first p element that are placed immediately after div elements:</p>
<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>
<div>
<p>Paragraph 5 in the div.</p>
<p>Paragraph 6 in the div.</p>
</div>
<p>Paragraph 7. After a div.</p>
<p>Paragraph 8. After a div.</p>
</body>
</html>
ตัวเลือกพี่น้องทั่วไปเลือกองค์ประกอบทั้งหมดที่เป็นพี่น้องถัดไปขององค์ประกอบที่ระบุ
ตัวอย่างต่อไปนี้เลือกทั้งหมด <p> องค์ประกอบที่เป็นพี่น้องถัดไปของ <div> องค์ประกอบ:
div ~ p {
background-color: yellow;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>General Sibling Selector</h2>
<p>The general sibling selector (~) selects all elements that are next siblings of a specified element.</p>
<p>Paragraph 1.</p>
<div>
<p>Paragraph 2.</p>
</div>
<p>Paragraph 3.</p>
<code>Some code.</code>
<p>Paragraph 4.</p>
</body>
</html>
ตัวอย่าง :
div p
คำอธิบายตัวอย่าง:
เลือกทั้งหมด <p> องค์ประกอบภายใน <div> องค์ประกอบ
ตัวอย่าง :
div > p
คำอธิบายตัวอย่าง:
เลือกทั้งหมด <p> องค์ประกอบที่ผู้ปกครองเป็น <div> องค์ประกอบ
ตัวอย่าง :
div + p
คำอธิบายตัวอย่าง:
เลือกองค์ประกอบ <p> แรกที่ถูกวางไว้ทันทีหลังองค์ประกอบ <div>
ตัวอย่าง :
p ~ ul
คำอธิบายตัวอย่าง:
เลือกทุก <ul> องค์ประกอบที่นำหน้าด้วย <p> องค์ประกอบ