Pseudo

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

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

Pseudo សំរាប់​ចាប់​យក​ធាតុ​​នៅ​ក្នុង​ពេល​ ឬ​ផ្នែកណាមួយ ។

ចាប់​យក <h2> ពេល​យើង​យក mouse រំលេង

Pseudo មាន ២ គឺ

Pseudo-Class

Pseudo-Class សំរាប់​ចាប់​យក​ធាតុ​នៅ​ក្នុង​ពេល​ណាមួយ ។ យើង​ត្រូវ​សរសេរ​វា ដោយ​ប្រើ​សញ្ញា : រួច​ឈ្មោះ​នៃ pseudo នោះ ។

div:hover គឺ​រចនា​លើ <div> នៅ​ពេល​ដែល​គេ​យក mouse ដាក់​ពី​លើ ។ (ប្រើ pseudo hover)

#b {
    background: aqua;
}
#b:hover {
    background: red;
}
<div>KHODE គឺ​ឥត​គិត​ថ្លៃ​សំរាប់​ថ្ងៃ​នេះ និង​ជា​និរន្តរ៍ ។</div>
<div id="b">យក mouse រំលង</div>

Pseudo-Class មាន​ច្រើន​ដែល​ត្រូវ​សិក្សា ។ ដូចនេះ ដើម្បី​ងាយ​ស្រួល​សិក្សា យើង​ចែក​វា​ជា ៤ ផ្នែក ៖

មូលដ្ឋាន

Pseudo មូលដ្ឋាន
Pseudo អត្ថន័យ
:hover នៅ​ពេល​យក mouse រំលង
:root ចាប់​យក​ឫស​នៃ​ទំព័រ
:target ចាប់​យក​ធាតុ​ដែល​មាន id ហើយ​ទំព័រ​បច្ចុប្បន្ន​ដំណើរការ​លើ id នោះ
:root { background: blue; }
body { background: yellow; }
#hov:hover {
    background: red;
    color: white;
}
#hov:target { background: green; }
<div>KHODE គឺ​ឥត​គិត​ថ្លៃ​សំរាប់​ថ្ងៃ​នេះ និង​ជា​និរន្តរ៍ ។</div>
<div id="hov">យក mouse រំលង</div>
<div style=" height: 300vh; ">
    <a href="#hov">ចុច​ទី​នេះ</a> ដើម្បី​ចូល​ទំព័រ​បច្ចុប្បន្ន តែ​នៅ​កន្លែង​ធាតុ​ដែល​មាន id hov ។
</div>

តំណភ្ជាប់

ចំណុច​នេះ យើង​សិក្សា​អំពី pseudo មួយ​ចំនួន​ដែល​ប្រើ​ជាមួយ​តំណភ្ជាប់ (<a>) ។

Pseudo ប្រើ​ជាមួយ <a>
Pseudo អត្ថន័យ
:active នៅ​ពេល​ចុច mouse ពី​លើ (មិន​ទាន់​ព្រលែង)
:link តំណភ្ជាប់​ដែល​មិន​ទាន់​បាន​ចូល​មើល
:visited តំណភ្ជាប់​ដែល​បាន​ចូល​មើល​រួច​មក​ហើយ
a:active { color: blue; }
:visited { color: red; }
:link { color: green; }
<a href="/about/">អំពី Khode</a>

ធាតុ​ទូទៅ

ចំណុច​ខាងក្រោម នឹង​ឃើញ​មាន​ពាក្យ​មួយ​ចំនួន​ដូច​ជា កូន និង​បងប្អូន ។

<div> មួយ​ផ្ទុក <p> មួយ និង <ul> មួយ ។ យើង​អាច​និយាយ​បាន​ថា <p> ជា​កូន​របស់ <div> ។ ហើយ <ul> ជា​បងប្អូន​ជាមួយ <p>

Pseudo ប្រើ​ជាមួយ​ធាតុ​ទូទៅ
Pseudo អត្ថន័យ
:empty ធាតុ​ដែល​គ្មាន​អ្វី​ក្នុង​នោះ ។
:lang(km) ធាតុ​ដែល​មាន attribute lang តម្លៃ km
:first-child ធាតុ​ដែល​ជា​កូន​ដំបូង​គេ ។
:first-of-type ធាតុ​ដែល​ជា​កូន​ដំបូង ក្នុង​ចំណោម​ធាតុ​ដូចគ្នា ។
:last-child ធាតុ​ដែល​ជា​កូដ​ចុង​ក្រោយ​គេ ។
:last-of-type ធាតុ​ដែល​ជា​កូដ​ចុង​ក្រោយ​គេ ក្នុង​ចំណោម​ធាតុ​ដូចគ្នា ។
:nth-child(n) ធាតុ​នៅ​លេខ​រៀង​ទី n ។
:nth-of-type(n) ធាតុ​នៅ​លេខ​រៀង​ទី n ក្នុង​ចំណោម​ធាតុ​ដូចគ្នា ។
:nth-last-child(n) ធាតុ​នៅ​លេខ​រៀង​ទី n រាប់​ពី​ក្រោយ ។
:nth-last-of-type(n) ធាតុ​នៅ​លេខ​រៀង​ទី n ក្នុង​ចំណោម​ធាតុ​ដូចគ្នា រាប់​ពី​ក្រោយ ។
:only-of-type ធាតុ​ដែល​ជា​កូន​ទោល ក្នុង​ចំណោម​ធាតុ​ដូចគ្នា ។
:only-child ធាុត​ដេល​ជា​កូន​ទោល ។
:not(selector) ធាតុ​ដែល​មិនមែន​ជា selector
p:first-child { background: blue; }
p:first-of-type { color: red; }
h3:nth-last-of-type(2) { color: green; }
p:not(.a) { background: aqua; }
<div>
    <h3>H3 1</h3>
    <p class="a" >អត្ថបទ​ទី១</p>
    <p>អត្ថបទ​ទី២</p>
    <h3>H3 2</h3>
    <p>អត្ថបទ​ទី៣</p>
</div>

ទម្រង់​បែបបទ

ចំណុច​នេះ យើង​សិក្សា​អំពី pseudo មួយ​ចំនួន​ដែល​ប្រើ​ជាមួយ​ធាតុ​នៃ​ទម្រង់​បែបបទ ។

Pseudo ប្រើ​ជាមួយ​ទម្រង់​បែបបទ
Pseudo ចាប់​យក​ទម្រង់​បែបបទ​ដែល ...
:checked ត្រូវ​បាន​ជ្រើសរើស
:disabled បាន​កំណត់ disabled attribute
:enabled មិន​បាន​កំណត់ disabled attribute
:optional មិន​បាន​កំណត់ required attribute
:required បាន​កំណត់ required attribute
:read-only បាន​កំណត់ readonly attribute
:read-write មិន​បាន​កំណត់ readonly attribute
:invalid តម្លៃ​របស់​វា មិន​ត្រូវ​តាម​ប្រភេទ
:valid តម្លៃ​របស់​វា ត្រូវ​តាម​ប្រភេទ
:in-range តម្លៃ​របស់​វា ស្ថិត​នៅ​ក្នុង​ព្រំដែន​ដែល​បាន​កំណត់
:out-of-range តម្លៃ​របស់​វា មិន​ស្ថិត​នៅ​ក្នុង​ព្រំដែន​ដែល​បាន​កំណត់
:focus បាន​ផ្ដោត​លើ
:invalid,
:out-of-range {
    background: red;
    color: white;
}
:disabled { text-decoration: line-through; }
<input disabled value="សាកល្បង"> <br>
<input type="number" min="5" max="10">
(សាក​វាយ​លេខ​ដែល​ធំជាង 10)

Pseudo-Element

Pseudo-Element សំរាប់​ចាប់​យក​ផ្នែក​ណាមួយ​នៃ​ធាតុ ។ យើង​ត្រូវ​សរសេរ​វា ដោយ​ប្រើ​សញ្ញា :: រួច​ឈ្មោះ​នៃ pseudo នោះ ។

Pseudo-Element
Pseudo ផ្នែក​ដែល​វា​ចាប់​យក
::first-line បន្ទាត់​ដំបូង
::first-letter តួ​អក្សរ​ដំបូង
::before មុន​ធាតុ​បច្ចុប្បន្ន
::after បន្ទាប់​ធាតុ​បច្ចុប្បន្ន
::selection នៅ​ពេល select
p:not(.note)::first-letter {
    background: pink;
    font-size: 3em;
}
p::first-line { font-size: larger; }
p.note::before {
    content: "ចំណាំ ៖ ";
    font-weight: bold;
    text-decoration: underline;
}
p::selection { background: orange; }
<p>KHODE គឺ​ជា​គេហទំព័រ​បង្ហាញ​ពី​មេរៀន​កូដ ចាប់​ពី​កំរិត​ដំបូង​បំផុត​ទៅ​កំរិត​ខ្ពស់ ។ KHODE គឺ​ឥត​គិត​ថ្លៃ​សំរាប់​ថ្ងៃ​នេះ និង​ជា​និរន្តរ៍ ។ KHODE មាន​បង្ហាញ​មេរៀន​ជា​អត្ថបទ វីដេអូ រូបភាព និង​មាន​លើក​ជា​ឧទាហរណ៍​ជាក់​ស្ដែង ដើម្បី​ធ្វើ​ឲ្យ​ការ​សិក្សា​កាន់​តែ​មាន​ប្រសិទ្ធភាព ។ KHODE ត្រូវ​បាន​ផ្សព្វផ្សាយ​ជា​ផ្លូវ​ការ​នៅ​ថ្ងៃ​ទី១ ខែ​មករា ឆ្នាំ​២០១៧ វេលា​ម៉ោង ៧​ព្រឹក ។ បើ​អ្នក​ស្រឡាញ់​ការ​សិក្សា​មួយ​នេះ សូម​ជួយ​ចែក​រំលែក ។</p>
<p class="note">ខ្ញុំ​មិន​បាន​សរសេរ​ពាក្យ​ចំណាំ​នេះ​នៅ​ក្នុង HTML ទេ ខ្ញុំ​កំណត់​វា​នៅ​ក្នុង CSS ។</p>
<p>KHODE គឺ​ជា​គេហទំព័រ​បង្ហាញ​ពី​មេរៀន​កូដ ចាប់​ពី​កំរិត​ដំបូង​បំផុត​ទៅ​កំរិត​ខ្ពស់ ។ KHODE គឺ​ឥត​គិត​ថ្លៃ​សំរាប់​ថ្ងៃ​នេះ និង​ជា​និរន្តរ៍ ។ KHODE មាន​បង្ហាញ​មេរៀន​ជា​អត្ថបទ វីដេអូ និង​មាន​លើក​ជា​ឧទាហរណ៍​ជាក់​ស្ដែង ដើម្បី​ធ្វើ​ឲ្យ​ការ​សិក្សា​កាន់​តែ​មាន​ប្រសិទ្ធភាព ។ KHODE ត្រូវ​បាន​ផ្សព្វផ្សាយ​ជា​ផ្លូវ​ការ​នៅ​ថ្ងៃ​ទី១ ខែ​មករា ឆ្នាំ​២០១៧ វេលា​ម៉ោង ៧​ព្រឹក ។ បើ​អ្នក​ស្រឡាញ់​ការ​សិក្សា​មួយ​នេះ សូម​ជួយ​ចែក​រំលែក ។</p>
ទំព៏រ​ដើម កូដ វីដេអូ បញ្ជី ចែករំលែក បោះពុម្ភ ឡើង​លើ Facebook Google Plus Twitter មតិ ឧបត្ថម្ភ ទំនាក់ទំនង អាជ្ញាប័ណ្ឌ សិទ្ធ​អ្នក​និពន្ធ បិទ Khode Academy មុន បន្ទាប់ ប្ដូរ​ម៉ូត