การกำหนด ว่าจะกำหนดค่าให้กับ element ไหนบ้าง มีค่าเป็นแบบไหน โดยการใช้เครื่องหมาย
descendant selector (space) ทุกตัว
child selector (>) ไม่ที่ผสม
adjacent sibling selector (+) หนึ่งตัว ถัดลงไป
general sibling selector (~) ทุกตัวถัดลงไปโดยปกติเราก็จะกำหนดค่าให้กับ element แบบนี้ เราจะบอก ชื่อ-class ชื่อ-id หรือชื่อ-element ไปเลย เช่น
ขอ ขอ ขอเล่าเรื่องก่อนนิดนึ่ง ในเรื่องนี้เราจะสมมติให้ <div></div> เป็น แม่ และ <p></p> เป็น ลูกของ <div></div> และมีน้องๆ ของแม่ ที่เป็น <p></p> เหมือนกัน แต่อยู่คนละบ้าน และแม่มีพี่สาวแสนสวยด้วยคนหนึ่ง ที่พึ่งตามหากันเจอ ฮาๆๆ ในภายหลัง
Descendant Selector กำหนดค่าให้ลูกตัวเอง
จากตัวอย่างใน HTML เป็นการกำหนดค่าให้กับ element <div></div> ที่มี element <p></p> ทุกตัว โดยการใช้ space bar
คือ กำหนดค่าให้เฉพาะลูกของตัวเองและ คนที่มาอาศัย อยู่กับแม่ จากที่เห็น HTML ครอบครัวนี้ จะมีคนหนึ่งที่ไม่เหมือนเพื่อน <section><p></p></section> ก็ยังถูกกำหนดให้เข้ากับครอบครัวได้
CSS
div p {
background-color: cornflowerblue;
}HTML
<h2 class="container p-3">CSS Combinators</h2>
<div class="container">
<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 class="container">Paragraph 4. Not in a div.</p>
<p class="container">Paragraph 5. Not in a div.</p>
Child Selector กำหนดให้เฉพาะลูกของตัวเอง
จากตัวอย่างใน HTML เป็นการกำหนดค่าให้กับ element <div></div> ที่มี element <p></p> ให้เฉพาะ <p></p> เท่านั้น ไม่เอาที่มี <section><p></p></section> โดยการใช้เครื่องหมายมากกว่า >
คือ ครั้งนี้ต่างจาก ครั้งก่อน Descendant Selector ที่เคยกำหนดให้กัน มาตอนนี้เริ่มมีเงื่อนไขเพิ่มขึ้น จะกำหนดให้เฉพาะ ลูกของตัวเองเท่านั้น ไม่เอาผู้อาศัย <section><p></p></section>
CSS
div > p {
background-color: cornflowerblue;
}Adjacent Sibling Selector กำหนดพี่น้องที่ติดกัน
จากตัวอย่างใน HTML เป็นการกำหนดค่าให้กับ element <p></p> ที่ติดกับ element <div></div> และเป็น element แรกเท่านั้น โดยการใช้เครื่องหมายบวก +
คือ กำหนดให้เฉพาะน้องของแม่ คนแรก เท่านั้น น้องคนต่อไปไม่ได้กำหนด
CSS
div + p {
background-color: cornflowerblue;
}General Sibling Selector กำหนดให้น้องทุกคน
จากตัวอย่างใน HTML เป็นการกำหนดค่าให้กับ element <p></p> ทุกตัว ที่ถัดจาก element <div></div> แต่ไม่กำหนดให้ element <p></P> ที่อยู่ก่อนหน้า โดยการใช้เครื่องหมาย ประมาณ ~
คือ กำหนดให้น้องทุกคนของแม่ แต่ไม่รวมพี่สาวของแม่
CSS
div ~ p {
background-color: cornflowerblue;
}HTML
<h2 class="container p-3">CSS Combinators</h2>
<p class="container">Paragraph 1 in the div.</p>
<div class="container">
<p>Paragraph 2 in the div.</p>
<section><p>Paragraph 3 in the div.</p></section>
</div><p class="container">Paragraph 4. Not in a div.</p>
<p class="container">Paragraph 5. Not in a div.</p>
Combinators การกำหนดค่าให้กับ element โดยการใช้เครื่องหมาย space , > , + , ~ อาจจะยากไปหน่อย ถัดนัดแบบไหนก็ทำแบบน้ัน บางทีอาจถนัดกำหนดแบบ class หรือ id ก็สามารถทำได้เช่นเดียวกัน
