CSS Child Element Selector

ប្រៀបធៀបទៅនឹងការជ្រើសរើសសមាសធាតុចេញពីកំណាត់ (Descendant selectors) ការជ្រើសរើសសមាសធាតុកូន (Child selectors) អាចជ្រើសរើសតែសមាសធាតុដែលជាសមាសធាតុនៃសមាសធាតុមួយ:

ជ្រើសរើសសមាសធាតុកូន

ប្រសិនបើអ្នកមិនចង់ជ្រើសរើសសមាសធាតុចេញពីកំណាត់ ប៉ុន្តែចង់បានកំណាត់ទម្ងន់តិច ដែលជាសមាសធាតុនៃសមាសធាតុមួយទីកន្លែង អ្នកគួរប្រើការជ្រើសរើសសមាសធាតុកូន (Child selector).

ឧទាហរណ៍ ប្រសិនបើអ្នកចង់ជ្រើសរើសតែសមាសធាតុ <strong>strong</strong> ដែលជាសមាសធាតុនៃសមាសធាតុ <h1> អ្នកអាចសរសេរដូចខាងក្រោម:

h1 > strong {color:red;}

ការវិនិច្ឆ័យនេះនឹងបង្កើតឲ្យតំណាង <strong>red</strong> សំរាប់សមាសធាតុ <strong>strong</strong> ដែលនៅក្រោម h1 ទីមួយ ប៉ុន្តែ <strong>strong</strong> ទីពីរនៅ h1 ទីពីរមិនមានការផ្លាស់ប្តូរ:

<h1>នេះគឺ <strong>សំខាន់</strong> <strong>សំខាន់</strong> ខ្លាំង។</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

Subukan Nang Personal

Explanasyon ng Grammar

Dapat nating napansin na ang sub-selector ay gumagamit ng magandang simbolo (sub-selector).

Ang magkakasamang alinman sa dalawa ng sub-selector ay maaaring may spacing, ito ay可选的. Kaya ang mga sumusunod na paraan ay walang problema:

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

Kung baka mabasa mula kanan papasok, ang selector h1 > strong ay pwedeng ipaliwanag na 'pilihin ang lahat ng strong na naging anak ng h1 na element'.

Kombinasyon ng Descendant Selector at Child Selector

Panghahanapin, narito ang selector na ito:

table.company td > p

Ang selector na ito ay pumili ng lahat ng p na naging anak ng td na naging anak ng table, na ang table na ito ay may class na company.