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><a href="#">Example of hover</a></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><input type="text" placeholder="Example of focus"></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><button type="button">Example of active</button></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<p class="box"></p>
85<p class="box"> </p>
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<form>
112 <label>Username (min. 5 characters):</label>
113 <input type="text" pattern=".{5,}" required>
114 <button type="submit">Submit</button>
115</form>
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<form>
145 <label>Age (between 18 and 99):</label>
146 <input type="number" min="18" max="99" required>
147 <button type="submit">Submit</button>
148</form>
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<ul>
181 <li>First Item</li>
182 <li>Second Item</li>
183 <li>Third Item</li>
184 <li>Fourth Item</li>
185</ul>
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 <small>First Small Text</small><br>
211 <small>Second Small Text</small><br>
212 <small>Third Small Text</small>
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 <small>First Small Text</small><br>
235 <small>Second Small Text</small><br>
236 <small>Third Small Text</small>
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<p>Paragraph with <span class="child">span element</span></p>
258<p>Paragraph without span element</p>
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 <q class="quote1">First Quote</q><br>
280 <q class="quote2">Second Quote</q><br>
281 <q class="quote3">Third Quote</q>
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<p class="detail">This is a <span>paragraph</span> with the "detail" class.</p>
311<p>This is a <span>paragraph</span> without the "detail" class.</p>
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 <label><input type="checkbox">First Checkbox</label>
332 <label><input type="checkbox">Second Checkbox</label>
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><button type="button" disabled>Example of active</button></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><a href="https://example.com" class="link">Example</a></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<p class="first-example">
389 <var>First Variable</var>, <code>First Code Snippet</code><br>
390 <var>Second Variable</var>, <code>Second Code Snippet</code><br>
391 <var>Third Variable</var>, <code>Third Code Snippet</code>
392</p>
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<p class="last-example">
417 <var>First Variable</var>, <code>First Code Snippet</code><br>
418 <var>Second Variable</var>, <code>Second Code Snippet</code><br>
419 <var>Third Variable</var>, <code>Third Code Snippet</code>
420</p>
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<p class="nth-example">
445 <var>First Variable</var>, <code>First Code Snippet</code><br>
446 <var>Second Variable</var>, <code>Second Code Snippet</code><br>
447 <var>Third Variable</var>, <code>Third Code Snippet</code>
448</p>
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><span class="note">Example Text</span></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><span class="five-stars">Example Text</span></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><input type="text" placeholder="Enter your name"></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<p class="first">
530 <span>First Text</span><br>
531 <span>Second Text</span><br>
532 <span>Third Text</span>
533</p>
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<p class="second">
566 First Text<br>
567 Second Text<br>
568 Third Text
569</p>
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<p>
601 <span>First Text</span><br>
602 <span>Second Text</span><br>
603 <span>Third Text</span>
604</p>
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 ด้วย