CSS คลาสเทียมและส่วนเทียม

CSS คลาสเทียมและส่วนเทียม

บทความนี้อธิบายเกี่ยวกับคลาสจำลอง (pseudo-classes) และองค์ประกอบจำลอง (pseudo-elements) ใน CSS

คุณสามารถเรียนรู้เกี่ยวกับคลาสจำลอง เช่น :hover และองค์ประกอบจำลอง เช่น ::before

YouTube Video

HTML สำหรับการแสดงตัวอย่าง

css-pseudo.html
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Pseudo Class/Element</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-pseudo-class.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Pseudo Class/Element</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header><h2>Pseudo Class</h2></header>
 19        <article>
 20            <h3>:hover</h3>
 21            <section>
 22                <header><h4>CSS</h4></header>
 23<pre class="sample">
 24a:hover {
 25    color: red;
 26}
 27</pre>
 28                <header><h4>HTML</h4></header>
 29                <pre>&lt;a href="#"&gt;Example of hover&lt;/a&gt;</pre>
 30                <header><h4>HTML+CSS</h4></header>
 31                <section class="sample-view">
 32                    <a href="#">Example of hover</a><br>
 33                </section>
 34            </section>
 35        </article>
 36        <article>
 37            <h3>:focus</h3>
 38            <section>
 39                <header><h4>CSS</h4></header>
 40<pre class="sample">
 41input:focus {
 42    outline: 2px solid blue;
 43}
 44</pre>
 45                <header><h4>HTML</h4></header>
 46                <pre>&lt;input type="text" placeholder="Example of focus"&gt;</pre>
 47                <header><h4>HTML+CSS</h4></header>
 48                <section class="sample-view">
 49                    <input type="text" placeholder="Example of focus">
 50                </section>
 51            </section>
 52        </article>
 53        <article>
 54            <h3>:active</h3>
 55            <section>
 56                <header><h4>CSS</h4></header>
 57<pre class="sample">
 58button:active {
 59    background-color: green;
 60}
 61</pre>
 62                <header><h4>HTML</h4></header>
 63                <pre>&lt;button type="button"&gt;Example of active&lt;/button&gt;</pre>
 64                <header><h4>HTML+CSS</h4></header>
 65                <section class="sample-view">
 66                    <button type="button">Example of active</button>
 67                </section>
 68            </section>
 69        </article>
 70        <article>
 71            <h3>:empty</h3>
 72            <section>
 73                <header><h4>CSS</h4></header>
 74<pre class="sample">
 75.box:empty {
 76    background-color: lightgray;
 77    border: 1px dashed black;
 78    height: 50px;
 79    width: 50px;
 80}
 81</pre>
 82                <header><h4>HTML</h4></header>
 83<pre>
 84&lt;p class="box"&gt;&lt;/p&gt;
 85&lt;p class="box"&gt; &lt;/p&gt;
 86</pre>
 87                <header><h4>HTML+CSS</h4></header>
 88                <section class="sample-view">
 89                    <p class="box"></p>
 90                    <p class="box"> </p>
 91                </section>
 92            </section>
 93        </article>
 94        <article>
 95            <h3>:valid / :invalid</h3>
 96            <section>
 97                <header><h4>CSS</h4></header>
 98<pre class="sample">
 99input:valid {
100    border: 2px solid green;
101    background-color: #eaffea;
102}
103
104input:invalid {
105    border: 2px solid red;
106    background-color: #ffeaea;
107}
108</pre>
109                <header><h4>HTML</h4></header>
110<pre>
111&lt;form&gt;
112    &lt;label&gt;Username (min. 5 characters):&lt;/label&gt;
113    &lt;input type="text" pattern=".{5,}" required&gt;
114    &lt;button type="submit"&gt;Submit&lt;/button&gt;
115&lt;/form&gt;
116</pre>
117                <header><h4>HTML+CSS</h4></header>
118                <section class="sample-view">
119                    <form>
120                        <label>Username (min. 5 characters):</label>
121                        <input type="text" pattern=".{5,}" required>
122                        <button type="submit">Submit</button>
123                    </form>
124                </section>
125            </section>
126        </article>
127        <article>
128            <h3>:in-range / :out-of-range</h3>
129            <section>
130                <header><h4>CSS</h4></header>
131<pre class="sample">
132input[type="number"]:in-range {
133    border: 2px solid blue;
134    background-color: #eaf4ff;
135}
136
137input[type="number"]:out-of-range {
138    border: 2px solid orange;
139    background-color: #fff4e6;
140}
141</pre>
142                <header><h4>HTML</h4></header>
143<pre>
144&lt;form&gt;
145    &lt;label&gt;Age (between 18 and 99):&lt;/label&gt;
146    &lt;input type="number" min="18" max="99" required&gt;
147    &lt;button type="submit"&gt;Submit&lt;/button&gt;
148&lt;/form&gt;
149</pre>
150                <header><h4>HTML+CSS</h4></header>
151                <section class="sample-view">
152                    <form>
153                        <label>Age (between 18 and 99):</label>
154                        <input type="number" min="18" max="99" required>
155                        <button type="submit">Submit</button>
156                    </form>
157                </section>
158            </section>
159        </article>
160        <article>
161            <h3>:nth-child(n)</h3>
162            <section>
163                <header><h4>CSS</h4></header>
164<pre class="sample">
165li:nth-child(2) {
166    color: blue;
167    font-weight: bold;
168}
169
170li:nth-child(odd) {
171    background-color: lightblue;
172}
173
174li:nth-child(even) {
175    background-color: steelblue;
176}
177</pre>
178                <header><h4>HTML</h4></header>
179<pre>
180&lt;ul&gt;
181    &lt;li&gt;First Item&lt;/li&gt;
182    &lt;li&gt;Second Item&lt;/li&gt;
183    &lt;li&gt;Third Item&lt;/li&gt;
184    &lt;li&gt;Fourth Item&lt;/li&gt;
185&lt;/ul&gt;
186</pre>
187                <header><h4>HTML+CSS</h4></header>
188                <section class="sample-view">
189                    <ul>
190                        <li>First Item</li>
191                        <li>Second Item</li>
192                        <li>Third Item</li>
193                        <li>Fourth Item</li>
194                    </ul>
195                </section>
196            </section>
197        </article>
198        <article>
199            <h3>:first-child</h3>
200            <section>
201                <header><h4>CSS</h4></header>
202<pre class="sample">
203small:first-child {
204    font-weight: bold;
205    color: steelblue;
206}
207</pre>
208                <header><h4>HTML</h4></header>
209<pre>
210    &lt;small&gt;First Small Text&lt;/small&gt;&lt;br&gt;
211    &lt;small&gt;Second Small Text&lt;/small&gt;&lt;br&gt;
212    &lt;small&gt;Third Small Text&lt;/small&gt;
213</pre>
214                <header><h4>HTML+CSS</h4></header>
215                <section class="sample-view">
216                    <small>First Small Text</small><br>
217                    <small>Second Small Text</small><br>
218                    <small>Third Small Text</small>
219                </section>
220            </section>
221        </article>
222        <article>
223            <h3>:last-child</h3>
224            <section>
225                <header><h4>CSS</h4></header>
226<pre class="sample">
227small:last-child {
228    font-weight: bold;
229    color: seagreen;
230}
231</pre>
232                <header><h4>HTML</h4></header>
233<pre>
234    &lt;small&gt;First Small Text&lt;/small&gt;&lt;br&gt;
235    &lt;small&gt;Second Small Text&lt;/small&gt;&lt;br&gt;
236    &lt;small&gt;Third Small Text&lt;/small&gt;
237</pre>
238                <header><h4>HTML+CSS</h4></header>
239                <section class="sample-view">
240                    <small>First Small Text</small><br>
241                    <small>Second Small Text</small><br>
242                    <small>Third Small Text</small>
243                </section>
244            </section>
245        </article>
246        <article>
247            <h3>:has()</h3>
248            <section>
249                <header><h4>CSS</h4></header>
250<pre class="sample">
251p:has(span.child) {
252    border: 2px solid black;
253}
254</pre>
255                <header><h4>HTML</h4></header>
256<pre>
257&lt;p&gt;Paragraph with &lt;span class="child"&gt;span element&lt;/span&gt;&lt;/p&gt;
258&lt;p&gt;Paragraph without span element&lt;/p&gt;
259</pre>
260                <header><h4>HTML+CSS</h4></header>
261                <section class="sample-view">
262                    <p>Paragraph with <span class="child">span element</span></p>
263                    <p>Paragraph without span element</p>
264                </section>
265            </section>
266        </article>
267        <article>
268            <h3>:not()</h3>
269            <section>
270                <header><h4>CSS</h4></header>
271<pre class="sample">
272q:not(.quote2) {
273    font-weight: bold;
274    color: steelblue;
275}
276</pre>
277                <header><h4>HTML</h4></header>
278<pre>
279    &lt;q class="quote1"&gt;First Quote&lt;/q&gt;&lt;br&gt;
280    &lt;q class="quote2"&gt;Second Quote&lt;/q&gt;&lt;br&gt;
281    &lt;q class="quote3"&gt;Third Quote&lt;/q&gt;
282</pre>
283                <header><h4>HTML+CSS</h4></header>
284                <section class="sample-view">
285                    <q class="quote1">First Quote</q><br>
286                    <q class="quote2">Second Quote</q><br>
287                    <q class="quote3">Third Small Text</q>
288                </section>
289            </section>
290        </article>
291        <article>
292            <h3>:where() / :is()</h3>
293            <section>
294                <header><h4>CSS</h4></header>
295<pre class="sample">
296:where(p, .detail) span {
297    color: darkcyan;
298    text-decoration: line-through;
299}
300:is(p, .detail) span {
301    font-style: italic;
302}
303p span {
304    text-decoration: none; /* Applied */
305    font-style: normal; /* Not Applied */
306}
307</pre>
308                <header><h4>HTML</h4></header>
309<pre>
310&lt;p class="detail"&gt;This is a &lt;span&gt;paragraph&lt;/span&gt; with the "detail" class.&lt;/p&gt;
311&lt;p&gt;This is a &lt;span&gt;paragraph&lt;/span&gt; without the "detail" class.&lt;/p&gt;
312</pre>
313                <header><h4>HTML+CSS</h4></header>
314                <section class="sample-view">
315                    <p class="detail">This is a <span>paragraph</span> with the "detail" class.</p>
316                    <p>This is a <span>paragraph</span> without the "detail" class.</p>
317                </section>
318            </section>
319        </article>
320        <article>
321            <h3>:checked</h3>
322            <section>
323                <header><h4>CSS</h4></header>
324<pre class="sample">
325input:checked {
326    outline: 4px solid red;
327}
328</pre>
329                <header><h4>HTML</h4></header>
330<pre>
331    &lt;label&gt;&lt;input type="checkbox"&gt;First Checkbox&lt;/label&gt;
332    &lt;label&gt;&lt;input type="checkbox"&gt;Second Checkbox&lt;/label&gt;
333</pre>
334                <header><h4>HTML+CSS</h4></header>
335                <section class="sample-view">
336                    <label><input type="checkbox">First Checkbox</label>
337                    <label><input type="checkbox">Second Checkbox</label>
338                </section>
339            </section>
340        </article>
341        <article>
342            <h3>:disabled</h3>
343            <section>
344                <header><h4>CSS</h4></header>
345<pre class="sample">
346button:disabled {
347    background-color: gray;
348    cursor: not-allowed;
349}
350</pre>
351                <header><h4>HTML</h4></header>
352                <pre>&lt;button type="button" disabled&gt;Example of active&lt;/button&gt;</pre>
353                <header><h4>HTML+CSS</h4></header>
354                <section class="sample-view">
355                    <button type="button" disabled>Example of active</button>
356                </section>
357            </section>
358        </article>
359        <article>
360            <h3>:visited</h3>
361            <section>
362                <header><h4>CSS</h4></header>
363<pre class="sample">
364.link:visited {
365    color: purple;
366}
367</pre>
368                <header><h4>HTML</h4></header>
369                <pre>&lt;a href="https://example.com" class="link"&gt;Example&lt;/a&gt;</pre>
370                <header><h4>HTML+CSS</h4></header>
371                <section class="sample-view">
372                    <a href="https://example.com" class="link">Example</a>
373                </section>
374            </section>
375        </article>
376        <article>
377            <h3>:first-of-type</h3>
378            <section>
379                <header><h4>CSS</h4></header>
380<pre class="sample">
381.first-example :first-of-type {
382    font-weight: bold;
383    color: steelblue;
384}
385</pre>
386                <header><h4>HTML</h4></header>
387<pre>
388&lt;p class="first-example"&gt;
389    &lt;var&gt;First Variable&lt;/var&gt;, &lt;code&gt;First Code Snippet&lt;/code&gt;&lt;br&gt;
390    &lt;var&gt;Second Variable&lt;/var&gt;, &lt;code&gt;Second Code Snippet&lt;/code&gt;&lt;br&gt;
391    &lt;var&gt;Third Variable&lt;/var&gt;, &lt;code&gt;Third Code Snippet&lt;/code&gt;
392&lt;/p&gt;
393</pre>
394                <header><h4>HTML+CSS</h4></header>
395                <section class="sample-view">
396                    <p class="first-example">
397                        <var>First Variable</var>, <code>First Code Snippet</code><br>
398                        <var>Second Variable</var>, <code>Second Code Snippet</code><br>
399                        <var>Third Variable</var>, <code>Third Code Snippet</code>
400                    </p>
401                </section>
402            </section>
403        </article>
404        <article>
405            <h3>:last-of-type</h3>
406            <section>
407                <header><h4>CSS</h4></header>
408<pre class="sample">
409.last-example :last-of-type {
410    font-weight: bold;
411    color: seagreen;
412}
413</pre>
414                <header><h4>HTML</h4></header>
415<pre>
416&lt;p class="last-example"&gt;
417    &lt;var&gt;First Variable&lt;/var&gt;, &lt;code&gt;First Code Snippet&lt;/code&gt;&lt;br&gt;
418    &lt;var&gt;Second Variable&lt;/var&gt;, &lt;code&gt;Second Code Snippet&lt;/code&gt;&lt;br&gt;
419    &lt;var&gt;Third Variable&lt;/var&gt;, &lt;code&gt;Third Code Snippet&lt;/code&gt;
420&lt;/p&gt;
421</pre>
422                <header><h4>HTML+CSS</h4></header>
423                <section class="sample-view">
424                    <p class="last-example">
425                        <var>First Variable</var>, <code>First Code Snippet</code><br>
426                        <var>Second Variable</var>, <code>Second Code Snippet</code><br>
427                        <var>Third Variable</var>, <code>Third Code Snippet</code>
428                    </p>
429                </section>
430            </section>
431        </article>
432        <article>
433            <h3>:nth-of-type(n)</h3>
434            <section>
435                <header><h4>CSS</h4></header>
436<pre class="sample">
437.nth-example :nth-of-type(2) {
438    font-weight: bold;
439    color: lightsalmon;
440}
441</pre>
442                <header><h4>HTML</h4></header>
443<pre>
444&lt;p class="nth-example"&gt;
445    &lt;var&gt;First Variable&lt;/var&gt;, &lt;code&gt;First Code Snippet&lt;/code&gt;&lt;br&gt;
446    &lt;var&gt;Second Variable&lt;/var&gt;, &lt;code&gt;Second Code Snippet&lt;/code&gt;&lt;br&gt;
447    &lt;var&gt;Third Variable&lt;/var&gt;, &lt;code&gt;Third Code Snippet&lt;/code&gt;
448&lt;/p&gt;
449</pre>
450                <header><h4>HTML+CSS</h4></header>
451                <section class="sample-view">
452                    <p class="nth-example">
453                        <var>First Variable</var>, <code>First Code Snippet</code><br>
454                        <var>Second Variable</var>, <code>Second Code Snippet</code><br>
455                        <var>Third Variable</var>, <code>Third Code Snippet</code>
456                    </p>
457                </section>
458            </section>
459        </article>
460
461        <header><h2>Pseudo Element</h2></header>
462        <article>
463            <h3>::before</h3>
464            <section>
465                <header><h4>CSS</h4></header>
466<pre class="sample">
467span.note::before {
468    content: "Note: ";
469    color: red;
470}
471</pre>
472                <header><h4>HTML</h4></header>
473                <pre>&lt;span class="note"&gt;Example Text&lt;/span&gt;</pre>
474                <header><h4>HTML+CSS</h4></header>
475                <section class="sample-view">
476                    <span class="note">Example Text</a><br>
477                </section>
478            </section>
479        </article>
480        <article>
481            <h3>::after</h3>
482            <section>
483                <header><h4>CSS</h4></header>
484<pre class="sample">
485span.five-stars::after {
486    content: "*****";
487    color: gold;
488}
489</pre>
490                <header><h4>HTML</h4></header>
491                <pre>&lt;span class="five-stars"&gt;Example Text&lt;/span&gt;</pre>
492                <header><h4>HTML+CSS</h4></header>
493                <section class="sample-view">
494                    <span class="five-stars">Example Text</a>
495                </section>
496            </section>
497        </article>
498        <article>
499            <h3>::placeholder</h3>
500            <section>
501                <header><h4>CSS</h4></header>
502<pre class="sample">
503input::placeholder {
504    color: rgba(0, 150, 150, 0.7);
505    font-size: 14px;
506    font-style: italic;
507}
508</pre>
509                <header><h4>HTML</h4></header>
510                <pre>&lt;input type="text" placeholder="Enter your name"&gt;</pre>
511                <header><h4>HTML+CSS</h4></header>
512                <section class="sample-view">
513                    <input type="text" placeholder="Enter your name">
514                </section>
515            </section>
516        </article>
517        <article>
518            <h3>::first-letter</h3>
519            <section>
520                <header><h4>CSS</h4></header>
521<pre class="sample">
522p.first::first-letter {
523    font-size: 2em;
524    color: blue;
525}
526</pre>
527                <header><h4>HTML</h4></header>
528<pre>
529&lt;p class="first"&gt;
530    &lt;span&gt;First Text&lt;/span&gt;&lt;br&gt;
531    &lt;span&gt;Second Text&lt;/span&gt;&lt;br&gt;
532    &lt;span&gt;Third Text&lt;/span&gt;
533&lt;/p&gt;
534</pre>
535                <header><h4>HTML+CSS</h4></header>
536                <section class="sample-view">
537                    <p class="first">
538                        <span>First Text</span><br>
539                        <span>Second Text</span><br>
540                        <span>Third Text</span>
541                    </p>
542                </section>
543<pre class="sample-error">
544/* Not Valid: `::first-letter` can only be applied to
545              block-level elements */
546span::first-letter {
547    font-size: 2em;
548    color: red;
549}
550</pre>
551            </section>
552        </article>
553        <article>
554            <h3>::first-line</h3>
555            <section>
556                <header><h4>CSS</h4></header>
557<pre class="sample">
558p.second::first-line {
559    font-weight: bold;
560    color: green;
561}
562</pre>
563                <header><h4>HTML</h4></header>
564<pre>
565&lt;p class="second"&gt;
566    First Text&lt;br&gt;
567    Second Text&lt;br&gt;
568    Third Text
569&lt;/p&gt;
570</pre>
571                <header><h4>HTML+CSS</h4></header>
572                <section class="sample-view">
573                    <p class="second">
574                        First Text<br>
575                        Second Text<br>
576                        Third Text
577                    </p>
578                </section>
579<pre class="sample-error">
580/* Not Valid: `::first-line` can only be applied to block-level elements */
581span::first-line {
582    font-size: 2em;
583    color: red;
584}
585</pre>
586            </section>
587        </article>
588        <article>
589            <h3>::selection</h3>
590            <section>
591                <header><h4>CSS</h4></header>
592<pre class="sample">
593span::selection {
594    background-color: yellow;
595    color: black;
596}
597</pre>
598                <header><h4>HTML</h4></header>
599<pre>
600&lt;p&gt;
601    &lt;span&gt;First Text&lt;/span&gt;&lt;br&gt;
602    &lt;span&gt;Second Text&lt;/span&gt;&lt;br&gt;
603    &lt;span&gt;Third Text&lt;/span&gt;
604&lt;/p&gt;
605</pre>
606                <header><h4>HTML+CSS</h4></header>
607                <section class="sample-view">
608                    <p>
609                        <span>First Text</span><br>
610                        <span>Second Text</span><br>
611                        <span>Third Text</span>
612                    </p>
613                </section>
614            </section>
615        </article>
616    </main>
617</body>
618</html>

คลาสเทียม

CSS pseudo-classes เป็นฟังก์ชันที่ใช้สไตล์กับองค์ประกอบโดยอิงตามเงื่อนไขเฉพาะ เช่น สถานะขององค์ประกอบหรือการเรียงลำดับ มันช่วยให้คุณเพิ่มสไตล์พิเศษตามสถานะหรือสถานะขององค์ประกอบ ทำให้มีประโยชน์ในการนำเสนอสถานการณ์ที่ไม่สามารถระบุด้วยคลาสหรือ ID ปกติได้ Pseudo-classes ช่วยให้การใช้งาน UI และการกำหนดสไตล์แบบไดนามิกง่ายขึ้นโดยอิงตามเงื่อนไขเฉพาะ ทำให้สามารถออกแบบให้ตอบสนองต่อการโต้ตอบของผู้ใช้หรือโครงสร้างของเนื้อหาได้

ไวยากรณ์พื้นฐานของคลาสเทียม

ไวยากรณ์พื้นฐานของคลาสจำลองมีดังนี้

1selector:pseudo-class {
2    /* Styles */
3}
  • selector คือองค์ประกอบเป้าหมาย
  • ส่วน pseudo-class แทน pseudo-class ที่บ่งบอกถึงสถานะหรือเงื่อนไขเฉพาะ
  • : ใช้สำหรับเลือก pseudo-classes

คลาสเทียมที่ใช้บ่อย

:hover

1a:hover {
2    color: red;
3}
  • :hover ใช้สไตล์เมื่อเคอร์เซอร์เมาส์ชี้ไปที่องค์ประกอบ
  • ในตัวอย่างนี้ เมื่อเคอร์เซอร์เมาส์ชี้ไปที่ลิงก์ สีของตัวอักษรจะเปลี่ยนเป็นสีแดง

:focus

1input:focus {
2    outline: 2px solid blue;
3}
  • :focus ใช้สไตล์เมื่อองค์ประกอบได้รับการโฟกัส มันถูกใช้หลักๆ สำหรับองค์ประกอบแบบฟอร์มและลิงก์
  • ในตัวอย่างนี้ ขอบสีน้ำเงินจะปรากฏเมื่อองค์ประกอบ input ถูกโฟกัส

:active

1button:active {
2    background-color: green;
3}
  • :active ใช้สไตล์กับองค์ประกอบเมื่อมันกำลังอยู่ในสถานะ active (ขณะกำลังถูกคลิก)
  • ในตัวอย่างนี้ ขณะที่ปุ่มถูกคลิก สีพื้นหลังจะเปลี่ยนเป็นสีเขียว

:empty

1.box:empty {
2    background-color: lightgray;
3    border: 1px dashed black;
4    height: 50px;
5    width: 50px;
6}
  • คลาสจำลอง :empty ใช้สำหรับการกำหนดสไตล์กับองค์ประกอบที่ไม่มีลูกภายใน องค์ประกอบที่เลือกต้องไม่มีข้อความ, ช่องว่าง (whitespace), หรือความคิดเห็น
  • ในตัวอย่างนี้ หากองค์ประกอบที่มีคลาส box ไม่มีสิ่งใดภายใน ระบบจะกำหนดพื้นหลังสีเทาและขอบเส้นประสีดำให้กับองค์ประกอบนั้น หากมีช่องว่างอยู่ สไตล์จะไม่ได้รับการกำหนด

:valid / :invalid

1input:valid {
2    border: 2px solid green;
3    background-color: #eaffea;
4}
5
6input:invalid {
7    border: 2px solid red;
8    background-color: #ffeaea;
9}
  • :valid เป็นรูปแบบที่ใช้กับองค์ประกอบฟอร์มที่มีค่าข้อมูลที่ถูกต้อง รูปแบบ :valid จะถูกใช้เมื่อเป็นไปตามเงื่อนไขที่ระบุด้วยแอตทริบิวต์ HTML เช่น pattern หรือ type (เช่น email)

  • :invalid เป็นรูปแบบที่ใช้กับองค์ประกอบฟอร์มที่มีค่าข้อมูลที่ไม่ถูกต้อง รูปแบบ :invalid จะถูกใช้เมื่อองค์ประกอบฟอร์มไม่เป็นไปตามกฎการตรวจสอบของ HTML (เช่น type="email")

  • ในตัวอย่างนี้ จะมีเส้นขอบสีเขียวปรากฏขึ้นหากข้อความที่ป้อนมีความยาว 5 ตัวอักษรหรือมากกว่านั้น ตามที่ระบุไว้ในแอตทริบิวต์ pattern หากข้อความที่ป้อนมีความยาวน้อยกว่า 5 ตัวอักษร จะปรากฏเส้นขอบสีแดง

:in-range / :out-of-range

1input[type="number"]:in-range {
2    border: 2px solid blue;
3    background-color: #eaf4ff;
4}
5
6input[type="number"]:out-of-range {
7    border: 2px solid orange;
8    background-color: #fff4e6;
9}
  • :in-range เป็นสไตล์ที่ถูกนำไปใช้เมื่อองค์ประกอบอินพุตตัวเลขมีค่าอยู่ภายในช่วงที่กำหนด สไตล์ :in-range จะถูกนำไปใช้เมื่อเงื่อนไขที่ระบุโดยแอตทริบิวต์ min และ max ใน HTML ถูกต้อง

  • :out-of-range เป็นสไตล์ที่ถูกนำไปใช้เมื่อองค์ประกอบอินพุตตัวเลขมีค่าอยู่นอกช่วงที่กำหนด สไตล์ :out-of-range จะถูกนำไปใช้เมื่อค่าที่ป้อนเกินช่วงที่ระบุโดยแอตทริบิวต์ min หรือ max

  • ในตัวอย่างนี้ เมื่อมีการป้อนค่าภายในช่วงที่ระบุโดยแอตทริบิวต์ min="18" และ max="99" (ระหว่าง 18 ถึง 99 รวมทั้งสองค่า) จะมีการแสดงเส้นขอบสีน้ำเงิน เมื่อป้อนค่าที่อยู่นอกช่วง จะมีการแสดงเส้นขอบสีส้ม

:nth-child()

1li:nth-child(2) {
2    color: blue;
3    font-weight: bold;
4}
  • :nth-child() ใช้สไตล์ตามตำแหน่งขององค์ประกอบลูกภายในพ่อแม่ของมัน คุณสามารถกำหนดตัวเลขหรือนิพจน์สำหรับ n
  • ในตัวอย่างนี้ ข้อความของรายการที่สองจะเปลี่ยนเป็นสีน้ำเงิน
การใช้กับองค์ประกอบที่เป็นลำดับเลขคี่และเลขคู่
1li:nth-child(odd) {
2    background-color: lightblue;
3}
4
5li:nth-child(even) {
6    background-color: steelblue;
7}
  • โดยการกำหนด even หรือ odd คุณสามารถใช้สไตล์กับองค์ประกอบที่เป็นคี่หรือคู่ได้
  • ในตัวอย่างนี้ สีพื้นหลังที่ต่างกันจะถูกใช้กับแถวที่เป็นเลขคู่และเลขคี่ ตัวอย่างเช่น สิ่งนี้สามารถใช้สำหรับการออกแบบตารางที่มีลายเส้น

:first-child

1small:first-child {
2    font-weight: bold;
3    color: steelblue;
4}
  • :first-child ใช้สไตล์กับองค์ประกอบลูกตัวแรกของแม่
  • ในตัวอย่างนี้ ข้อความในองค์ประกอบ small แรกจะถูกกำหนดให้เป็นตัวหนาพร้อมเฉดสีน้ำเงิน

:last-child

1small:last-child {
2    font-weight: bold;
3    color: seagreen;
4}
  • :last-child ใช้สไตล์กับองค์ประกอบลูกตัวสุดท้ายของแม่
  • ในตัวอย่างนี้ ข้อความในองค์ประกอบ small สุดท้ายจะถูกกำหนดให้เป็นตัวหนาพร้อมเฉดสีเขียว

:has()

1p:has(span.child) {
2    border: 2px solid black;
3}
  • คลาสจำลอง :has() ใน CSS ทำหน้าที่เป็นตัวเลือกสำหรับองค์ประกอบแม่ (parent selector) ด้วยคลาสจำลองนี้ คุณสามารถเลือกองค์ประกอบแม่ได้โดยอิงตามการมีอยู่ขององค์ประกอบลูก
  • ในตัวอย่างนี้ border จะถูกนำไปใช้กับ p อีลีเมนต์ที่มี span อีลีเมนต์ที่มีคลาส .child

:not()

1q:not(.quote2) {
2    font-weight: bold;
3    color: steelblue;
4}
  • :not() ใช้สไตล์กับองค์ประกอบที่ไม่ตรงตามเงื่อนไขเฉพาะ
  • ในตัวอย่างนี้ ข้อความในองค์ประกอบ q จะถูกกำหนดให้เป็นตัวหนาพร้อมเฉดสีน้ำเงิน ยกเว้นองค์ประกอบที่มีคลาส quote2

:where() / :is()

 1:where(p, .detail) span {
 2    color: darkcyan;
 3    text-decoration: line-through;
 4}
 5:is(p, .detail) span {
 6    font-style: italic;
 7}
 8p span {
 9    text-decoration: none; /* Applied */
10    font-style: normal; /* Not Applied */
11}
  • คลาสจำลอง :where() เป็นตัวเลือกพิเศษใน CSS ที่กำหนดความจำเพาะ (specificity) ให้เป็นศูนย์ สิ่งนี้มีประโยชน์เมื่อต้องการจัดการตัวเลือกหลายตัวพร้อมกันและกำหนดสไตล์โดยไม่กระทบต่อความจำเพาะขององค์ประกอบที่ถูกเลือก
  • คลาสจำลอง :is() รวมตัวเลือกหลายตัวและเลือกองค์ประกอบที่ตรงกับเงื่อนไขใด ๆ คลาสจำลอง :is() มีความจำเพาะเท่ากับตัวเลือกปกติ แต่การกำหนดสไตล์จะอิงจากความจำเพาะที่สูงที่สุดในตัวเลือกภายใน
  • ในตัวอย่างนี้ :where() และ :is() ถูกใช้เพื่อกำหนดสไตล์ให้กับองค์ประกอบ <p> และ <span> ภายในคลาส detail สไตล์ text-decoration ที่กำหนดโดย :where() จะถูกแทนที่ด้วย CSS ส่วนถัดไป อย่างไรก็ตาม สไตล์ที่กำหนดโดย :is() มีความจำเพาะสูงกว่าและไม่ถูกแทนที่ด้วย CSS ส่วนถัดไป

:checked

1input:checked {
2    outline: 4px solid red;
3}
  • :checked ใช้สไตล์เมื่อมีการเลือกช่องทำเครื่องหมายหรือปุ่มวิทยุ
  • ในตัวอย่างนี้ เส้นขอบสีแดงจะปรากฏบนองค์ประกอบอินพุตที่ถูกเลือก (checked)

:disabled

1button:disabled {
2    background-color: gray;
3    cursor: not-allowed;
4}
  • :disabled ใช้สไตล์กับองค์ประกอบฟอร์มที่ถูกปิดใช้งาน
  • ในตัวอย่างนี้, พื้นหลังสีเทาและเคอร์เซอร์ 'ไม่อนุญาต' ถูกใช้กับปุ่มที่ถูกปิดใช้งาน

:visited

1.link:visited {
2    color: purple;
3}
  • :visited ใช้สำหรับกำหนดสไตล์ให้กับลิงก์ที่เคยเยี่ยมชมแล้ว
  • ในตัวอย่างนี้ หลังจากที่คลิกและเยี่ยมชมลิงก์ สีข้อความขององค์ประกอบ <a> จะเปลี่ยนเป็นสีม่วง
ข้อจำกัดด้านความเป็นส่วนตัวและสไตล์

:visited มีข้อจำกัดในการกำหนดสไตล์บางอย่างด้วยเหตุผลด้านการปกป้องความเป็นส่วนตัว สิ่งนี้ช่วยป้องกันเว็บไซต์ภายนอกจากการสันนิษฐานประวัติการเยี่ยมชมของผู้ใช้ คุณสมบัติที่สามารถเปลี่ยนแปลงได้ด้วย :visited จำกัดอยู่ที่ดังนี้:

color
background-color
border-color
outline-color
column-rule-color
text-decoration-color
fill
stroke

ในทางกลับกัน คุณสมบัติอื่นๆ นอกเหนือจากนี้ (เช่น display, visibility, position, ฯลฯ) ไม่สามารถเปลี่ยนแปลงได้ด้วย :visited สิ่งนี้ช่วยป้องกันความเป็นส่วนตัวของผู้ใช้จากการรั่วไหลผ่านประวัติการเข้าชม

:first-of-type

1.first-example :first-of-type {
2    font-weight: bold;
3    color: steelblue;
4}
  • :first-of-type จะเลือกองค์ประกอบแรกของประเภทเดียวกัน (ที่มีชื่อแท็กเดียวกัน) ภายในองค์ประกอบพาเรนต์
  • ในตัวอย่างนี้ ข้อความของ <var> และ <code> องค์ประกอบแรกในคลาส first-example ถูกจัดสไตล์ให้เป็นตัวหนาสีน้ำเงิน

:last-of-type

1.last-example :last-of-type {
2    font-weight: bold;
3    color: seagreen;
4}
  • :last-of-type จะเลือกองค์ประกอบสุดท้ายของประเภทนั้นภายในองค์ประกอบพาเรนต์
  • ในตัวอย่างนี้ ข้อความของ <var> และ <code> องค์ประกอบสุดท้ายในคลาส last-example ถูกจัดสไตล์ให้เป็นตัวหนาสีเขียว

:nth-of-type()

1.nth-example :nth-of-type(2) {
2    font-weight: bold;
3    color: lightsalmon;
4}
  • :nth-of-type() ใช้สไตล์กับการเกิดครั้งที่ n ขององค์ประกอบที่มีประเภทเดียวกัน
  • ในตัวอย่างนี้ ข้อความของ <var> และ <code> องค์ประกอบที่สองในคลาส nth-example ถูกจัดสไตล์ให้เป็นตัวหนาสีส้ม

พรีโดเอเลเมนต์

Pseudo-elements ใน CSS ใช้เมื่อคุณต้องการนำสไตล์ไปใช้กับส่วนเฉพาะขององค์ประกอบที่เลือก ต่างจาก pseudo-classes, pseudo-elements มุ่งเน้นไปที่ส่วนเฉพาะขององค์ประกอบ ไม่ใช่องค์ประกอบทั้งหมด เช่น สามารถใช้เพื่อเพิ่มเนื้อหาก่อนหรือหลังองค์ประกอบ หรือใช้สไตล์กับตัวอักษรหรือบรรทัดเฉพาะ

ไวยากรณ์พื้นฐานของพรีโดเอเลเมนต์

Pseudo-elements มักเขียนด้วย :: (เครื่องหมายทวิภาคคู่) หลังตัวเลือก นี้เพื่อแยกแยะจาก pseudo-classes

1selector::pseudo-element {
2    /* Styles */
3}
  • selector คือองค์ประกอบเป้าหมาย
  • ส่วน pseudo-element หมายถึง pseudo-element ที่อ้างอิงถึงส่วนหรือแง่มุมเฉพาะขององค์ประกอบ
  • คุณสามารถระบุ pseudo-element โดยใช้ ::

พรีโดเอเลเมนต์ที่ใช้บ่อย

::before

1span.note::before {
2    content: "Note: ";
3    color: red;
4}
  • ::before แทรกเนื้อหาเสมือนก่อนเนื้อหาขององค์ประกอบ และนำสไตล์ไปใช้กับส่วนนั้น มีประโยชน์ในการแทรกไอคอนหรือป้ายต่าง ๆ ตัวอย่างเช่น

  • ในตัวอย่างนี้ ข้อความ "Note:" ถูกแทรกไว้ก่อนองค์ประกอบ <span> ที่มีคลาส note เนื้อหาที่ระบุที่นี่ไม่มีใน HTML จริง ๆ แต่มันถูกเพิ่มเข้ามาเสมือนผ่าน CSS หมายความว่าคุณไม่สามารถจัดการเนื้อหาที่เพิ่มเข้ามาผ่าน JavaScript โดยตรงได้

::after

1span.five-stars::after {
2    content: "*****";
3    color: gold;
4}
  • ::after แทรกเนื้อหาเสมือนหลังเนื้อหาขององค์ประกอบ โดยทั่วไปแล้วจะใช้เพื่อเพิ่มเนื้อหาเสริมหรือเนื้อหาประดับตกแต่งหลังจากองค์ประกอบ
  • ในตัวอย่างนี้ ไอคอนรูปดาวสีทองจะถูกเพิ่มหลังจากองค์ประกอบ <span> ที่มีคลาส five-stars

::placeholder

1input::placeholder {
2    color: rgba(0, 150, 150, 0.7);
3    font-size: 14px;
4    font-style: italic;
5}
  • ::placeholder เป็น pseudo-element ที่ใช้สำหรับจัดสไตล์ข้อความ Placeholder ในองค์ประกอบฟอร์ม โดยค่าเริ่มต้น จะปรากฏเป็นข้อความสีเทาอ่อน แต่ด้วย ::placeholder pseudo-element คุณสามารถเปลี่ยนสไตล์ให้เหมาะกับการออกแบบของคุณได้
  • ในตัวอย่างนี้ สีของข้อความ Placeholder สำหรับองค์ประกอบ input ถูกตั้งค่าให้เป็นสีน้ำเงินโปร่งใส 70% ขนาดตัวอักษร 14px และเอียง

::first-letter

1p.first::first-letter {
2    font-size: 2em;
3    color: blue;
4}
  • ::first-letter ใช้สำหรับจัดสไตล์ตัวอักษรแรกขององค์ประกอบระดับบล็อก ใช้สำหรับการตกแต่งทางสไตล์แบบที่เห็นในนิตยสารหรือหนังสือพิมพ์ ที่ตัวอักษรตัวแรกถูกเน้นย้ำ โปรดทราบว่า pseudo-element นี้ใช้งานได้เฉพาะบนองค์ประกอบระดับบล็อกและไม่สามารถใช้งานโดยตรงกับองค์ประกอบ inline เช่น <span> ได้
  • ในตัวอย่างนี้ ตัวอักษรตัวแรกของย่อหน้าจะมีขนาดใหญ่ขึ้นสองเท่า เป็นตัวหนา และเป็นสีน้ำเงิน

::first-line

1p.second::first-line {
2    font-weight: bold;
3    color: green;
4}
  • ::first-line ใช้สำหรับจัดสไตล์บรรทัดแรกขององค์ประกอบระดับบล็อก โดยมากใช้สำหรับย่อข้อความ ทำให้คุณสามารถใช้สไตล์ที่แตกต่างกับบรรทัดแรกได้
  • ในตัวอย่างนี้ บรรทัดแรกของย่อหน้าจะถูกจัดสไตล์ให้เป็นตัวหนาและสีเขียว

::selection

1span::selection {
2    background-color: yellow;
3    color: black;
4}
  • ::selection ใช้สำหรับจัดสไตล์ส่วนของข้อความที่ผู้ใช้เลือกหรือไฮไลต์อยู่ ด้วยวิธีนี้ คุณสามารถเปลี่ยนสีพื้นหลังและสีข้อความเมื่อมีการเลือกข้อความ
  • ในตัวอย่างนี้ เมื่อข้อความในองค์ประกอบ <span> ถูกเลือก พื้นหลังจะเปลี่ยนเป็นสีเหลือง และข้อความจะเปลี่ยนเป็นสีดำ

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video