CSS Child Element Selector

ກັບຄູ່ເລືອກຫຼັງທີ່ (Descendant selectors) ຄູ່ເລືອກລູກສິ່ງ (Child selectors) ຈະພຽງແຕ່ເລືອກສິ່ງທີ່ເປັນລູກສິ່ງຂອງສິ່ງທີ່ຕ້ອງການ.

ການເລືອກລູກສິ່ງ

ຖ້າເຈົ້າບໍ່ຢາກເລືອກສິ່ງຫຼັງທີ່ບໍ່ຈະການເລືອກຫຼັກສິ່ງໄດ້ຫຼາຍກວ່າ ແຕ່ຢາກເລືອກສິ່ງຫຼັງຂອງສິ່ງທີ່ຕ້ອງການ ເຈົ້າສາມາດໃຊ້ຄູ່ເລືອກລູກສິ່ງ (Child selector).

ຕົວຢ່າງໄດ້ວ່າ ຖ້າເຈົ້າຢາກເລືອກສະເປພາສີສີແດງທີ່ເປັນສີສີແດງຫຼັງສິ່ງທີ່ເປັນສິ່ງຫຼັງ h1 ຄັ້ງທຳອິດ ເຈົ້າສາມາດຂຽນແບບນີ້:

h1 > strong {color:red;}

ກົດລະບຽບນີ້ຈະປ່ຽນສັບສົນສອງສາມສະເປພາສີສີແດງຫຼັງ h1 ຄັ້ງທຳອິດ ແຕ່ສະເປພາສີສີແດງຂອງ h1 ຄັ້ງທີສອງບໍ່ມີຜົນກະທົບ:

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

Try It Yourself

Grammar Explanation

You should have noticed that the child selector uses the greater than symbol (child combinator).

There can be whitespace on either side of the child combinator, which is optional. Therefore, the following styles are all acceptable:

h1 > strong
h1> strong
h1 >strong
h1>strong

If read from right to left, the selector h1 > strong can be interpreted as 'select all strong elements that are children of h1 elements'.

Combining Descendant and Child Selectors

Please see the following selector:

table.company td > p

The selector above will select all p elements that are children of td elements, which themselves inherit from the table element, which has a class attribute containing company.