Articles
Panimula sa CSS
Mga CSS Pseudo-class at Pseudo-element

Mga CSS Pseudo-class at Pseudo-element

Ipinaliwanag ng artikulong ito ang mga pseudo-class at pseudo-element ng CSS.

Maaari kang matuto tungkol sa mga pseudo-class tulad ng :hover at mga pseudo-element tulad ng ::before.

YouTube Video

HTML para sa Preview

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>

Mga Pseudo-class

Ang mga pseudo-class ng CSS ay mga function na naglalapat ng style sa mga elemento batay sa mga partikular na kundisyon gaya ng estado ng elemento o herarkiya. Pinapayagan ka nitong magdagdag ng espesyal na estilo batay sa estado o posisyon ng elemento, na ginagamit para sa pag representasyon ng mga dinamikong sitwasyon na hindi kayang tukuyin ng regular na mga class o ID. Pinapadali ng mga pseudo-class ang pag-implement ng dinamikong UI at pag-style batay sa mga partikular na kundisyon, na nagbibigay daan sa disenyo na tumutugon sa interaksyon ng gumagamit o istruktura ng nilalaman.

Pangunahing Sintaks ng mga Pseudo-class

Ang pangunahing sintaksis ng mga pseudo-class ay ang mga sumusunod.

1selector:pseudo-class {
2    /* Styles */
3}
  • Ang selector ay ang target na elemento.
  • Ang bahagi ng pseudo-class ay kumakatawan sa isang pseudo-class na nagpapahiwatig ng tiyak na estado o kundisyon.
  • Ang : ay ginagamit upang pumili ng mga pseudo-class.

Karaniwang Ginagamit na mga Pseudo-class

:hover 

1a:hover {
2    color: red;
3}
  • Ang :hover ay naglalapat ng istilo kapag ang mouse cursor ay pumapatong sa isang elemento.
  • Sa halimbawang ito, kapag ang mouse ay pumapatong sa isang link, nagbabago ang kulay ng teksto sa pula.

:focus 

1input:focus {
2    outline: 2px solid blue;
3}
  • Ang :focus ay naglalapat ng istilo kapag tumanggap ng pokus ang isang elemento. Ito ay pangunahing ginagamit para sa mga elemento ng form at mga link.
  • Sa halimbawang ito, lumalabas ang asul na balangkas kapag ang isang input na elemento ay nakatutok.

:active 

1button:active {
2    background-color: green;
3}
  • Ang :active ay naglalapat ng istilo sa isang elemento kapag ito ay aktibo (habang ito ay kinaklik pa).
  • Sa halimbawang ito, habang ang button ay kinaklik, nagbabago ang kulay ng background sa berde.

:empty 

1.box:empty {
2    background-color: lightgray;
3    border: 1px dashed black;
4    height: 50px;
5    width: 50px;
6}
  • Ang :empty pseudo-class ay ginagamit upang maglagay ng mga estilo sa mga elementong walang mga anak. Ang target na elemento ay hindi dapat maglaman ng mga text node, whitespace, o mga komento.
  • Sa halimbawang ito, kung ang isang elemento na may klase na box ay walang laman, isang kulay-abong background at isang itim na dashed na border ang inilalapat sa elementong iyon. Kung mayroong whitespace, ang estilo ay hindi inilalapat.

: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}

  • Ang :valid ay isang estilo na inilalapat sa mga elemento ng form na may wastong halaga ng input. Ang estilo ng :valid ay inilalapat kapag ang mga kundisyon na tinukoy ng mga HTML katangian tulad ng pattern o type (hal. email) ay natugunan.

  • Ang :invalid ay isang estilo na inilalapat sa mga elemento ng form na may hindi wastong halaga ng input. Ang estilo ng :invalid ay inilalapat kapag ang isang elemento ng form ay hindi sumusunod sa mga panuntunan ng HTML validation (hal. type="email").

  • Sa halimbawang ito, isang berdeng border ang ipinapakita kung ang ipinasok na teksto ay 5 o higit pang mga karakter ang haba, gaya ng tinukoy ng katangiang pattern. Kung ang ipinasok na teksto ay mas mababa sa 5 karakter, isang pulang border ang ipinapakita.

: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}

  • Ang :in-range ay isang estilo na inilalapat kapag ang isang numeric na input na elemento ay naglalaman ng halaga na nasa loob ng itinakdang saklaw. Ang estilo na :in-range ay inilalapat kapag ang mga kundisyong itinakda ng mga katangiang min at max sa HTML ay natutugunan.

  • Ang :out-of-range ay isang estilo na inilalapat kapag ang isang numeric na input na elemento ay naglalaman ng halaga na wala sa itinakdang saklaw. Ang estilo na :out-of-range ay inilalapat kapag ang halaga ay lumampas sa saklaw na itinakda ng mga katangiang min o max.

  • Sa halimbawang ito, kapag ang halaga na nasa loob ng saklaw na itinakda ng mga katangiang min="18" at max="99" (18 hanggang 99 kabilang ang mga ito) ay ipinasok, ipapakita ang isang asul na border. Kapag ang isang halaga na wala sa saklaw ay ipinasok, ipapakita ang isang kulay-kahel na border.

:nth-child() 

1li:nth-child(2) {
2    color: blue;
3    font-weight: bold;
4}
  • Ang :nth-child() ay naglalapat ng istilo batay sa posisyon ng isang anak na elemento sa loob ng kanyang magulang. Maaari mong tukuyin ang isang numero o isang expression para sa n.
  • Sa halimbawang ito, ang teksto ng ikalawang bagay sa listahan ay nagiging asul.
Paglalapat sa Hindi Pangkaraniwan at Parehong mga Elemento 
1li:nth-child(odd) {
2    background-color: lightblue;
3}
4
5li:nth-child(even) {
6    background-color: steelblue;
7}
  • Sa pamamagitan ng pagtukoy ng even o odd, maaari mong ilapat ang istilo sa mga elementong odd o even.
  • Sa halimbawang ito, iba't ibang kulay ng background ay inilalapat sa magkakasunod na mga hilera ng tabla. Ito ay maaaring gamitin para sa mga disenyo ng tabla na may mga guhit, halimbawa.

:first-child 

1small:first-child {
2    font-weight: bold;
3    color: steelblue;
4}
  • Ang :first-child ay nag-aaplay ng mga estilo sa unang child element ng isang parent.
  • Sa halimbawang ito, ang teksto ng unang small na elemento ay may estilo bilang naka-bold na may lilim ng asul.

:last-child 

1small:last-child {
2    font-weight: bold;
3    color: seagreen;
4}
  • Ang :last-child ay nag-aaplay ng mga estilo sa huling child element ng isang parent.
  • Sa halimbawang ito, ang teksto ng huling small na elemento ay may istilo bilang naka-bold na may lilim ng berde.

:has() 

1p:has(span.child) {
2    border: 2px solid black;
3}
  • Ang :has() pseudo-class sa CSS ay gumagana bilang isang parent selector. Sa paggamit ng pseudo-class na ito, maaari mong piliin ang isang parent element batay sa presensya ng mga anak na elemento.
  • Sa halimbawa na ito, ang border ay inilalapat sa mga p na elemento na naglalaman ng span na mga elemento na may .child na klase.

:not() 

1q:not(.quote2) {
2    font-weight: bold;
3    color: steelblue;
4}
  • Ang :not() ay nag-aaplay ng mga estilo sa mga element na hindi nakakatugon sa partikular na mga kondisyon.
  • Sa halimbawang ito, ang teksto ng mga q na elemento, maliban sa mga may klase na quote2, ay may istilo bilang naka-bold na may lilim ng asul.

: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}
  • Ang :where() pseudo-class ay isang espesyal na CSS selector na nagtatakda ng specificity sa zero. Ito ay kapaki-pakinabang kapag nais mong hawakan ang maraming mga selector nang pinagsama at maglapat ng mga estilo nang hindi naaapektuhan ang specificity ng mga napiling elemento.
  • Ang :is() pseudo-class ay nagmumungkahi ng maramihang mga selector at pumipili ng mga elementong tumutugma sa alinman sa mga kundisyon. Ang :is() pseudo-class mismo ay may parehong specificity tulad ng karaniwang mga selector, ngunit ito ay naglalapat ng mga estilo batay sa pinakamataas na specificity sa pagitan ng mga panloob nitong selector.
  • Sa halimbawang ito, ang :where() at :is() ay ginagamit upang maglapat ng mga estilo sa mga <p> na elemento at mga <span> na elemento sa loob ng klase na detail. Ang istilo ng text-decoration na itinatakda ng :where() ay na-o-override ng mga sumusunod na CSS. Gayunpaman, ang istilo na itinatakda ng :is() ay may mas mataas na specificity at hindi na-o-override ng mga sumusunod na CSS.

:checked 

1input:checked {
2    outline: 4px solid red;
3}
  • Ang :checked ay nag-aaplay ng mga estilo kapag isang checkbox o radio button ang napili.
  • Sa halimbawang ito, isang pulang border ang ipinapakita sa napiling input na elemento.

:disabled 

1button:disabled {
2    background-color: gray;
3    cursor: not-allowed;
4}
  • Ang :disabled ay nag-aaplay ng mga estilo sa mga disabled na form element.
  • Sa halimbawang ito, isang gray na background at 'not-allowed' na cursor ang inilalapat sa disabled na button.

:visited 

1.link:visited {
2    color: purple;
3}
  • Ang :visited ay ginagamit upang maglapat ng mga estilo sa mga binisitang link.
  • Sa halimbawang ito, pagkatapos pindutin at bisitahin ang isang link, ang kulay ng teksto ng <a> na elemento ay nagbabago sa lilang.
Limitasyon ng Pagkapribado at Estilo

Ang :visited ay may ilang mga limitasyon sa istilo para sa mga dahilan ng proteksyon ng privacy. Pinipigilan nito ang mga panlabas na site na mahinuha ang kasaysayan ng pagbisita ng user. Ang mga katangiang maaaring baguhin gamit ang :visited ay limitado lamang sa mga sumusunod:.

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

Sa kabilang banda, ang mga katangiang bukod dito (hal., display, visibility, position, atbp.) ay hindi maaaring baguhin gamit ang :visited. Pinipigilan nito ang paglabas ng privacy ng gumagamit sa pamamagitan ng kasaysayan ng pagbisita.

:first-of-type 

1.first-example :first-of-type {
2    font-weight: bold;
3    color: steelblue;
4}
  • Ang :first-of-type ay pumipili sa unang elemento ng kanyang uri (na may parehong pangalan ng tag) sa loob ng kanyang parent na elemento.
  • Sa halimbawa na ito, ang teksto ng unang <var> na elemento at <code> na elemento sa first-example na klase ay naka-ayos sa bold na asul.

:last-of-type 

1.last-example :last-of-type {
2    font-weight: bold;
3    color: seagreen;
4}
  • Ang :last-of-type ay pumipili sa huling elemento ng kanyang uri sa loob ng kanyang parent na elemento.
  • Sa halimbawa na ito, ang teksto ng huling <var> na elemento at <code> na elemento sa last-example na klase ay naka-ayos sa bold na berde.

:nth-of-type() 

1.nth-example :nth-of-type(2) {
2    font-weight: bold;
3    color: lightsalmon;
4}
  • Ang :nth-of-type() ay nag-aaplay ng mga estilo sa ika-n na paglitaw ng mga elemento ng parehong uri.
  • Sa halimbawa na ito, ang teksto ng pangalawang <var> na elemento at <code> na elemento sa nth-example na klase ay naka-ayos sa bold na kahel.

Mga Pseudo-elemento

Ang mga pseudo-elemento sa CSS ay ginagamit upang mag-apply ng mga estilo sa tiyak na bahagi ng napiling elemento. Hindi tulad ng pseudo-classes, ang pseudo-elements ay nakatuon sa mga partikular na bahagi ng isang elemento kaysa sa buong elemento. Halimbawa, ginagamit ang mga ito upang magdagdag ng nilalaman bago o pagkatapos ng isang elemento o mag-apply ng mga estilo sa partikular na mga karakter o linya.

Pangunahing Sintaks ng Mga Pseudo-elemento

Ang mga pseudo-elemento ay karaniwang isinusulat gamit ang :: (dobleng tutuldok) pagkatapos ng tagapili. Ito ay upang maiba ang mga ito mula sa pseudo-classes.

1selector::pseudo-element {
2    /* Styles */
3}
  • Ang selector ay ang target na elemento.
  • Ang bahagi ng pseudo-element ay kumakatawan sa isang pseudo-element na tumutukoy sa isang partikular na bahagi o aspeto ng isang elemento.
  • Maaari mong tukuyin ang isang pseudo-element sa pamamagitan ng paggamit ng ::.

Karaniwang Ginagamit na Mga Pseudo-element

::before 

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

  • Ang ::before ay naglalagay ng virtual na nilalaman bago ang nilalaman ng isang elemento at nag-aapply ng mga estilo sa bahaging iyon. Ito ay kapaki-pakinabang para sa paglalagay ng mga icon o label, halimbawa.

  • Sa halimbawa na ito, ang teksto na "Note:" ay idinadagdag bago ang <span> na mga elemento na may klase na note. Ang nilalamang tinukoy dito ay hindi umiiral sa aktwal na HTML; ito ay idinadagdag sa paraang virtual sa pamamagitan ng CSS. Ibig sabihin nito, hindi mo direktang ma-manipula ang nilalaman na idinagdag gamit ang JavaScript, atbp.

::after 

1span.five-stars::after {
2    content: "*****";
3    color: gold;
4}
  • Ang ::after ay naglalagay ng virtual na nilalaman pagkatapos ng nilalaman ng isang elemento. Kadalasan itong ginagamit upang magdagdag ng dagdag na nilalaman o pampalamuti pagkatapos ng isang elemento.
  • Sa halimbawa na ito, isang gintong star icon ang idinagdag pagkatapos ng <span> na elemento na may klase na five-stars.

::placeholder 

1input::placeholder {
2    color: rgba(0, 150, 150, 0.7);
3    font-size: 14px;
4    font-style: italic;
5}
  • Ang ::placeholder na pseudo-element ay ginagamit upang i-ayos ang placeholder na teksto sa mga form na elemento. Sa default, karaniwang ipinapakita ito sa liwanag na kulay abong teksto, ngunit gamit ang ::placeholder na pseudo-element, maaari mong baguhin ang istilo upang tumugma sa iyong disenyo.
  • Sa halimbawa na ito, ang kulay ng placeholder na teksto para sa input na elemento ay itinakda sa 70% transparent na asul, laki ng font sa 14px, at naka-italic.

::first-letter 

1p.first::first-letter {
2    font-size: 2em;
3    color: blue;
4}
  • Ang ::first-letter ay nagpapakilala ng estilo sa unang letra ng isang block-level na elemento. Ito ay ginagamit para sa typographic na epekto tulad ng nakikita sa mga magasin o pahayagan, kung saan ang unang letra ay binibigyang-diin. Tandaan na ang pseudo-element na ito ay epektibo lamang sa mga block-level na elemento at hindi maaaring direktang gamitin sa inline na mga elemento tulad ng <span>.
  • Sa halimbawa na ito, ang unang letra ng talata ay magiging doble ang laki, bold, at asul.

::first-line 

1p.second::first-line {
2    font-weight: bold;
3    color: green;
4}
  • Ang ::first-line ay nagpapakilala ng estilo sa unang linya ng isang block na elemento. Ito ay partikular na ginagamit para sa mga talata ng teksto, na nagbibigay-daan sa iyo na maglagay ng iba’t ibang estilo sa unang linya.
  • Sa halimbawa na ito, ang unang linya ng talata ay magiging bold at berde.

::selection 

1span::selection {
2    background-color: yellow;
3    color: black;
4}
  • Ang ::selection ay naglalapat ng mga estilo sa bahagi ng teksto na pinili (highlighted) ng gumagamit. Sa pamamagitan nito, maaari mong baguhin ang kulay ng background at kulay ng teksto kapag ang teksto ay napili.
  • Sa halimbawa na ito, kapag ang teksto ng isang <span> na elemento ay napili, ang background ay magiging dilaw at ang teksto ay nagiging itim.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video

Mga Espesyal na Karakter at Mga Pag-andar sa CSSMga Patakaran ng CSS `@`