នៅក្នុងភាសា CSS យើងអាចធ្វើការជ្រើសរើស element ទាំងឡាយ តាមរយៈ element ណាផ្សេងទៀត តាមវិធីមួយចំនួន មានដូចជា descendant selector (space), child selector (>), adjacent sibling selector (+), general sibling selector (~) ។
ដោយឡែក ការជ្រើសរើស element រង អាចត្រូវធ្វើឡើងដោយប្រើប្រាស់វិធី descendant selector (space) ដូចខាងក្រោមនេះ៖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>CSS Combinator</title>
<style>
div p {
background-color: yellow;
}
</style>
</head>
<body>
Paragraph 1 in the div.
Paragraph 2 in the div.
Paragraph 3 in the div.
Paragraph 4. Not in a div.
Paragraph 5. Not in a div.
</body>
</html>
Paragraph 1 in the div.
Paragraph 2 in the div.
Paragraph 3 in the div.
Paragraph 4. Not in a div.
Paragraph 5. Not in a div.
ចំណែកឯវិធីជ្រើសរើស element តាមបែប Child Selector វិញត្រូវធ្វើឡើងតាមរយៈធាតុមេ ដូចខាងក្រោមនេះ៖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>CSS Combinator</title>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
Paragraph 1 in the div.
Paragraph 2 in the div.
Paragraph 3 in the div.
Paragraph 4 in the div.
Paragraph 5. Not in a div.
Paragraph 6. Not in a div.
</body>
</html>
Paragraph 1 in the div.
Paragraph 2 in the div.
Paragraph 3 in the div.
Paragraph 4 in the div.
Paragraph 5. Not in a div.
Paragraph 6. Not in a div.
ចំណែកឯ Adjacent Sibling Selector វិញ ត្រូវធ្វើឡើងតាម element ណាមួយ ដើម្បីជ្រើសរើសយក element sibling ដទៃទៀត។
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>CSS Combinator</title>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
Paragraph 1 in the div.
Paragraph 2 in the div.
Paragraph 3. Not in a div.
Paragraph 4. Not in a div.
</body>
</html>
Paragraph 1 in the div.
Paragraph 2 in the div.
Paragraph 3. Not in a div.
Paragraph 4. Not in a div.
ចំពោះវិធី General Sibling Selector វិញ គឺត្រូវធ្វើឡើងតាមរយៈធាតុណាមួយ ដោយប្រើប្រាស់សញ្ញា ~ ដូចខាងក្រោមនេះ៖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>CSS Combinator</title>
<style>
div ~ p {
background-color: yellow;
}
</style>
</head>
<body>
Paragraph 1.
Paragraph 2.
Paragraph 3.
Some code.
Paragraph 4.
</body>
</html>
Paragraph 1.
Paragraph 2.
Paragraph 3.
Some code.
Paragraph 4.
