Khmer Angkor Academy | សិក្សាបង្កើតគេហទំព័រជាភាសាខ្មែរ

Selector គឺអ្វី?

Selector គឺជាផ្នែកនៃ CSS rule ដែលប្រើសម្រាប់ជ្រើសរើសធាតុ HTML ដែលយើងចង់រចនា ។

ដូចម្តេចឲ្យចាំបានងាយ?

គិតថា Selector ដូចការចង្អុលម្រាមដៃទៅកាន់អ្វីមួយ ។ មុននឹងផ្លាស់ប្តូរអ្វីមួយ យើងត្រូវតែចង្អុលទៅវាជាមុនសិន ។

selector {
    property: value;
}

១. Selector មូលដ្ឋាន (Basic Selectors)

១.១. Universal Selector (*)

ចាប់យកធាតុគ្រប់ទាំងអស់នៅក្នុងទំព័រ ។

ចំណាំ: Universal Selector ប៉ះពាល់ធាតុទាំងអស់ ដូច្នេះប្រើដោយប្រុងប្រយ័ត្ន ។

១.២. Type Selector (Element Selector)

ចាប់យកធាតុទៅតាមឈ្មោះធាតុ HTML ។

១.៣. Class Selector (.)

ចាប់យកធាតុទៅតាមឈ្មោះ class ។ ធាតុច្រើនអាចមាន class ដូចគ្នា ។

១.៤. ID Selector (#)

ចាប់យកធាតុទៅតាមឈ្មោះ ID ។ ID គឺតែមួយគត់ក្នុងទំព័រ ។

ភាពខុសគ្នារវាង Class និង ID:

Class: អាចប្រើច្រើនដង ធាតុច្រើនអាចមាន class ដូចគ្នា
ID: ប្រើតែម្តងប៉ុណ្ណោះ ធាតុមួយគត់មាន ID ពិសេស

២. Combinator Selectors

២.១. Descendant Selector (space)

ចាប់ធាតុដែលនៅខាងក្នុងធាតុមួយទៀត (រាប់បញ្ចូលកូន ចៅ ចៅជីដូន) ។

២.២. Child Selector (>)

ចាប់តែធាតុកូនផ្ទាល់ (មិនរាប់ចៅ ចៅជីដូន) ។

២.៣. Adjacent Sibling Selector (+)

ចាប់ធាតុដែលនៅភ្លាមបន្ទាប់ពីធាតុមួយទៀត (បងប្អូនដែលនៅជាប់គ្នា) ។

២.៤. General Sibling Selector (~)

ចាប់ធាតុបងប្អូនទាំងអស់ដែលនៅបន្ទាប់ ។

៣. Grouping Selector (,)

ចាប់ធាតុច្រើនប្រភេទក្នុងពេលតែមួយ ដើម្បីកាត់បន្ថយកូដ ។

៤. Attribute Selectors

ចាប់ធាតុទៅតាម attribute និងតម្លៃរបស់វា ។

៤.១. [attr] - មាន Attribute

៤.២. [attr="value"] - តម្លៃត្រូវគ្នាពេញលេញ

៤.៣. [attr^="value"] - ចាប់ផ្តើមដោយ

៤.៤. [attr$="value"] - បញ្ចប់ដោយ

៤.៥. [attr*="value"] - មានពាក្យនៅក្នុង

៤.៦. [attr~="value"] - មានពាក្យពេញលេញ

៥. Multiple Selectors

រួមបញ្ចូលគ្នានូវ selector ផ្សេងៗដើម្បីជ្រើសរើសឲ្យបានជាក់លាក់ ។

តារាងសង្ខេប Selector

Selector	ឧទាហរណ៍	ពន្យល់
*	`* { }`	គ្រប់ធាតុទាំងអស់
element	`p { }`	គ្រប់ `<p>`
.class	`.intro { }`	ធាតុមាន class="intro"
#id	`#header { }`	ធាតុមាន id="header"
A B	`div p { }`	`<p>` នៅក្នុង `<div>`
A > B	`div > p { }`	`<p>` កូនផ្ទាល់នៃ `<div>`
A + B	`h2 + p { }`	`<p>` ភ្លាមបន្ទាប់ពី `<h2>`
A ~ B	`h2 ~ p { }`	`<p>` បងប្អូនបន្ទាប់ពី `<h2>`
A, B	`h1, h2, p { }`	គ្រប់ `<h1>`, `<h2>`, `<p>`
[attr]	`[title] { }`	ធាតុមាន title attribute
[attr="val"]	`[type="text"] { }`	ធាតុមាន type="text"
[attr^="val"]	`[href^="https"] { }`	href ចាប់ផ្តើមដោយ "https"
[attr$="val"]	`[src$=".jpg"] { }`	src បញ្ចប់ដោយ ".jpg"
[attr*="val"]	`[href*="Khmer Angkor Academy"] { }`	href មាន "Khmer Angkor Academy"

ឧទាហរណ៍ពិតប្រាកដ

សេចក្តីសន្និដ្ឋាន

Selector ជាផ្នែកសំខាន់បំផុតនៃ CSS ដែលជួយយើងជ្រើសរើសធាតុ HTML ដើម្បីរចនា ។

Selector ប្រភេទសំខាន់ៗ:

Basic: *, element, .class, #id
Combinator: space, >, +, ~
Grouping: ,
Attribute: [attr], [attr="value"], [attr^="value"], [attr$="value"], [attr*="value"]
Multiple: p.class, div#id, .class1.class2

គន្លឹះ: ជ្រើសរើស Selector ឲ្យសមស្របតាមតម្រូវការ ។ ប្រើ class សម្រាប់ធាតុច្រើន និង ID សម្រាប់ធាតុតែមួយ ។

អំពី Selector

Selector គឺ​អ្វី?