CSS ตัวเลือกdescendant

เลือกตัวแทนหลังจากประมาณ (descendant selector) มีชื่ออื่นอีกว่า เลือกตัวแทนที่รวมอยู่

selector หลังหลัก (descendant selector) สามารถเลือก element ที่เป็น descendant ของ element ใดๆ

เลือก element ตามสภาพแวดล้อม

สามารถนิยาม selector หลังหลัก (descendant selector) ให้กำหนดกฎที่ทำงานบนโครงสร้างเอกสารบางตัว และไม่ทำงานบนโครงสร้างเอกสารบางตัวอื่น

เช่นเดียวกับว่า หากต้องการใช้ style สำหรับ element em ที่อยู่ใน element h1 แล้ว สามารถเขียนได้นี้:

h1 em {color:red;}

กฎนี้จะทำให้ text ของ element em ที่เป็น descendant ของ element h1 มีสีแดง อย่างไรก็ตาม text em อื่น ๆ (เช่น paragraph หรือ blockquote) จะไม่ถูกเลือกโดยกฎนี้:

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

ทดลองด้วยตัวเอง

ต้องการก็สามารถใส่ attribute class บน element em ที่อยู่ใน h1 ได้ แต่ชัดเจนว่า selector หลังหลัก (descendant selector) มีประสิทธิภาพมากขึ้น

การอธิบายกฎระเบียบ

ใน selector หลังหลัก (descendant selector) กฎของฝั่งซ้ายของ selector ประกอบด้วย selector สองหรือมากกว่าด้วยสเปซที่แยกตัว สเปซนี้เป็นสัญญาณเชื่อม (combinator) แต่ละสเปซเชื่อมสามารถอ่านว่า '... ใน ... หา', '... ในส่วนของ ...', '... ใน descendant ของ ...' แต่ต้องอ่านจากฝั่งขวาไปทางซ้าย

ดังนั้น selector h1 em สามารถอ่านว่า 'เป็น em ที่เป็น descendant ของ element h1 ทุกตัว' หากอ่าน selector จากฝั่งซ้ายไปทางขวา สามารถเปลี่ยนว่า 'ทุก em ที่อยู่ใน h1 จะมี style ตามดังนี้'

การใช้งานที่เฉพาะ

ฟังก์ชันของ selector หลังหลัก (descendant selector) มีความมีนักอย่างมาก ด้วยมัน สามารถทำงานที่ไม่อาจทำได้ใน HTML ได้มีความเป็นไปได้

จงเลือกเอาเอกสารที่มี sidebar และส่วนหลัก (main content) ซึ่ง sidebar มีสีพื้นหลังเป็นสีสนิท และส่วนหลักมีสีพื้นหลังเป็นสีขาว ทั้งสองส่วนนี้ต่างมีรายการลิงก์ในด้านนอก แต่ไม่สามารถกำหนดทุกลิงก์เป็นสีสนิทได้ เพราะดังนั้นลิงก์สีสนิทใน sidebar จะไม่เห็นได้

แนวทางแก้ปัญหาคือใช้ selector หลังหลัก (descendant selector)。ในขณะนี้ สามารถกำหนดค่า attribute class ที่มีชื่อ sidebar ให้กับ div ที่มี sidebar และกำหนดค่า attribute class ที่มีชื่อ maincontent ให้กับส่วนหลักของหน้าเว็บ แล้วเขียน style ตามดังนี้:

div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}

มีข้อสำคัญที่ง่ายต่อการละเลยในเรื่องตัวเลือกdescendant คือระยะห่างระหว่างสอง element สามารถเป็นอันที่ไม่จำกัด

ตัวอย่าง ถ้าเขียน ul em ตัวเขียนนี้จะเลือกทุก element em ที่ได้รับมาจาก element ul ไม่ว่าจะมีระดับที่ฝังลึกเท่าไร

ดังนั้น ul em จะเลือกทุก element em ในแสดงที่นี้:

<ul>
  <li>รายการที่ 1</li>
    <ol>
      <li>รายการที่ 1-1</li>
      <li>รายการที่ 1-2</li>
      <li>รายการที่ 1-3</li>
        <ol>
          <li>รายการที่ 1-3-1</li>
          <li>รายการ</li> <em>1-3-2</em></li>
          <li>รายการที่ 1-3-3</li>
        </ol>
      </li>
      <li>รายการที่ 1-4</li>
    </ol>
  </li>
  <li>รายการที่ 2</li>
  <li>รายการที่ 3</li>
</ul>

ทดลองด้วยตัวเอง