Articles
Giới thiệu về CSS
Lớp Giả và Giả Phần Tử trong CSS

Lớp Giả và Giả Phần Tử trong CSS

Bài viết này giải thích về các lớp giả và phần tử giả trong CSS.

Bạn có thể tìm hiểu về các lớp giả như :hover và các phần tử giả như ::before.

YouTube Video

HTML để Xem trước

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>

Các lớp giả

Các pseudo-class trong CSS là các hàm áp dụng kiểu cho các phần tử dựa trên các điều kiện cụ thể như trạng thái phần tử hoặc thứ bậc. Chúng cho phép bạn thêm các kiểu đặc biệt dựa trên trạng thái hoặc vị trí của phần tử, giúp hiển thị các tình huống động mà không thể xác định bằng các lớp hoặc ID thông thường. Pseudo-class giúp dễ dàng triển khai các UI động và kiểu dựa trên các điều kiện cụ thể, cho phép thiết kế phản hồi theo tương tác của người dùng hoặc cấu trúc nội dung.

Cú pháp cơ bản của các lớp giả

Cú pháp cơ bản của các lớp giả như sau.

1selector:pseudo-class {
2    /* Styles */
3}
  • selector là phần tử mục tiêu.
  • Phần pseudo-class đại diện cho một pseudo-class thể hiện trạng thái hoặc điều kiện cụ thể.
  • : được dùng để chọn các giả lớp (pseudo-classes).

Các lớp giả thường dùng

:hover 

1a:hover {
2    color: red;
3}
  • :hover áp dụng kiểu khi con trỏ chuột di chuột qua một phần tử.
  • Trong ví dụ này, khi chuột di chuyển qua một liên kết, màu sắc của văn bản sẽ chuyển sang màu đỏ.

:focus 

1input:focus {
2    outline: 2px solid blue;
3}
  • :focus áp dụng kiểu khi một phần tử nhận được tiêu điểm. Nó chủ yếu được sử dụng cho các phần tử biểu mẫu và liên kết.
  • Trong ví dụ này, một đường viền màu xanh sẽ xuất hiện khi một phần tử input được chọn.

:active 

1button:active {
2    background-color: green;
3}
  • :active áp dụng kiểu cho một phần tử khi nó đang hoạt động (khi nó đang được nhấp chuột).
  • Trong ví dụ này, khi nút đang được nhấn, màu nền sẽ thay đổi thành màu xanh lá cây.

:empty 

1.box:empty {
2    background-color: lightgray;
3    border: 1px dashed black;
4    height: 50px;
5    width: 50px;
6}
  • Lớp giả :empty được sử dụng để áp dụng kiểu dáng cho các phần tử không có phần tử con. Phần tử mục tiêu không được chứa các nút văn bản, khoảng trắng hoặc bình luận.
  • Trong ví dụ này, nếu một phần tử với lớp box không chứa gì, thì một nền xám và đường viền đứt nét màu đen sẽ được áp dụng cho phần tử đó. Nếu có khoảng trắng, kiểu dáng sẽ không được áp dụng.

: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 là một kiểu áp dụng cho các phần tử biểu mẫu với các giá trị đầu vào hợp lệ. Kiểu :valid được áp dụng khi các điều kiện được xác định bởi các thuộc tính HTML như pattern hoặc type (ví dụ: email) được đáp ứng.

  • :invalid là một kiểu áp dụng cho các phần tử biểu mẫu với các giá trị đầu vào không hợp lệ. Kiểu :invalid được áp dụng khi một phần tử biểu mẫu không đáp ứng các quy tắc xác thực của HTML (ví dụ: type="email").

  • Trong ví dụ này, viền màu xanh lá cây sẽ hiển thị nếu văn bản nhập vào có độ dài từ 5 ký tự trở lên, như được chỉ định bởi thuộc tính pattern. Nếu văn bản nhập vào ngắn hơn 5 ký tự, viền màu đỏ sẽ hiển thị.

: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 là một kiểu được áp dụng khi một phần tử nhập giá trị số có giá trị nằm trong phạm vi được chỉ định. Kiểu :in-range được áp dụng khi các điều kiện được chỉ định bởi các thuộc tính min và max trong HTML được đáp ứng.

  • :out-of-range là một kiểu được áp dụng khi một phần tử nhập giá trị số có giá trị nằm ngoài phạm vi được chỉ định. Kiểu :out-of-range được áp dụng khi giá trị vượt quá phạm vi được chỉ định bởi thuộc tính min hoặc max.

  • Trong ví dụ này, khi một giá trị nằm trong phạm vi được chỉ định bởi các thuộc tính min="18" và max="99" (từ 18 đến 99 bao gồm) được nhập, một đường viền màu xanh lam sẽ được hiển thị. Khi một giá trị nằm ngoài phạm vi được nhập, một đường viền màu cam sẽ được hiển thị.

:nth-child() 

1li:nth-child(2) {
2    color: blue;
3    font-weight: bold;
4}
  • :nth-child() áp dụng kiểu dựa trên vị trí của phần tử con trong phần tử cha. Bạn có thể chỉ định một số hoặc một biểu thức cho n.
  • Trong ví dụ này, văn bản của phần tử thứ hai trong danh sách chuyển thành màu xanh dương.
Áp dụng cho các phần tử lẻ và chẵn 
1li:nth-child(odd) {
2    background-color: lightblue;
3}
4
5li:nth-child(even) {
6    background-color: steelblue;
7}
  • Bằng cách chỉ định even hoặc odd, bạn có thể áp dụng kiểu cho các phần tử chẵn hoặc lẻ.
  • Trong ví dụ này, các màu nền khác nhau được áp dụng cho các hàng chẵn và lẻ. Điều này có thể được sử dụng cho thiết kế bảng sọc, chẳng hạn.

:first-child 

1small:first-child {
2    font-weight: bold;
3    color: steelblue;
4}
  • :first-child áp dụng kiểu cho phần tử con đầu tiên của một phần tử cha.
  • Trong ví dụ này, văn bản của phần tử small đầu tiên được áp dụng kiểu in đậm với sắc xanh lam.

:last-child 

1small:last-child {
2    font-weight: bold;
3    color: seagreen;
4}
  • :last-child áp dụng kiểu cho phần tử con cuối cùng của một phần tử cha.
  • Trong ví dụ này, văn bản của phần tử small cuối cùng được áp dụng kiểu in đậm với sắc xanh lá cây.

:has() 

1p:has(span.child) {
2    border: 2px solid black;
3}
  • Lớp giả :has() trong CSS có chức năng như một bộ chọn cha. Sử dụng lớp giả này, bạn có thể chọn một phần tử cha dựa trên sự tồn tại của phần tử con.
  • Trong ví dụ này, border được áp dụng cho các phần tử p chứa các phần tử span với lớp .child.

:not() 

1q:not(.quote2) {
2    font-weight: bold;
3    color: steelblue;
4}
  • :not() áp dụng kiểu cho các phần tử không đáp ứng điều kiện cụ thể.
  • Trong ví dụ này, văn bản của các phần tử q, ngoại trừ những phần tử có lớp quote2, được áp dụng kiểu in đậm với sắc xanh lam.

: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}
  • Lớp giả :where() là một bộ chọn CSS đặc biệt đặt mức độ đặc thù về 0. Điều này hữu ích khi bạn muốn xử lý nhiều bộ chọn đồng thời và áp dụng kiểu dáng mà không ảnh hưởng đến mức độ đặc thù của các phần tử được chọn.
  • Lớp giả :is() nhóm nhiều bộ chọn lại và chọn các phần tử phù hợp với bất kỳ điều kiện nào trong số đó. Lớp giả :is() tự nó có mức độ đặc thù tương tự như các bộ chọn thông thường, nhưng nó áp dụng kiểu dáng dựa trên mức độ đặc thù cao nhất trong số các bộ chọn bên trong.
  • Trong ví dụ này, :where() và :is() được sử dụng để áp dụng kiểu dáng cho các phần tử <p> và <span> bên trong lớp detail. Kiểu dáng text-decoration được thiết lập bởi :where() bị ghi đè bởi CSS sau đó. Tuy nhiên, kiểu dáng được thiết lập bởi :is() có mức độ đặc thù cao hơn và không bị ghi đè bởi CSS sau đó.

:checked 

1input:checked {
2    outline: 4px solid red;
3}
  • :checked áp dụng kiểu khi một hộp kiểm hoặc nút radio được chọn.
  • Trong ví dụ này, một đường viền đỏ được hiển thị trên phần tử đầu vào đã được chọn.

:disabled 

1button:disabled {
2    background-color: gray;
3    cursor: not-allowed;
4}
  • :disabled áp dụng kiểu cho các phần tử biểu mẫu bị vô hiệu hóa.
  • Trong ví dụ này, nền màu xám và con trỏ 'not-allowed' được áp dụng cho nút bị vô hiệu hóa.

:visited 

1.link:visited {
2    color: purple;
3}
  • :visited được sử dụng để áp dụng kiểu dáng cho các liên kết đã được truy cập.
  • Trong ví dụ này, sau khi nhấp chuột và truy cập một liên kết, màu văn bản của phần tử <a> thay đổi thành màu tím.
Giới hạn về Riêng tư và Kiểu dáng

:visited có một số hạn chế về kiểu dáng vì lý do bảo vệ quyền riêng tư. Điều này ngăn các trang web bên ngoài suy luận về lịch sử truy cập của người dùng. Các thuộc tính có thể thay đổi với :visited bị giới hạn như sau:.

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

Mặt khác, các thuộc tính khác ngoài những thuộc tính này (ví dụ: display, visibility, position, v.v.) không thể được thay đổi bằng :visited. Điều này ngăn chặn quyền riêng tư của người dùng bị rò rỉ thông qua lịch sử truy cập.

:first-of-type 

1.first-example :first-of-type {
2    font-weight: bold;
3    color: steelblue;
4}
  • :first-of-type chọn phần tử đầu tiên thuộc loại của nó (có cùng tên thẻ) trong phần tử cha của nó.
  • Trong ví dụ này, văn bản của phần tử <var> đầu tiên và phần tử <code> trong lớp first-example được định dạng thành chữ màu xanh đậm.

:last-of-type 

1.last-example :last-of-type {
2    font-weight: bold;
3    color: seagreen;
4}
  • :last-of-type chọn phần tử cuối cùng thuộc loại của nó trong phần tử cha của nó.
  • Trong ví dụ này, văn bản của phần tử <var> cuối cùng và phần tử <code> trong lớp last-example được định dạng thành chữ màu xanh lá đậm.

:nth-of-type() 

1.nth-example :nth-of-type(2) {
2    font-weight: bold;
3    color: lightsalmon;
4}
  • :nth-of-type() áp dụng kiểu cho lần xuất hiện thứ n của các phần tử cùng loại.
  • Trong ví dụ này, văn bản của phần tử <var> thứ hai và phần tử <code> trong lớp nth-example được định dạng thành chữ màu cam đậm.

Phần tử giả

Phần tử giả (pseudo-elements) trong CSS được sử dụng để áp dụng kiểu cho các phần cụ thể của phần tử đã chọn. Không giống như các lớp giả (pseudo-classes), phần tử giả (pseudo-elements) tập trung vào các phần cụ thể của một phần tử thay vì toàn bộ phần tử. Ví dụ, chúng được sử dụng để thêm nội dung trước hoặc sau một phần tử hoặc áp dụng kiểu cho các ký tự hoặc dòng cụ thể.

Cú pháp cơ bản của phần tử giả

Phần tử giả (pseudo-elements) thường được viết với :: (hai dấu hai chấm) sau bộ chọn. Điều này giúp phân biệt chúng với các lớp giả (pseudo-classes).

1selector::pseudo-element {
2    /* Styles */
3}
  • selector là phần tử mục tiêu.
  • Phần pseudo-element đại diện cho một phần tử giả (pseudo-element) mà tham chiếu đến một phần cụ thể hoặc khía cạnh của một phần tử.
  • Bạn có thể chỉ định một phần tử giả (pseudo-element) bằng cách sử dụng ::.

Các Giả Phần Tử Thường Được Sử Dụng

::before 

1span.note::before {
2    content: "Note: ";
3    color: red;
4}

  • ::before chèn nội dung ảo trước nội dung của một phần tử và áp dụng kiểu cho phần đó. Nó rất hữu ích cho việc chèn biểu tượng hoặc nhãn, ví dụ như vậy.

  • Trong ví dụ này, văn bản "Lưu ý:" được chèn trước các phần tử <span> có lớp note. Nội dung được chỉ định ở đây không tồn tại trong HTML thực tế; nó được thêm ảo thông qua CSS. Điều này có nghĩa là bạn không thể trực tiếp thao tác với nội dung được thêm thông qua JavaScript, v.v.

::after 

1span.five-stars::after {
2    content: "*****";
3    color: gold;
4}
  • ::after chèn nội dung ảo sau nội dung của một phần tử. Nó thường được sử dụng để thêm nội dung bổ sung hoặc trang trí sau một phần tử.
  • Trong ví dụ này, một biểu tượng ngôi sao vàng được thêm vào sau phần tử <span> có lớp five-stars.

::placeholder 

1input::placeholder {
2    color: rgba(0, 150, 150, 0.7);
3    font-size: 14px;
4    font-style: italic;
5}
  • Pseudo-element ::placeholder được sử dụng để định dạng văn bản placeholder trong các phần tử biểu mẫu. Theo mặc định, nó thường được hiển thị với văn bản màu xám nhạt, nhưng với pseudo-element ::placeholder, bạn có thể thay đổi kiểu dáng để phù hợp với thiết kế của mình.
  • Trong ví dụ này, màu văn bản placeholder cho phần tử input được đặt thành màu xanh trong suốt 70%, kích thước phông là 14px, và in nghiêng.

::first-letter 

1p.first::first-letter {
2    font-size: 2em;
3    color: blue;
4}
  • ::first-letter áp dụng kiểu dáng cho chữ cái đầu tiên của phần tử cấp khối. Nó được sử dụng cho các hiệu ứng chữ in như những gì thấy trong tạp chí hoặc báo chí, nơi chữ cái đầu tiên được nhấn mạnh. Lưu ý rằng pseudo-element này chỉ có hiệu lực với các phần tử cấp khối và không thể áp dụng trực tiếp với các phần tử nội tuyến như <span>.
  • Trong ví dụ này, chữ cái đầu tiên của đoạn văn sẽ được phóng to gấp đôi, in đậm, và có màu xanh.

::first-line 

1p.second::first-line {
2    font-weight: bold;
3    color: green;
4}
  • ::first-line áp dụng kiểu dáng cho dòng đầu tiên của phần tử cấp khối. Nó thường được sử dụng cho các đoạn văn bản, cho phép bạn áp dụng các kiểu dáng khác nhau cho dòng đầu tiên.
  • Trong ví dụ này, dòng đầu tiên của đoạn văn sẽ được in đậm và có màu xanh lá.

::selection 

1span::selection {
2    background-color: yellow;
3    color: black;
4}
  • ::selection áp dụng các kiểu dáng cho phần văn bản được người dùng chọn (highlight). Với điều này, bạn có thể thay đổi màu nền và màu văn bản khi văn bản được chọn.
  • Trong ví dụ này, khi văn bản của một phần tử <span> được chọn, màu nền sẽ chuyển sang vàng và văn bản chuyển sang đen.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Các ký tự đặc biệt và các hàm trong CSSCác quy tắc CSS `@`