Pseudo Classes និង Pseudo Elements
ភាពឆ្លាតវៃរបស់ Selector (Pseudo Classes & Elements)
នេះជាអាវុធសម្ងាត់របស់ CSS! អ្នកមិនចាំបាច់ប្រើ JavaScript ដើម្បីដឹងថា "តើអ្នកប្រើប្រាស់កំពុងដាក់ Mouse លើប៊ូតុងនេះឬទេ?" នោះឡើយ។ Pseudo-classes ជួយអ្នកកំណត់រចនាបថក្នុង ស្ថានភាពពិសេស ណាមួយបានយ៉ាងងាយ។
១. Pseudo-classes ដែលពេញនិយមបំផុត (ប្រើសញ្ញា :)
:hover: ប្តូរស្ទីលនៅពេលអ្នកប្រើប្រាស់ យក Mouse ទៅដាក់ពីលើ Element នោះ (នេះគឺពេញនិយមបំផុត សម្រាប់ប៊ូតុង និង Link!)។:active: ប្តូរស្ទីលនៅពេលកំពុង ចុច លើវា (ឃ្លីកហើយមិនទាន់លែងដៃ)។:focus: ប្តូរស្ទីលនៅពេលដែលប្រអប់ (Input) កំពុងត្រូវបានជ្រើសរើសដើម្បីវាយអក្សរ។ ជួយអោយប្រអប់ភ្លឺឡើង!
២. ការជ្រើសរើសកូនតាមលំដាប់ (Structural Pseudo-classes)
ចុះបើអ្នកមានតារាងទិន្នន័យមួយ ហើយចង់លាបពណ៌ផ្ទៃខាងក្រោយ មួយបន្ទាត់រំលងមួយបន្ទាត់ (Zebra stripes)?
:first-child: ជ្រើសរើសតែកូនទី១។:last-child: ជ្រើសរើសតែកូនចុងក្រោយគេ។:nth-child(even): ជ្រើសរើសតែកូនគូ (ទី២, ទី៤, ទី៦...)។ (បើចង់បានកូនសេស ប្រើពាក្យodd)។
៣. Pseudo-elements (ប្រើសញ្ញា ::)
Pseudo-elements អនុញ្ញាតអោយអ្នក បង្កើត ឬតុបតែងផ្នែកតូចមួយ នៃ Element នោះ!
::first-letter: តុបតែង អក្សរទី១ នៃកថាខណ្ឌ អោយធំប្លែកពីគេ (ដូចអត្ថបទក្នុងទស្សនាវដ្តី)។::beforeនិង::after: អាចបន្ថែមរូបភាព ឬអក្សរ នៅពីមុខ ឬពីក្រោយ Element ដោយស្វ័យប្រវត្តិ។ (ត្រូវប្រើជាមួយ Propertycontent)។