1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
---
title: Pseudo-classes
slug: Web/CSS/Pseudo-classes
tags:
- CSS
- Referencia CSS
- Selectores
- pseudo-clases
translation_of: Web/CSS/Pseudo-classes
---
<p>{{ CSSRef() }}</p>
<p>Una <strong>pseudoclase CSS</strong> es una palabra clave que se añade a los selectores y que especifica un estado especial del elemento seleccionado. Por ejemplo, {{ Cssxref(":hover") }} aplicará un estilo cuando el usuario haga hover sobre el elemento especificado por el selector.</p>
<pre><code>div:hover {
background-color: #F89B4D;
}</code></pre>
<p>Las pseudoclases, junto con los pseudoelementos, permiten aplicar un estilo a un elemento no sólo en relación con el contenido del árbol de documento, sino también en relación a factores externos como el historial del navegador ({{ cssxref(":visited") }}, por ejemplo), el estado de su contenido (como {{ cssxref(":checked") }} en algunos elementos de formulario), o la posición del ratón (como {{ cssxref(":hover") }} que permite saber si el ratón está encima de un elemento o no).</p>
<div class="note">
<p><strong>Nota:</strong> En lugar de usar pseudoclases, {{cssxref("pseudo-elements")}} puede usarse para dar estilo a una <em>parte específica</em> de un elemento.</p>
</div>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="syntaxbox">selector:pseudoclase { propiedad: valor; }
</pre>
<p>Al igual que las clases, se pueden concatenar la cantidad de pseudoclases que se deseen en un selector.</p>
<h2 id="Indice_de_las_pseudo-clases_estándar">Indice de las pseudo-clases estándar</h2>
<div class="index">
<ul>
<li>{{ Cssxref(":active") }}</li>
<li>{{ Cssxref(":checked") }}</li>
<li>{{ Cssxref(":default") }}</li>
<li>{{ Cssxref(":dir", ":dir()")}}</li>
<li>{{ Cssxref(":disabled") }}</li>
<li>{{ Cssxref(":empty") }}</li>
<li>{{ Cssxref(":enabled") }}</li>
<li>{{ Cssxref(":first") }}</li>
<li>{{ Cssxref(":first-child") }}</li>
<li>{{ Cssxref(":first-of-type") }}</li>
<li>{{ Cssxref(":fullscreen") }}</li>
<li>{{ Cssxref(":focus") }}</li>
<li>{{ Cssxref(":hover") }}</li>
<li>{{ Cssxref(":indeterminate") }}</li>
<li>{{ Cssxref(":in-range") }}</li>
<li>{{ Cssxref(":invalid") }}</li>
<li>{{ Cssxref(":lang", ":lang()") }}</li>
<li>{{ Cssxref(":last-child") }}</li>
<li>{{ Cssxref(":last-of-type") }}</li>
<li>{{ Cssxref(":left") }}</li>
<li>{{ Cssxref(":link") }}</li>
<li>{{ Cssxref(":not", ":not()") }}</li>
<li>{{ Cssxref(":nth-child", ":nth-child()") }}</li>
<li>{{ Cssxref(":nth-last-child", ":nth-last-child()") }}</li>
<li>{{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}</li>
<li>{{ Cssxref(":nth-of-type", ":nth-of-type()") }}</li>
<li>{{ Cssxref(":only-child") }}</li>
<li>{{ Cssxref(":only-of-type") }}</li>
<li>{{ Cssxref(":optional") }}</li>
<li>{{ Cssxref(":out-of-range") }}</li>
<li>{{ Cssxref(":read-only") }}</li>
<li>{{ Cssxref(":read-write") }}</li>
<li>{{ Cssxref(":required") }}</li>
<li>{{ Cssxref(":right") }}</li>
<li>{{ Cssxref(":root") }}</li>
<li>{{ Cssxref(":scope") }}</li>
<li>{{ Cssxref(":target") }}</li>
<li>{{ Cssxref(":valid") }}</li>
<li>{{ Cssxref(":visited") }}</li>
</ul>
</div>
<h2 id="Especificaciones"><span>Especificaciones</span></h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('Fullscreen') }}</td>
<td>{{ Spec2('Fullscreen') }}</td>
<td>Definido <code>:fullscreen</code>.</td>
</tr>
<tr>
<td>{{ SpecName('HTML WHATWG') }}</td>
<td>{{ Spec2('HTML WHATWG') }}</td>
<td>Ningún cambio desde {{ SpecName('HTML5 W3C') }}.</td>
</tr>
<tr>
<td>{{SpecName('CSS4 Selectors')}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td>Definido <code>:any-link</code>, <code>:local-link</code>, <code>:scope</code>, <code>:active-drop-target</code>, <code>:valid-drop-target</code>, <code>:invalid-drop-target</code>, <code>:current</code>, <code>:past</code>, <code>:future</code>, <code>:placeholder-shown</code>, <code>:user-error</code>, <code>:blank</code>, <code>:nth-match()</code>, <code>:nth-last-match()</code>, <code>:nth-column()</code>, <code>:nth-last-column()</code>, and <code>:matches()</code>.<br>
Ningún cambio significativo para las pseudo-clases difinidas en {{SpecName('CSS3 Selectors')}} y en {{SpecName('HTML5 W3C')}} (Aunque el significado semántico no fuera absorbido).</td>
</tr>
<tr>
<td>{{ SpecName('HTML5 W3C') }}</td>
<td>{{ Spec2('HTML5 W3C') }}</td>
<td>Define el significado semántico en el contexto HTML de <code>:link</code>, <code>:visited</code>, <code>:active</code>, <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code>, and <code>:indeterminate</code>.<br>
Definido <code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code>, <code>:read-write</code>, y <code>:dir()</code>.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Basic UI') }}</td>
<td>{{ Spec2('CSS3 Basic UI') }}</td>
<td>Definido <code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code>, y <code>:read-write</code>, pero sin el significado semántico asociado.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Selectors')}}</td>
<td>{{Spec2('CSS3 Selectors')}}</td>
<td>Definido <code>:target</code>, <code>:root</code>, <code>:nth-child()</code>, <code>:nth-last-of-child()</code>, <code>:nth-of-type()</code>, <code>:nth-last-of-type()</code>, <code>:last-child</code>, <code>:first-of-type</code>, <code>:last-of-type</code>, <code>:only-child</code>, <code>:only-of-type</code>, <code>:empty</code>, y <code>:not()</code>.<br>
Define la sintaxis de <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code>, y <code>:indeterminate</code>, pero sin el significado semántico asociado.<br>
Ningún cambio significativo para las pseudo-clases difinidas en {{SpecName('CSS2.1')}}.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Definido <code>:lang()</code>, <code>:first-child</code>, <code>:hover</code>, y <code>:focus</code>.<br>
Ningún cambio significativo para las pseudo-clases difinidas en {{SpecName('CSS1')}}.</td>
</tr>
<tr>
<td>{{SpecName('CSS1')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Definido <code>:link</code>, <code>:visited</code>, y <code>:active</code>, pero sin el significado semántico asociado.</td>
</tr>
</tbody>
</table>
|
