ការប្រើ: លេខ n នៃប្រភេទ (n) ជាមួយតារាង
ដើម្បីធ្វើឱ្យតារាងងាយស្រួលក្នុងការអានវាជារឿយៗជួយដល់ជួររចនាប័ទ្មដែលមានពណ៌ផ្ទៃខាងក្រោយជំនួស។ វិធីមួយក្នុងចំណោមវិធីសាមញ្ញបំផុតចំពោះតារាងរចនាប័ទ្មគឺដើម្បីកំណត់ពណ៌ផ្ទៃខាងក្រោយនៃជួរដេកផ្សេងទៀត។ នេះត្រូវបានសំដៅជាញឹកញាប់ថាជា "ឆ្នូតសេះ។ "
អ្នកអាចសម្រេចបាននេះគឺដោយការកំណត់ជួរដេកផ្សេងទៀតជាមួយថ្នាក់ CSS ហើយបន្ទាប់មកកំណត់រចនាប័ទ្មសម្រាប់ថ្នាក់នោះ។ ការងារនេះមិនមានប្រសិទ្ធភាពល្អបំផុតឬមានប្រសិទ្ធភាពបំផុតទេ។
នៅពេលប្រើវិធីសាស្ត្រនេះរាល់ពេលដែលអ្នកត្រូវការកែសម្រួលតារាងនោះអ្នកត្រូវកែសម្រួលគ្រប់ជួរនីមួយៗនៅក្នុងតារាងដើម្បីឱ្យប្រាកដថាជួរដេកនីមួយៗត្រូវនឹងការផ្លាស់ប្តូរ។ ឧទាហរណ៍ប្រសិនបើអ្នកបញ្ចូលជួរដេកថ្មីទៅតារាងរបស់អ្នកជួរដេកផ្សេងទៀតទាំងអស់ខាងក្រោមវាត្រូវការឱ្យមានការផ្លាស់ប្តូរថ្នាក់។
CSS ធ្វើឱ្យវាមានភាពងាយស្រួលក្នុងការតុបតែងតារាងជាមួយនឹងឆ្នោតមួកសេះ។ អ្នកមិនចាំបាច់បន្ថែមគុណលក្ខណៈ HTML បន្ថែមឬថ្នាក់ CSS ទេអ្នកគ្រាន់តែប្រើ: nth-of-type (n) CSS selector ។
The: nth-of-type (n) គឺជារចនាប័ទ្ម pseudo-class តាមបែប CSS ដែលអនុញ្ញាតឱ្យអ្នកធ្វើធាតុរចនាសម័្ពន្ធដោយផ្អែកលើទំនាក់ទំនងរបស់ពួកគេជាមួយធាតុដើមរបស់មេនិងបងប្អូន។ អ្នកអាចប្រើវាដើម្បីជ្រើសធាតុមួយឬច្រើនអាស្រ័យលើលំដាប់ប្រភពរបស់ពួកគេ។ នៅក្នុងពាក្យផ្សេងទៀតវាអាចផ្គូផ្គងជារៀងរាល់ធាតុដែលជាកូនទីនៃប្រភេទជាក់លាក់មួយនៃមេរបស់ខ្លួន។
អក្សរ n អាចជាពាក្យគន្លឹះ (ដូចជាសេសឬគូ) លេខឬរូបមន្តមួយ។
ឧទាហរណ៍ដើម្បីរចនានិមិត្តសញ្ញាកថាខណ្ឌផ្សេងៗទៀតជាមួយពណ៌ផ្ទៃខាងក្រោយពណ៌លឿងឯកសារ CSS របស់អ្នកនឹងរួមបញ្ចូល:
p: nth-of-type (សេស) {
ផ្ទៃខាងក្រោយ: លឿង;
}
ចាប់ផ្ដើមជាមួយតារាង HTML របស់អ្នក
ដំបូងបង្កើតតារាងរបស់អ្នកដូចដែលអ្នកសរសេរជាធម្មតាក្នុង HTML ។ កុំបន្ថែមថ្នាក់ពិសេសណាមួយទៅជួរដេកឬជួរឈរ។
នៅក្នុងសន្លឹករចនាប័ទ្មរបស់អ្នកបន្ថែម CSS ដូចខាងក្រោម:
tr: nth-of-type (សេស) {
background-color: #ccc;
}
វានឹងធ្វើរចនាប័ទ្មរាល់ជួរដេកផ្សេងទៀតជាមួយពណ៌ផ្ទៃខាងក្រោយពណ៌ប្រផេះចាប់ផ្តើមពីជួរដេកទីមួយ។
រចនាប័ទ្មផ្តាច់មុខរចនាប័ទ្មក្នុងវិធីដូចគ្នា
អ្នកអាចធ្វើរចនាប័ទ្មដូចគ្នាទៅនឹងជួរឈរក្នុងតារាងរបស់អ្នក។ ដើម្បីធ្វើដូច្នេះគ្រាន់តែផ្លាស់ប្តូរ tr នៅក្នុងថ្នាក់ CSS របស់អ្នកទៅ td ។ ឧទាហរណ៍:
td: nth-of-type (សេស) {
background-color: #ccc;
}
ប្រើរូបមន្តក្នុងឧបករណ៏ទី n - of-type (n)
រូបមន្តសម្រាប់រូបមន្តដែលប្រើក្នុងឧបករណ៍ជ្រើសគឺ + b ។
a គឺជាចំនួនដែលតំណាងឱ្យរង្វង់ឬទំហំលិបិក្រម។
n គឺជាអក្សរ "n" ហើយតំណាងឱ្យលេខដែលជាផ្កាយនៅ 0 ។
+ គឺជាប្រតិបត្តិករដែលប្រហែលជា "-"
b ជាចំនួនគត់និងតំណាងឱ្យតម្លៃអុហ្វសិត - ឧទាហរណ៍តើចំនួនជួរដេកចុះក្រោមគួរជ្រើសអ្នកចាប់ផ្តើមប្រើពណ៌ផ្ទៃខាងក្រោយ។ នេះត្រូវបានទាមទារប្រសិនបើប្រតិបត្តិករត្រូវបានបញ្ចូលក្នុងរូបមន្ត។
ឧទាហរណ៍ប្រសិនបើអ្នកចង់កំណត់ពណ៌ផ្ទៃខាងក្រោយសម្រាប់ជួរដេកទី 3 រូបមន្តរបស់អ្នកនឹងជា 3n + 0 ។ CSS របស់អ្នកមើលទៅដូចនេះ:
ទី: ប្រភេទទី 1 នៃប្រភេទ (3n + 0) {
ផ្ទៃខាងក្រោយ: slategray;
}
ឧបករណ៍មានប្រយោជន៍សម្រាប់ការប្រើឧបករណ៍ជ្រើសប្រភេទទី 1
ប្រសិនបើអ្នកមានអារម្មណ៏តិចតួចដោយទិដ្ឋភាពរូបមន្តនៃការប្រើឧបករណ៍ជ្រើសប្រភេទទី 1 នៃប្រភេទសសៃសូហ្វិចសាកល្បងទី nth Tester ជាឧបករណ៍មានប្រយោជន៍មួយដែលអាចជួយអ្នកឱ្យនិយមន័យវាក្យសម្ព័ន្ធដើម្បីទទួលបានរូបរាងដែលអ្នកចង់បាន។ ប្រើម៉ឺនុយទម្លាក់ចុះដើម្បីជ្រើសប្រភេទទី 1 (អ្នកក៏អាចពិសោធន៍ជាមួយប្រភេទសម្មតិកម្មផ្សេងទៀតនៅទីនេះផងដែរដូចជាកូនទីប្រាំមួយ) ។