Articles
Introducción a CSS
Pseudo-clases y Pseudo-elementos de CSS

Pseudo-clases y Pseudo-elementos de CSS

Este artículo explica las pseudo-clases y pseudo-elementos de CSS.

Puedes aprender sobre pseudo-clases como :hover y pseudo-elementos como ::before.

YouTube Video

HTML para vista previa

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>

Pseudo-clases

Las pseudo-clases de CSS son funciones que aplican estilos a los elementos según condiciones específicas, como los estados de los elementos o la jerarquía. Te permiten agregar estilos especiales basados en los estados o posiciones de los elementos, lo que resulta útil para representar situaciones dinámicas que no pueden especificarse mediante clases o IDs regulares. Las pseudo-clases facilitan la implementación de interfaces de usuario dinámicas y el diseño basado en condiciones específicas, permitiendo que el diseño responda a la interacción del usuario o a la estructura del contenido.

Sintaxis Básica de las Pseudo-clases

La sintaxis básica de las pseudo-clases es la siguiente.

1selector:pseudo-class {
2    /* Styles */
3}
  • selector es el elemento objetivo.
  • La parte de pseudo-class representa una pseudo-clase que indica un estado o condición específica.
  • Se usa : para seleccionar pseudo-clases.

Pseudo-clases Comúnmente Utilizadas

:hover 

1a:hover {
2    color: red;
3}
  • :hover aplica estilos cuando el cursor del ratón pasa sobre un elemento.
  • En este ejemplo, cuando el ratón pasa sobre un enlace, el color del texto cambia a rojo.

:focus 

1input:focus {
2    outline: 2px solid blue;
3}
  • :focus aplica estilos cuando un elemento recibe el enfoque. Se usa principalmente para elementos de formularios y enlaces.
  • En este ejemplo, aparece un contorno azul cuando un elemento input recibe el enfoque.

:active 

1button:active {
2    background-color: green;
3}
  • :active aplica estilos a un elemento cuando está activo (mientras se está haciendo clic en él).
  • En este ejemplo, mientras se hace clic en el botón, el color de fondo cambia a verde.

:empty 

1.box:empty {
2    background-color: lightgray;
3    border: 1px dashed black;
4    height: 50px;
5    width: 50px;
6}
  • La pseudo-clase :empty se utiliza para aplicar estilos a elementos que no tienen hijos. El elemento objetivo no debe contener nodos de texto, espacios en blanco ni comentarios.
  • En este ejemplo, si un elemento con la clase box no contiene nada, se aplica un fondo gris y un borde punteado negro a ese elemento. Si hay espacios en blanco, no se aplica el estilo.

: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 es un estilo aplicado a los elementos de formulario con valores de entrada válidos. El estilo :valid se aplica cuando se cumplen las condiciones especificadas por atributos HTML como pattern o type (por ejemplo, email).

  • :invalid es un estilo aplicado a los elementos de formulario con valores de entrada no válidos. El estilo :invalid se aplica cuando un elemento de formulario no cumple con las reglas de validación de HTML (por ejemplo, type="email").

  • En este ejemplo, se muestra un borde verde si el texto ingresado tiene 5 o más caracteres, tal como lo especifica el atributo pattern. Si el texto ingresado tiene menos de 5 caracteres, se muestra un borde rojo.

: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 es un estilo que se aplica cuando un elemento de entrada numérica tiene un valor dentro de un rango especificado. El estilo :in-range se aplica cuando se cumplen las condiciones especificadas por los atributos min y max en HTML.

  • :out-of-range es un estilo que se aplica cuando un elemento de entrada numérica tiene un valor fuera del rango especificado. El estilo :out-of-range se aplica cuando el valor excede el rango especificado por los atributos min o max.

  • En este ejemplo, cuando se ingresa un valor dentro del rango especificado por los atributos min="18" y max="99" (de 18 a 99 inclusive), se muestra un borde azul. Cuando se ingresa un valor fuera del rango, se muestra un borde naranja.

:nth-child() 

1li:nth-child(2) {
2    color: blue;
3    font-weight: bold;
4}
  • :nth-child() aplica estilos basados en la posición de un elemento hijo dentro de su padre. Puedes especificar un número o una expresión para n.
  • En este ejemplo, el texto del segundo elemento de la lista se vuelve azul.
Aplicando a Elementos Impares y Pares 
1li:nth-child(odd) {
2    background-color: lightblue;
3}
4
5li:nth-child(even) {
6    background-color: steelblue;
7}
  • Al especificar even o odd, puedes aplicar estilos a los elementos impares o pares.
  • En este ejemplo, se aplican diferentes colores de fondo a las filas pares e impares. Esto se puede usar, por ejemplo, para diseños de tablas a rayas.

:first-child 

1small:first-child {
2    font-weight: bold;
3    color: steelblue;
4}
  • :first-child aplica estilos al primer elemento hijo de un elemento padre.
  • En este ejemplo, el texto del primer elemento small se muestra en negrita con un tono azul.

:last-child 

1small:last-child {
2    font-weight: bold;
3    color: seagreen;
4}
  • :last-child aplica estilos al último elemento hijo de un elemento padre.
  • En este ejemplo, el texto del último elemento small se muestra en negrita con un tono verde.

:has() 

1p:has(span.child) {
2    border: 2px solid black;
3}
  • La pseudo-clase :has() en CSS funciona como un selector de padres. Usando esta pseudo-clase, puedes seleccionar un elemento padre basado en la presencia de elementos hijos.
  • En este ejemplo, el borde se aplica a los elementos p que contienen elementos span con la clase .child.

:not() 

1q:not(.quote2) {
2    font-weight: bold;
3    color: steelblue;
4}
  • :not() aplica estilos a los elementos que no cumplen ciertas condiciones específicas.
  • En este ejemplo, el texto de los elementos q, excepto aquellos con la clase quote2, se muestra en negrita con un tono azul.

: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}
  • La pseudo-clase :where() es un selector especial de CSS que establece la especificidad en cero. Esto es útil cuando deseas manejar múltiples selectores colectivamente y aplicar estilos sin afectar la especificidad de los elementos seleccionados.
  • La pseudo-clase :is() agrupa múltiples selectores y selecciona elementos que coinciden con alguna de las condiciones. La pseudo-clase :is() tiene la misma especificidad que los selectores normales, pero aplica estilos basándose en la mayor especificidad entre sus selectores internos.
  • En este ejemplo, se utilizan :where() y :is() para aplicar estilos a elementos <p> y <span> dentro de la clase detail. El estilo text-decoration establecido por :where() es sobrescrito por CSS subsiguiente. Sin embargo, el estilo establecido por :is() tiene una mayor especificidad y no es sobrescrito por CSS subsiguiente.

:checked 

1input:checked {
2    outline: 4px solid red;
3}
  • :checked aplica estilos cuando un checkbox o botón de radio está seleccionado.
  • En este ejemplo, se muestra un borde rojo en el elemento de entrada marcado.

:disabled 

1button:disabled {
2    background-color: gray;
3    cursor: not-allowed;
4}
  • :disabled aplica estilos a los elementos de formulario deshabilitados.
  • En este ejemplo, se aplica un fondo gris y un cursor de 'no permitido' al botón deshabilitado.

:visited 

1.link:visited {
2    color: purple;
3}
  • :visited se utiliza para aplicar estilos a enlaces visitados.
  • En este ejemplo, después de hacer clic y visitar un enlace, el color del texto del elemento <a> cambia a morado.
Limitaciones de Privacidad y Estilo

:visited tiene algunas restricciones de estilo por razones de protección de la privacidad. Esto evita que sitios externos infieran el historial de visitas del usuario. Las propiedades que se pueden cambiar con :visited se limitan a las siguientes:.

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

Por otro lado, propiedades distintas a estas (por ejemplo, display, visibility, position, etc.) no pueden modificarse con :visited. Esto evita que la privacidad del usuario se vea comprometida a través del historial de visitas.

:first-of-type 

1.first-example :first-of-type {
2    font-weight: bold;
3    color: steelblue;
4}
  • :first-of-type selecciona el primer elemento de su tipo (con el mismo nombre de etiqueta) dentro de su elemento padre.
  • En este ejemplo, el texto del primer elemento <var> y el primer elemento <code> de la clase first-example se estiliza en azul negrita.

:last-of-type 

1.last-example :last-of-type {
2    font-weight: bold;
3    color: seagreen;
4}
  • :last-of-type selecciona el último elemento de su tipo dentro de su elemento padre.
  • En este ejemplo, el texto del último elemento <var> y el último elemento <code> de la clase last-example se estiliza en verde negrita.

:nth-of-type() 

1.nth-example :nth-of-type(2) {
2    font-weight: bold;
3    color: lightsalmon;
4}
  • :nth-of-type() aplica estilos a la enésima ocurrencia de elementos del mismo tipo.
  • En este ejemplo, el texto del segundo elemento <var> y el segundo elemento <code> de la clase nth-example se estiliza en naranja negrita.

Pseudo-elementos

Los pseudo-elementos en CSS se utilizan para aplicar estilos a partes específicas del elemento seleccionado. A diferencia de las pseudo-clases, los pseudo-elementos se enfocan en partes específicas de un elemento en lugar de todo el elemento. Por ejemplo, se utilizan para agregar contenido antes o después de un elemento o aplicar estilos a caracteres o líneas específicas.

Sintaxis Básica de los Pseudo-elementos

Los pseudo-elementos generalmente se escriben con :: (doble dos puntos) después del selector. Esto es para distinguirlos de las pseudo-clases.

1selector::pseudo-element {
2    /* Styles */
3}
  • selector es el elemento objetivo.
  • La parte pseudo-element representa un pseudo-elemento que se refiere a una parte o aspecto específico de un elemento.
  • Puedes especificar un pseudo-elemento utilizando ::.

Pseudo-elementos Comúnmente Utilizados

::before 

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

  • ::before inserta contenido virtual antes del contenido de un elemento y aplica estilos a esa parte. Es útil para insertar iconos o etiquetas, por ejemplo.

  • En este ejemplo, el texto "Nota:" se inserta antes de los elementos <span> con la clase note. El contenido especificado aquí no existe en el HTML real; se agrega virtualmente a través de CSS. Esto significa que no puedes manipular directamente el contenido añadido a través de JavaScript, etc.

::after 

1span.five-stars::after {
2    content: "*****";
3    color: gold;
4}
  • ::after inserta contenido virtual después del contenido de un elemento. Se utiliza típicamente para agregar contenido suplementario o decorativo después de un elemento.
  • En este ejemplo, se añade un icono de estrella dorada después del elemento <span> con la clase five-stars.

::placeholder 

1input::placeholder {
2    color: rgba(0, 150, 150, 0.7);
3    font-size: 14px;
4    font-style: italic;
5}
  • El pseudo-elemento ::placeholder se utiliza para estilizar el texto del marcador de posición en elementos de formulario. Por defecto, generalmente se muestra en texto gris claro, pero con el pseudo-elemento ::placeholder puedes cambiar el estilo para que coincida con tu diseño.
  • En este ejemplo, el color del texto del marcador de posición para el elemento input se establece en azul transparente al 70%, tamaño de fuente en 14px y cursiva.

::first-letter 

1p.first::first-letter {
2    font-size: 2em;
3    color: blue;
4}
  • ::first-letter aplica estilo a la primera letra de un elemento de nivel bloque. Se utiliza para efectos tipográficos como los que se ven en revistas o periódicos, donde la primera letra se enfatiza. Ten en cuenta que este pseudo-elemento solo es efectivo en elementos de nivel bloque y no puede aplicarse directamente a elementos en línea como <span>.
  • En este ejemplo, la primera letra del párrafo será el doble de grande, estará en negrita y será azul.

::first-line 

1p.second::first-line {
2    font-weight: bold;
3    color: green;
4}
  • ::first-line aplica estilo a la primera línea de un elemento de bloque. Se utiliza particularmente para párrafos de texto, lo que te permite aplicar estilos diferentes a la primera línea.
  • En este ejemplo, la primera línea del párrafo estará en negrita y será de color verde.

::selection 

1span::selection {
2    background-color: yellow;
3    color: black;
4}
  • ::selection aplica estilos a la parte del texto seleccionada (resaltada) por el usuario. Con esto, puedes cambiar el color de fondo y el color del texto cuando el texto es seleccionado.
  • En este ejemplo, cuando se selecciona el texto de un elemento <span>, el fondo se vuelve amarillo y el texto se torna negro.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video

Caracteres especiales y funciones en CSSReglas CSS `@`