នៅក្នុងភាសា CSS ការជ្រើសរើសយក element មកធ្វើការកែច្នៃទាំងឡាយ អាចត្រូវធ្វើឡើងតាមរយៈ attribute របស់ element ទាំងនោះ។ ពិនិត្យកម្មវិធីខាងក្រោមនេះ៖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Attribute Selector</title>
<style>
a[target] {
background-color: yellow;
}
</style>
</head>
<body>
The links with a target attribute gets a yellow background:
w3schools.com
disney.com
wikipedia.org
</body>
</html>
កាន់តែច្បាស់ជាងនេះទៀតនោះ យើងអាចជ្រើសរើសយក element ទាំងឡាយមកធ្វើការរចនា តាមរយៈ attribute ជាប់ជាមួយនឹងតំលៃរបស់វាមកជាមួយផងដែរ។
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Attribute Selector</title>
<style>
a[target=_blank] {
background-color: yellow;
}
</style>
</head>
<body>
The links with a target attribute gets a yellow background:
w3schools.com
disney.com
wikipedia.org
</body>
</html>
ចពោះការជ្រើសរើសយក element តាមរយៈ attribute ដែលមានទំរង់ជា [attribute~="value"] មានន័យថា ជាការជ្រើសរើសយក element ទាំងឡាយតាមរយៈ attribute ណាមួយ ដែលមានតំលៃមានពាក្យកំណត់ណាមួយនៅក្នុងនោះ។
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Attribute Selector</title>
<style>
[title~=web] {
border: 5px solid yellow;
}
</style>
</head>
<body>
The links with a target attribute gets a yellow background:
w3schools.com
disney.com
wikipedia.org
</body>
</html>
ចំពោះការជ្រើសរើសយក element ដែលមានទំរងជា [attribute|="value"] មានន័យថា គឹជាការជ្រើសរើសយក element ទាំងឡាយណា តាមរយៈ attribute ណាមួយដែលមានតំលៃចាប់ផ្តើមដោយពាក្យណាមួយ។
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Attribute Selector</title>
<style>
[class|=top] {
background: yellow;
}
</style>
</head>
<body>
Welcome
Hello world!
Are you learning CSS?
</body>
</html>
Welcome
Hello world!
Are you learning CSS?
ចំំពោះការជ្រើសរើសយក element ដែលមានទំរង់ជា [attribute^="value"] មានន័យថា គឹជាការជ្រើសរើសយក element ទាំងឡាយណា តាមរយៈ attribute ណាមួយដែលមានតំលៃមានពាក្យណាមួយនៅខាងដើម។
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Attribute Selector</title>
<style>
[class^=top] {
background: yellow;
}
</style>
</head>
<body>
Welcome
Hello world!
Are you learning CSS?
</body>
</html>
Welcome
Hello world!
Are you learning CSS?
ចំពោះការជ្រើសរើសយក element មានទំរង់ជា [attribute$="value"] មានន័យថា គឹជាការជ្រើសរើសយក element ទាំងឡាយណា តាមរយៈ attribute ណាមួយដែលមានតំលៃមានពាក្យណាមួយនៅខាងចុង។
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Attribute Selector</title>
<style>
[class$="test"] {
background: yellow;
}
</style>
</head>
<body>
The first div element.
The second div element.
The third div element.
This is some text in a paragraph.
</body>
</html>
This is some text in a paragraph.
ចំពោះការជ្រើសរើសយក element មានទំរង់ជា [attribute*="value"] មានន័យថា គឹជាការជ្រើសរើសយក element ទាំងឡាយណា តាមរយៈ attribute ណាមួយដែលមានតំលៃមានពាក្យណាមួយនៅក្នុងនោះ។
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Attribute Selector</title>
<style>
[class*="te"] {
background: yellow;
}
</style>
</head>
<body>
The first div element.
The second div element.
The third div element.
This is some text in a paragraph.
</body>
</html>
This is some text in a paragraph.
