ចែករំលែកលទ្ធផលការងារសម្រាប់ថ្ងៃនេះ

តើអ្វីជា id និង class Selectors?

ក្នុងលក្ខ័ណ្ឌនៃការ កំណត់ ការរចនាបន្ថែមទៅលើ HTML Element នោះ លោកអ្នកអាចប្រើ Selector ណាមួយក៏បាន id ឬ Class ។ នៅក្នុងមេរៀនទី ២ យើងបានសិក្សារអំពីការបន្ថែម រចនាទៅលើ HTML Tag ដោយ គ្រាន់តែ យក HTML tag មកធ្វើជា Selector តែក្នុងមេរៀននេះ គឺត្រូវយក HTML Attribute របស់ HTML tag យកមកធ្វើជា Selector វិញ។

តើអ្វីបានជាយក HTML Attribute ធ្វើជា Selector ជំនួស HTML tag ធ្វើជា Selector?

ចំលើយគឺងាយស្រួលក្នុងការ បន្ថែមការរចនា ទៅកាន់ HTML Element ជាក់លាក់ណាមួយ។

ឧទាហរណ៍ថា យើងមានអត្ថបទ បីជួរនៅក្នុង <p></p> tag ផ្សេងៗគ្នា (មើលកូដខាងក្រោម) ។  ខ្ញុំចង់ បន្ថែមពណ៌អក្សរ Paragraph 2 ទៅ ក្រហម តើត្រូវធ្វើដូចម្តេច?

<p> Paragraph 1</p>

<p> Paragraph 2</p>

<p> Paragraph 3</p>

តើត្រូវ ប្រើ HTML tag ជា Selector ឬ HTML Attribute(id ឬ class) ជា Selector ?

ចម្លើយ ប្រសិនបើយើង ប្រើ HTML tag ជា Selector នោះរាល់ HTML tag ទាំងអស់ដែលប្រភេទតែមួយ នឹងទទួលបានការរចនាបន្ថែមទាំងអស់ ។ តែប្រសិនបើ ប្រើ HTML Attribute វានឹងទទួលបានការរចនាបន្ថែម តែ HTML tag ណាដែលមាន Attribute id ឬ class ឈ្មោះនោះតែប៉ុណ្ណោះ។

HTML Coding

<p> Paragraph 1</p>

<p id=”para2″> Paragraph 2</p>

<p> Paragraph 3</p>

CSS Styling

#para2
{
color:red;
}


របៀបប្រើ id Selector

Id selector ត្រូវបានគេប្រើដើម្បី ដាក់ការរចនាបន្ថែម ទៅកាន់ HTML Element ជាក់លាក់ណាមួយ។  Id Selector គឺប្រើ id attribute របស់ HTML tag និងត្រូវបាន គេប្រកាសវា ដោយប្រើសញ្ញា # (Sharp) ។

ឧទាហរណ៍

កូដខាងក្រោមគឺ បន្ថែមទៅលើ <p id=”para1″> Your Text here. </p>

#para1
{
text-align:center;
color:red;
}

Remark មិនត្រូវដាក់ ឈ្មោះ id ផ្តើមដោយលេខទេ ព្រោះវានឹងមិនបង្ហាញជាមួយ  Mozilla/Firefox​ Browser។


របៀបប្រើ class Selector

Class selector ត្រូវបានគេប្រើដើម្បី ដាក់ការរចនាបន្ថែម ទៅកាន់ HTML Element ជាក់លាក់ណាមួយ។  Class Selector គឺប្រើ class attribute របស់ HTML tag និងត្រូវបាន គេប្រកាសវា ដោយប្រើសញ្ញា . (Point) ។ វាដូចគ្នានឹងការប្រើប្រាស់ id selector ដែរ។

ឧទាហរណ៍

កូដខាងក្រោមគឺ បន្ថែមទៅលើ <p class=”para1″> Your Text here. </p>

.para1
{
text-align:center;
color:red;
}

Remark មិនត្រូវដាក់ ឈ្មោះ id ផ្តើមដោយលេខទេ ព្រោះវានឹងមិនបង្ហាញជាមួយ Internet Explorer។