diff options
Diffstat (limited to 'files/es/web/css/_colon_nth-last-child/index.html')
| -rw-r--r-- | files/es/web/css/_colon_nth-last-child/index.html | 197 |
1 files changed, 197 insertions, 0 deletions
diff --git a/files/es/web/css/_colon_nth-last-child/index.html b/files/es/web/css/_colon_nth-last-child/index.html new file mode 100644 index 0000000000..daf0b8a50b --- /dev/null +++ b/files/es/web/css/_colon_nth-last-child/index.html @@ -0,0 +1,197 @@ +--- +title: ':nth-last-child' +slug: 'Web/CSS/:nth-last-child' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:nth-last-child' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:nth-last-child()</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> selecciona uno o más elementos en función de su posición entre un grupo de hermanos, contando desde el final.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona cada cuarto elemento entre + cualquier grupo de hermanos, contando + hacia atrás desde el último */ +:nth-last-child(4n) { + color: lime; +}</pre> + +<div class="note"> +<p><strong>Nota:</strong> Esta pseudo-clase es esencialmente la misma que {{Cssxref(":nth-child")}}, excepto que cuenta los elementos hacia atrás desde el final, no hacia adelante desde el principio.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>La pseudo-clase <code>nth-last-child</code> se especifica con un solo argumento, que representa el patrón para los elementos coincidentes, contando desde el final.</p> + +<h3 id="Valores_de_palabras_clave">Valores de palabras clave</h3> + +<dl> + <dt><code>odd</code></dt> + <dd>Representa elementos cuya posición numérica en una serie de hermanos es impar: 1, 3, 5, etc., contando desde el final.</dd> + <dt><code>even</code></dt> + <dd>Representa elementos cuya posición numérica en una serie de hermanos es par: 2, 4, 6, etc., contando desde el final.</dd> +</dl> + +<h3 id="Notación_funcional">Notación funcional</h3> + +<dl> + <dt><code><An+B></code></dt> + <dd>Representa elementos cuya posición numérica en una serie de hermanos coincide con el patrón <code>An+B</code>, para cada entero positivo o valor cero de <code>n</code>. El índice del primer elemento, contando desde el final, es <code>1</code>. Los valores <code>A</code> y <code>B</code> deben ser ambos {{cssxref("<integer>")}}.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Example_selectors" name="Example_selectors">Selectores de ejemplo</h3> + +<dl> + <dt><code>tr:nth-last-child(odd)</code> o <code>tr:nth-last-child(2n+1)</code></dt> + <dd>Representa las filas impares de una tabla HTML: 1, 3, 5, etc., contando desde el final.</dd> + <dt><code>tr:nth-last-child(even)</code> o <code>tr:nth-last-child(2n)</code></dt> + <dd>Representa las filas pares de una tabla HTML: 2, 4, 6, etc., contando desde el final.</dd> + <dt><code>:nth-last-child(7)</code></dt> + <dd>Representa el séptimo elemento, contando desde el final.</dd> + <dt><code>:nth-last-child(5n)</code></dt> + <dd>Representa los elementos 5, 10, 15, etc., contando desde el final.</dd> + <dt><code>:nth-last-child(3n+4)</code></dt> + <dd>Representa los elementos 4, 7, 10, 13, etc., contando desde el final.</dd> + <dt><code>:nth-last-child(-n+3)</code></dt> + <dd>Representa los últimos tres elementos entre un grupo de hermanos.</dd> + <dt><code>p:nth-last-child(n)</code></dt> + <dd>Representa cada elemento <code><p></code> entre un grupo de hermanos. Esto es lo mismo que un simple selector <code>p</code>. </dd> + <dt><code>p:nth-last-child(1)</code> or <code>p:nth-last-child(0n+1)</code></dt> + <dd>Representa cada <code><p></code> que es el primer elemento entre un grupo de hermanos, contando desde el final. Esto es lo mismo que el selector {{cssxref(":last-child")}}. </dd> +</dl> + +<h3 id="Ejemplo_de_tabla">Ejemplo de tabla</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><table> + <tbody> + <tr> + <td>Primera línea</td> + </tr> + <tr> + <td>Segunda línea</td> + </tr> + <tr> + <td>Tercera línea</td> + </tr> + <tr> + <td>Cuarta línea</td> + </tr> + <tr> + <td>Quinta línea</td> + </tr> + </tbody> +</table> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">table { + border: 1px solid blue; +} + +/* Selecciona los últimos tres elementos */ +tr:nth-last-child(-n+3) { + background-color: pink; +} + +/* Toma todos los elementos a partir del penúltimo elemento */ +tr:nth-last-child(n+2) { + color: blue; +} + +/* Seleccione solo el penúltimo elemento */ +tr:nth-last-child(2) { + font-weight: 600; +} +</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample('Ejemplo_de_tabla', 300, 150)}}</p> + +<h3 id="Ejemplo_de_caso_Edge">Ejemplo de caso Edge</h3> + +<p>Como <code>n</code> comienza en cero, mientras que el último elemento comienza en uno, <code>n</code> y <code>n+1</code> seleccionarán los mismos elementos.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><table> + <tbody> + <tr> + <td>Primera línea</td> + </tr> + <tr> + <td>Segunda línea</td> + </tr> + <tr> + <td>Tercera línea</td> + </tr> + </tbody> +</table></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">tr:nth-last-child(n) { + background-color: lightgray; +} + +tr:nth-last-child(n+1){ + font-weight: 600; +} +</pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>{{EmbedLiveSample('Ejemplo_de_caso_Edge')}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Los elementos coincidentes no requieren tener un padre.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definición Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("css.selectors.nth-last-child")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{Cssxref(":nth-child")}}, {{Cssxref(":nth-last-of-type")}}</li> +</ul> |