Pseudo Classes និង Pseudo Elements
សេចក្តីផ្តើម
Pseudo-classes និង Pseudo-elements គឺជាឧបករណ៍មានឥទ្ធិពលខ្លាំងក្នុង CSS ដែលអនុញ្ញាតឱ្យយើងកំណត់រចនាប័ទ្មលើធាតុតាមលក្ខខណ្ឌពិសេស ឬផ្នែកជាក់លាក់នៃធាតុ ដោយមិនចាំបាច់បន្ថែម classes ឬ IDs ផ្សេងទៀត។
ភាពខុសគ្នារវាង Pseudo-Class និង Pseudo-Element
- Pseudo-Class (
:) - កំណត់ស្ថានភាពពិសេសនៃធាតុ (state) - Pseudo-Element (
::) - កំណត់ផ្នែកជាក់លាក់នៃធាតុ (part)
Pseudo-Classes (ចំណុចស្ថានភាព)
Pseudo-Class ប្រើសម្រាប់កំណត់រចនាប័ទ្មលើធាតុនៅពេលវាស្ថិតក្នុងស្ថានភាពជាក់លាក់មួយ។ វាប្រើសញ្ញា colon តែមួយ (:) មុនឈ្មោះ។
១. Pseudo-Classes សម្រាប់អន្តរកម្ម (User Interaction)
ទាំងនេះប្រែប្រួលតាមការប្រតិបត្តិការរបស់អ្នកប្រើប្រាស់៖
| Pseudo-Class | ពិពណ៌នា | ឧទាហរណ៍ |
|---|---|---|
:hover |
នៅពេល mouse រំលងពីលើធាតុ | button:hover |
:active |
នៅពេលកំពុងចុចលើធាតុ | a:active |
:focus |
នៅពេលធាតុទទួលបានការផ្តោត (focused) | input:focus |
:visited |
សម្រាប់តំណដែលបានចូលមើលរួចហើយ | a:visited |
:link |
សម្រាប់តំណដែលមិនទាន់បានចូលមើល | a:link |
២. Structural Pseudo-Classes (រចនាសម្ព័ន្ធ)
ទាំងនេះជ្រើសរើសធាតុតាមទីតាំងក្នុងរចនាសម្ព័ន្ធ HTML៖
| Pseudo-Class | ពិពណ៌នា | ឧទាហរណ៍ |
|---|---|---|
:first-child |
កូនដំបូងបំផុតរបស់ parent | li:first-child |
:last-child |
កូនចុងក្រោយរបស់ parent | li:last-child |
:nth-child(n) |
កូនទីn របស់ parent | li:nth-child(2) |
:nth-child(odd) |
កូនលេខសេស (1, 3, 5...) | tr:nth-child(odd) |
:nth-child(even) |
កូនលេខគូ (2, 4, 6...) | tr:nth-child(even) |
:nth-of-type(n) |
ធាតុប្រភេទដូចគ្នាទីn | p:nth-of-type(2) |
:only-child |
កូនតែមួយគត់របស់ parent | p:only-child |
:empty |
ធាតុដែលគ្មានខ្លឹមសារ | div:empty |
៣. Form Pseudo-Classes (ទម្រង់)
សម្រាប់ធាតុក្នុងទម្រង់ (forms)៖
| Pseudo-Class | ពិពណ៌នា |
|---|---|
:enabled |
ធាតុដែលបើកប្រើប្រាស់ |
:disabled |
ធាតុដែលបិទប្រើប្រាស់ |
:checked |
checkbox/radio ដែលបានគូស |
:required |
input ដែលត្រូវការចាំបាច់ |
:optional |
input ដែលមិនចាំបាច់ |
:valid |
input ដែលត្រឹមត្រូវ |
:invalid |
input ដែលមិនត្រឹមត្រូវ |
:placeholder-shown |
input ដែលកំពុងបង្ហាញ placeholder |
៤. Other Useful Pseudo-Classes
| Pseudo-Class | ពិពណ៌នា | ឧទាហរណ៍ |
|---|---|---|
:not(selector) |
ជ្រើសរើសធាតុដែលមិនត្រូវនឹង selector | p:not(.intro) |
:root |
ធាតុ root (ជាធម្មតា <html>) | :root { --color: blue; } |
:target |
ធាតុដែលត្រូវ target ដោយ URL fragment | :target { background: yellow; } |
Pseudo-Elements (ផ្នែកធាតុ)
Pseudo-Elements អនុញ្ញាតឱ្យយើងកំណត់រចនាប័ទ្មលើផ្នែកជាក់លាក់មួយនៃធាតុ។ វាប្រើសញ្ញា double colon (::) មុនឈ្មោះ។
ចំណាំ: ក្នុង CSS3 បានប្តូរពី : មកជា :: ដើម្បីបែងចែកពី pseudo-classes។ ទោះជាយ៉ាងណា browsers នៅតែទទួលយក syntax ចាស់ដែរ។
Pseudo-Elements សំខាន់ៗ
| Pseudo-Element | ពិពណ៌នា |
|---|---|
::before |
បញ្ចូលខ្លឹមសារមុនធាតុ |
::after |
បញ្ចូលខ្លឹមសារបន្ទាប់ធាតុ |
::first-letter |
តួអក្សរដំបូងនៃធាតុ |
::first-line |
បន្ទាត់ដំបូងនៃធាតុ |
::selection |
ផ្នែកដែលអ្នកប្រើប្រាស់បានជ្រើសរើស |
::marker |
សញ្ញារបស់ list items |
::placeholder |
អត្ថបទ placeholder ក្នុង input |
::before និង ::after - ការប្រើប្រាស់ឧស្សាហ៍
Pseudo-elements ទាំងនេះមានប្រយោជន៍ខ្លាំងណាស់ក្នុងការបង្កើតធាតុលម្អដោយមិនចាំបាច់បន្ថែម HTML។
::first-letter និង ::first-line
ប្រើសម្រាប់បង្កើតរចនាប័ទ្មពិសេសលើបន្ទាត់ដំបូង ឬអក្សរដំបូង (drop caps)។
::selection - ការជ្រើសរើសអត្ថបទ
ផ្លាស់ប្តូររូបរាងនៃអត្ថបទនៅពេលជ្រើសរើស។
::placeholder - Input Placeholder
កំណត់រចនាប័ទ្មលើអត្ថបទ placeholder ក្នុង input fields។
ឧទាហរណ៍ជាក់ស្តែង - Navigation Menu
ឧទាហរណ៍នេះបង្ហាញការប្រើប្រាស់ pseudo-classes ជាច្រើនលើ navigation menu។
ឧទាហរណ៍ជាក់ស្តែង - Card Design
ប្រើ pseudo-elements ដើម្បីបង្កើតប្រយោជន៍លម្អលើ card។
ឧទាហរណ៍ជាក់ស្តែង - Tooltip
បង្កើត tooltip ដោយប្រើ ::before និង ::after។
តារាងសង្ខេបប្រៀបធៀប
Pseudo-Classes vs Pseudo-Elements
| លក្ខណៈ | Pseudo-Classes | Pseudo-Elements |
|---|---|---|
| Syntax | Single colon : |
Double colon :: |
| គោលបំណង | ជ្រើសរើសធាតុតាមស្ថានភាព | ជ្រើសរើសផ្នែកនៃធាតុ |
| ឧទាហរណ៍ | :hover, :focus, :first-child | ::before, ::after, ::first-letter |
| ចំនួនក្នុង selector | អាចប្រើបានច្រើន | មួយក្នុងមួយ selector |
nth-child() Formula
Pseudo-class :nth-child() អាចប្រើ formula an+b៖
:nth-child(2n)- លេខគូទាំងអស់ (same as even):nth-child(2n+1)- លេខសេសទាំងអស់ (same as odd):nth-child(3n)- រាល់ធាតុទី 3 (3, 6, 9...):nth-child(3n+1)- (1, 4, 7, 10...):nth-child(n+3)- ចាប់ពីធាតុទី 3 តទៅ:nth-child(-n+3)- 3 ធាតុដំបូង
ករណីប្រើប្រាស់ទូទៅ (Common Use Cases)
១. Button States
ប្រើ :hover, :active, :focus ដើម្បីបង្កើតអន្តរកម្មលើ buttons។
២. Form Validation
ប្រើ :valid, :invalid, :required ដើម្បីបង្ហាញស្ថានភាពទម្រង់។
៣. Decorative Elements
ប្រើ ::before និង ::after ដើម្បីបន្ថែម icons, decorations ដោយមិនចាំបាច់ HTML បន្ថែម។
៤. Table Styling
ប្រើ :nth-child(even/odd) ដើម្បីបង្កើត zebra striping លើតារាង។
៥. Typography
ប្រើ ::first-letter សម្រាប់ drop caps, ::first-line សម្រាប់រចនាប័ទ្មបន្ទាត់ដំបូង។
៦. Custom Selection
ប្រើ ::selection ដើម្បីផ្លាស់ប្តូរពណ៌ជ្រើសរើសអត្ថបទ។
ចំណាំសំខាន់និងការអនុវត្តល្អបំផុត
⚠️ ចំណាំសំខាន់
- ::before និង ::after ត្រូវការ
content: property content ជាចាំបាច់ទោះបីវាទទេក៏ដោយ - Browser support: pseudo-elements មួយចំនួនមិនទាន់ត្រូវបានគាំទ្រពេញលេញក្នុង browsers ចាស់
- Performance: ការប្រើ :hover លើធាតុច្រើនពេកអាចប៉ះពាល់ដល់ performance
- Specificity: pseudo-classes និង pseudo-elements មាន specificity ដូចគ្នានឹង classes
✅ ការអនុវត្តល្អបំផុត (Best Practices)
- ប្រើ
::(double colon) សម្រាប់ pseudo-elements ដើម្បីភាពច្បាស់លាស់ - ប្រើ ::before/::after ជំនួស HTML បន្ថែមសម្រាប់ decorative content
- រក្សា pseudo-class order សម្រាប់ links: LVHA (:link, :visited, :hover, :active)
- ប្រើ :not() ដើម្បីជៀសវាង overriding styles មិនចាំបាច់
- តែងតែបន្ថែម
content: "";នៅពេលប្រើ ::before/::after - ប្រើ :focus-visible ជំនួស :focus ដើម្បី UX ល្អជាង
- កុំប្រើ pseudo-elements លើធាតុដែល self-closing (img, input, br...)
🎯 Tips & Tricks
- ប្រើ
::before { content: attr(data-label); }ដើម្បីបង្ហាញតម្លៃ attribute - ប្រើ
:emptyដើម្បីលាក់ធាតុដែលគ្មានខ្លឹមសារ - រួមបញ្ចូល pseudo-classes:
li:first-child:hover - ប្រើ
:is()និង:where()ដើម្បីកាត់បន្ថយ code duplication
សង្ខេប: Pseudo-classes និង Pseudo-elements គឺជាឧបករណ៍មានឥទ្ធិពលខ្លាំងដែលជួយយើងសរសេរ CSS ស្អាតជាង និងមានប្រសិទ្ធភាពខ្ពស់។ Pseudo-classes ជ្រើសរើសធាតុតាមស្ថានភាពរបស់វា ចំណែក Pseudo-elements ជ្រើសរើសផ្នែកជាក់លាក់នៃធាតុ។ ការយល់ដឹងនិងប្រើប្រាស់ត្រឹមត្រូវនឹងធ្វើឱ្យកូដរបស់អ្នកមានភាពទំនើប maintainable និងមាន performance ល្អ។