អំពី Selector

មេរៀន​នេះ មាន​ជា​វីដេអូ ។

មេរៀន​ជា​វីដេអូ

មុន​នឹង​ធ្វើ​ការ​រចនា​លើ​អ្វី​មួយ ដំបូងត្រូវ​ចាប់​យក​ធាតុ​នោះ​មក​សិន ។ ការ​ចាប់​យក​អ្វី​មួយ​មក​រចនា វា​ត្រូវ​បាន​ហៅ​ថា Selector ។

Selector មូលដ្ឋាន

Selector ១
របៀប​សរសេរ ឧទាហរណ៍ អត្ថន័យ
* * ចាប់​គ្រប់​ធាតុ​ទាំងអស់
ឈ្មោះ​ធាតុ h2 ចាប់ <h2>
.ឈ្មោះ​ថ្នាក់ .a ចាប់ធាតុ​ដែល​មាន class a
#ឈ្មោះ​អត្តសញ្ញាណ #b ចាប់ធាតុ​ដែល​មាន id b
Selector ២
របៀប​សរសេរ ឧទាហរណ៍ អត្ថន័យ
ធាតុ ធាតុ main p ចាប់ <p> ដែល​នៅ​ក្នុង <main>
ធាតុ > ធាតុ main > .info ចាប់ធាតុ​ដែល​មាន class info ដែល​ជា​កូន​របស់ <main>
ធាតុ + ធាតុ h2 + p ចាប់ <p> ដែល​នៅ​បន្ទាប់​ពី <h2>
ធាតុ ~ ធាតុ main ~ footer ចាប់ <footer> ដែល​នៅ​បន្ត​ពី <main>
សរសេរ​ជាប់​គ្នា p.a.b ចាប់ <p> ដែល​មាន class a និង class b
ធាតុ,ធាតុ,... ul, ol, .list ចាប់ <ul> <ol> និង​ធាតុ​ដែល​មាន class list
* { ​color: blue; }
main p {
    font-size: 20px; 
}
main > p {
    border-left: 5px solid green; 
} 
.a.b {
    text-decoration: none; 
}
.a {
    text-decoration: underline; 
}
#greeting { background: pink; }
main ~ footer {
    border: 2px solid red; 
}
main + footer {
    text-decoration: underline; 
    font-weight: bold;
}
<main>
    <p id="greeting">P tag ID greeting</p>
    <p class="a">P tag CLASS a</p>
    <p class="a b">P tag CLASS a និង b</p>
    <div>
        <p class="a">P tag CLASS a</p>
    </div>
    <footer>footer 0</footer>
</main>
<footer>footer 1</footer>
<footer>footer 2</footer>

ចាប់​តាម attribute

ដើម្បី​ចាប់​យក​ធាតុ​ទាំងឡាយ​ទៅ​តាម attribute ណាមួយ ត្រូវ​ប្រើសញ្ញា "[]" ហើយ​ត្រូវ​សរសេរ​លក្ខណៈ​នៃ attribute នោះ នៅ​ក្នុង ។

(ឈ្មោះ attribute តាង​ដោយ attr)

របៀប​សរសេរ ឧទាហរណ៍ ចាប់​ធាតុ​ដែល​មាន attribute ...
[attr] [title] title
[attr = តម្លៃ] [target=_blank] target តម្លៃ _blank
[attr ~= តម្លៃ] [title~=Khode] title តម្លៃមាន​ពាក្យ Khode
[attr |= តម្លៃ] [lang|=km] lang តម្លៃ​ផ្ដើម​ដោយ km
[attr ^= តម្លៃ] [title^="Welcome to"] title តម្លៃ​នាំ​មុខ​ដោយ​ឃ្លា Welcome to
[attr $= តម្លៃ] [src$=".jpg"] src តម្លៃ​បញ្ចប់​ដោយ .jpg
[attr *= តម្លៃ] [href*=khode] href តម្លៃ​មាន​អក្សរ​ khode

តម្លៃ attribute ណា​ដែល​មាន​សញ្ញា​ដក​ឃ្លា ត្រូវ​សរសេរ​តម្លៃ​នោះ​នៅ​ក្នុង​អព្ភន្តរសញ្ញា ។

[title^=khode] {
    background: lightgreen;
}
[title|=khode] {
    text-decoration: underline;
}
[title="khode academy"] {
    font-variant: small-caps;
}
<div title="khode academy">Khode Academy</div>
<div title="khode">Khode Academy</div>
<div title="khode-academy">Khode Academy</div>
ទំព៏រ​ដើម កូដ វីដេអូ បញ្ជី ចែករំលែក បោះពុម្ភ ឡើង​លើ Facebook Google Plus Twitter មតិ ឧបត្ថម្ភ ទំនាក់ទំនង អាជ្ញាប័ណ្ឌ សិទ្ធ​អ្នក​និពន្ធ បិទ Khode Academy មុន បន្ទាប់ ប្ដូរ​ម៉ូត