Articles
Introdução ao CSS
Pseudo-classes e Pseudo-elementos CSS

Pseudo-classes e Pseudo-elementos CSS

Este artigo explica as pseudo-classes e pseudo-elementos do CSS.

Você pode aprender sobre pseudo-classes como :hover e pseudo-elementos como ::before.

YouTube Video

HTML para Visualização

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-classes

Pseudo-classes do CSS são funções que aplicam estilos aos elementos com base em condições específicas, como estados dos elementos ou hierarquia. Elas permitem adicionar estilos especiais com base em estados ou posições dos elementos, sendo útil para representar situações dinâmicas que não podem ser especificadas por classes ou IDs regulares. As pseudo-classes facilitam a implementação de interfaces dinâmicas e estilização baseada em condições específicas, permitindo um design que responde à interação do usuário ou à estrutura do conteúdo.

Sintaxe Básica das Pseudo-classes

A sintaxe básica das pseudo-classes é a seguinte.

1selector:pseudo-class {
2    /* Styles */
3}
  • selector é o elemento alvo.
  • A parte pseudo-class representa uma pseudo-classe que indica um estado ou condição específica.
  • : é usado para selecionar pseudo-classes.

Pseudo-classes Comumente Usadas

:hover 

1a:hover {
2    color: red;
3}
  • :hover aplica estilos quando o cursor do mouse passa sobre um elemento.
  • Neste exemplo, quando o mouse passa sobre um link, a cor do texto muda para vermelho.

:focus 

1input:focus {
2    outline: 2px solid blue;
3}
  • :focus aplica estilos quando um elemento recebe foco. É usado principalmente para elementos de formulário e links.
  • Neste exemplo, um contorno azul aparece quando um elemento input está em foco.

:active 

1button:active {
2    background-color: green;
3}
  • :active aplica estilos a um elemento quando ele está ativo (enquanto está sendo clicado).
  • Neste exemplo, enquanto o botão está sendo clicado, a cor de fundo muda para verde.

:empty 

1.box:empty {
2    background-color: lightgray;
3    border: 1px dashed black;
4    height: 50px;
5    width: 50px;
6}
  • A pseudo-classe :empty é usada para aplicar estilos a elementos que não possuem filhos. O elemento alvo não deve conter nós de texto, espaços em branco ou comentários.
  • Neste exemplo, se um elemento com a classe box não contiver nada, um fundo cinza e uma borda tracejada preta serão aplicados a esse elemento. Se houver espaços em branco, o estilo não será aplicado.

: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 é um estilo aplicado a elementos de formulário com valores de entrada válidos. O estilo :valid é aplicado quando as condições especificadas pelos atributos HTML como pattern ou type (por exemplo, email) são atendidas.

  • :invalid é um estilo aplicado a elementos de formulário com valores de entrada inválidos. O estilo :invalid é aplicado quando um elemento de formulário não atende às regras de validação HTML (por exemplo, type="email").

  • Neste exemplo, uma borda verde é exibida se o texto inserido tiver 5 ou mais caracteres, conforme especificado pelo atributo pattern. Se o texto inserido tiver menos de 5 caracteres, uma borda vermelha será exibida.

: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 é um estilo aplicado quando um elemento de entrada numérico possui um valor dentro de um intervalo especificado. O estilo :in-range é aplicado quando as condições especificadas pelos atributos min e max no HTML são atendidas.

  • :out-of-range é um estilo aplicado quando um elemento de entrada numérico possui um valor fora do intervalo especificado. O estilo :out-of-range é aplicado quando o valor excede o intervalo especificado pelos atributos min ou max.

  • Neste exemplo, quando um valor dentro do intervalo especificado pelos atributos min="18" e max="99" (18 a 99, inclusive) é inserido, uma borda azul é exibida. Quando um valor fora do intervalo é inserido, uma borda laranja é exibida.

:nth-child() 

1li:nth-child(2) {
2    color: blue;
3    font-weight: bold;
4}
  • :nth-child() aplica estilos com base na posição de um elemento filho dentro de seu pai. Você pode especificar um número ou uma expressão para n.
  • Neste exemplo, o texto do segundo item da lista fica azul.
Aplicando a Elementos Ímpares e Pares 
1li:nth-child(odd) {
2    background-color: lightblue;
3}
4
5li:nth-child(even) {
6    background-color: steelblue;
7}
  • Especificando even ou odd, você pode aplicar estilos a elementos ímpares ou pares.
  • Neste exemplo, cores de fundo diferentes são aplicadas a linhas pares e ímpares. Isso pode ser usado para designs de tabela listrada, por exemplo.

:first-child 

1small:first-child {
2    font-weight: bold;
3    color: steelblue;
4}
  • :first-child aplica estilos ao primeiro elemento filho de um pai.
  • Neste exemplo, o texto do primeiro elemento small é formatado como negrito com um tom de azul.

:last-child 

1small:last-child {
2    font-weight: bold;
3    color: seagreen;
4}
  • :last-child aplica estilos ao último elemento filho de um pai.
  • Neste exemplo, o texto do último elemento small é formatado como negrito com um tom de verde.

:has() 

1p:has(span.child) {
2    border: 2px solid black;
3}
  • A pseudo-classe :has() no CSS funciona como um seletor de elemento pai. Usando essa pseudo-classe, você pode selecionar um elemento pai com base na presença de elementos filhos.
  • Neste exemplo, o border é aplicado aos elementos p que contêm elementos span com a classe .child.

:not() 

1q:not(.quote2) {
2    font-weight: bold;
3    color: steelblue;
4}
  • :not() aplica estilos a elementos que não atendem a condições específicas.
  • Neste exemplo, o texto dos elementos q, exceto aqueles com a classe quote2, é formatado como negrito com um tom de 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}
  • A pseudo-classe :where() é um seletor especial do CSS que define a especificidade como zero. Isso é útil quando você deseja lidar com múltiplos seletores coletivamente e aplicar estilos sem afetar a especificidade dos elementos selecionados.
  • A pseudo-classe :is() agrupa múltiplos seletores e seleciona elementos que correspondem a qualquer uma das condições. A pseudo-classe :is() em si possui a mesma especificidade que seletores normais, mas aplica os estilos com base na maior especificidade entre seus seletores internos.
  • Neste exemplo, :where() e :is() são usados para aplicar estilos aos elementos <p> e <span> dentro da classe detail. O estilo text-decoration definido por :where() é sobrescrito por CSS subsequente. No entanto, o estilo definido por :is() tem uma especificidade maior e não é sobrescrito por CSS subsequente.

:checked 

1input:checked {
2    outline: 4px solid red;
3}
  • :checked aplica estilos quando uma caixa de seleção ou botão de opção é selecionado.
  • Neste exemplo, uma borda vermelha é exibida no elemento de entrada marcado (checked).

:disabled 

1button:disabled {
2    background-color: gray;
3    cursor: not-allowed;
4}
  • :disabled aplica estilos a elementos de formulário desativados.
  • Neste exemplo, um fundo cinza e um cursor 'não permitido' são aplicados ao botão desativado.

:visited 

1.link:visited {
2    color: purple;
3}
  • :visited é usado para aplicar estilos a links visitados.
  • Neste exemplo, após clicar e visitar um link, a cor do texto do elemento <a> muda para roxo.
Limitações de Privacidade e Estilo

:visited possui algumas restrições de estilo por motivos de proteção à privacidade. Isso impede que sites externos deduzam o histórico de visitas do usuário. As propriedades que podem ser alteradas com :visited estão limitadas ao seguinte:.

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

Por outro lado, propriedades diferentes destas (por exemplo, display, visibility, position, etc.) não podem ser alteradas com :visited. Isso impede que a privacidade do usuário seja exposta através do histórico de visitas.

:first-of-type 

1.first-example :first-of-type {
2    font-weight: bold;
3    color: steelblue;
4}
  • :first-of-type seleciona o primeiro elemento do seu tipo (com o mesmo nome de tag) dentro do elemento pai.
  • Neste exemplo, o texto do primeiro elemento <var> e do elemento <code> na classe first-example é estilizado em azul negrito.

:last-of-type 

1.last-example :last-of-type {
2    font-weight: bold;
3    color: seagreen;
4}
  • :last-of-type seleciona o último elemento do seu tipo dentro do elemento pai.
  • Neste exemplo, o texto do último elemento <var> e do elemento <code> na classe last-example é estilizado em verde negrito.

:nth-of-type() 

1.nth-example :nth-of-type(2) {
2    font-weight: bold;
3    color: lightsalmon;
4}
  • :nth-of-type() aplica estilos à enésima ocorrência de elementos do mesmo tipo.
  • Neste exemplo, o texto do segundo elemento <var> e do elemento <code> na classe nth-example é estilizado em laranja negrito.

Pseudo-elementos

Pseudo-elementos em CSS são usados para aplicar estilos a partes específicas do elemento selecionado. Ao contrário das pseudo-classes, os pseudo-elementos focalizam em partes específicas de um elemento em vez de no elemento inteiro. Por exemplo, eles são usados para adicionar conteúdo antes ou depois de um elemento ou aplicar estilos a caracteres ou linhas específicas.

Sintaxe Básica dos Pseudo-elementos

Pseudo-elementos geralmente são escritos com :: (dois pontos duplos) após o seletor. Isso é para distingui-los das pseudo-classes.

1selector::pseudo-element {
2    /* Styles */
3}
  • selector é o elemento alvo.
  • A parte pseudo-element representa um pseudo-elemento que se refere a uma parte ou aspecto específico de um elemento.
  • Você pode especificar um pseudo-elemento usando ::.

Pseudo-elementos Comumente Usados

::before 

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

  • ::before insere conteúdo virtual antes do conteúdo de um elemento e aplica estilos a essa parte. É útil para inserir ícones ou rótulos, por exemplo.

  • Neste exemplo, o texto "Nota:" é inserido antes dos elementos <span> com a classe note. O conteúdo especificado aqui não existe no HTML real; é adicionado virtualmente através do CSS. Isso significa que você não pode manipular diretamente o conteúdo adicionado via JavaScript, etc.

::after 

1span.five-stars::after {
2    content: "*****";
3    color: gold;
4}
  • ::after insere conteúdo virtual após o conteúdo de um elemento. Normalmente, é usado para adicionar conteúdo suplementar ou decorativo após um elemento.
  • Neste exemplo, um ícone de estrela dourada é adicionado após o elemento <span> com a classe five-stars.

::placeholder 

1input::placeholder {
2    color: rgba(0, 150, 150, 0.7);
3    font-size: 14px;
4    font-style: italic;
5}
  • O pseudo-elemento ::placeholder é usado para estilizar o texto de espaço reservado em elementos de formulário. Por padrão, ele geralmente é exibido em texto cinza claro, mas com o pseudo-elemento ::placeholder, você pode alterar o estilo para combinar com o seu design.
  • Neste exemplo, a cor do texto do espaço reservado para o elemento input está configurada como azul 70% transparente, tamanho da fonte 14px e em itálico.

::first-letter 

1p.first::first-letter {
2    font-size: 2em;
3    color: blue;
4}
  • ::first-letter aplica estilo à primeira letra de um elemento de nível de bloco. É usado para efeitos tipográficos como os vistos em revistas ou jornais, onde a primeira letra é enfatizada. Observe que este pseudo-elemento é eficaz apenas em elementos de nível de bloco e não pode ser aplicado diretamente a elementos inline como <span>.
  • Neste exemplo, a primeira letra do parágrafo será duas vezes maior, em negrito e azul.

::first-line 

1p.second::first-line {
2    font-weight: bold;
3    color: green;
4}
  • ::first-line aplica estilo à primeira linha de um elemento de bloco. É particularmente usado para parágrafos de texto, permitindo aplicar estilos diferentes à primeira linha.
  • Neste exemplo, a primeira linha do parágrafo será exibida em negrito e verde.

::selection 

1span::selection {
2    background-color: yellow;
3    color: black;
4}
  • ::selection aplica estilos à parte do texto selecionada (destacada) pelo usuário. Com isso, você pode alterar a cor de fundo e a cor do texto quando o texto é selecionado.
  • Neste exemplo, quando o texto de um elemento <span> é selecionado, o fundo fica amarelo e o texto torna-se preto.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video

Caracteres Especiais e Funções em CSSRegras CSS `@`