EntradaEl primer encabezado h2 de la etiqueta del artículo.
- uno
- dos
- tres
css incluso elementos. Pseudo-clases de CSS: nth-child y nth-of-type Css selecciona el segundo elemento
Te doy la bienvenida a mi blog. Me gustaría escribir hoy sobre el tema de cómo seleccionar el primer elemento principal en css, porque esto le permite usar menos clases de estilo.
Pseudo-clases: first-child y first-of-type ¿cuál es la diferencia?
Para hacer referencia al primer elemento del contenedor principal en css, se inventaron dos pseudoclases. Inmediatamente propongo considerar todo con un ejemplo para que entienda:
Este es un párrafo
Este es un párrafo
Este es un párrafo
Este es un párrafo
Este es un párrafo
Digamos que tenemos tal marcado. El objetivo es hacer referencia al primer párrafo y diseñarlo por separado de los demás sin agregarle clases. Esto se puede hacer así:
#wrapper p:primer-hijo(
Color rojo;
}
El color del primer párrafo se volverá rojo, puedes comprobarlo.
#wrapper p:primero-de-tipo(
color rojo;
}
Ocurrirá lo mismo. Entonces, ¿cuál es la diferencia? Y radica en el hecho de que la pseudoclase first-of-type busca y encuentra el primer elemento del padre, dado su tipo, y first-child no busca nada, solo toma el primer elemento del padre que aparece y, si es un párrafo, le aplica estilos. Si no, nada será seleccionado y aplicado.
Este es un párrafo
Este es un párrafo
Este es un párrafo
Este es un párrafo
Este es un párrafo
Ahora considere: ¿funcionaría el primero de tipo en este caso? Sí, porque tiene en cuenta el tipo de elemento y seleccionará el primer párrafo, y no el primero de todos los elementos. ¿Trabajará el primer hijo? Intentalo. No funcionará porque el párrafo no es el primer elemento del padre.
Personalmente, no entendí de inmediato la diferencia entre estas pseudoclases y me confundí por un tiempo, pero ahora, espero haberte explicado normalmente.
Otro detalle importante
Los elementos se cuentan desde el elemento principal, por lo que si especificó así:
Li: primero de tipo (
…
}
Luego, se seleccionarán los primeros elementos de la lista en la etiqueta del cuerpo (es decir, en toda la página). Por lo tanto, en cualquier lista, el primer elemento tendrá un formato diferente.
Si escribes así:
#sidebar li:primero-de-tipo(
…
}
Luego, solo se seleccionarán los primeros elementos de las listas en la barra lateral, es decir, la columna lateral en nuestro sitio.
Usando los diversos selectores sobre los que escribí, puede llegar a casi cualquier elemento en una página web. En este artículo, puede leer más sobre cómo trabajar con la pseudoclase nth-child en css y le brinda opciones en términos de selección de elementos.
Por cierto, olvidé mencionar las pseudoclases opuestas: last-child (y last-of-type, respectivamente). Le permiten seleccionar el último elemento del contenedor principal.
¿Dónde se puede poner en práctica
Escribo sobre estas pseudoclases porque se usan mucho en el diseño css. Aquí tienes en la página, por ejemplo, un bloque de publicaciones similares, o comentarios, o algo más. Y tuviste una idea para decorar de alguna manera su primer elemento de una manera especial. O tal vez el último. Y sí, cualquiera puede.
Solo necesita averiguar el nombre del bloque en el que está almacenado el elemento deseado. Digamos que estamos tratando con discos populares. El contenedor principal tiene una clase popular. Entonces escribimos así:
Popular li:primero de tipo(
Acolchado superior: 20px
}
Todo, el primer elemento de la lista recibió una sangría desde arriba, y puede agregar lo que quiera a los estilos.
Aquí hay otro ejemplo. Solo tengo tres bloques grises idénticos en la etiqueta del cuerpo. Escribamos así.
Las pseudoclases se pueden utilizar para seleccionar un elemento específico de una lista. En este tutorial, hablaremos sobre la pseudoclase :nth-child, lo que puede crear con esta pseudoclase y cómo puede ser útil. La pseudoclase :nth-child le permite seleccionar un grupo de elementos con propiedades comunes. Se usa más comúnmente para seleccionar elementos pares o impares de un grupo. A menudo se usa para hacer que la mesa se vea como una cebra dando diferentes colores de fondo a las filas pares e impares.
Otra pseudoclase: nth-child le permite separar elementos con propiedad comun en grupos y luego seleccione un elemento específico de cada grupo usando la siguiente sintaxis:
Aquí a determina el número de elementos en el grupo, y b determina qué elemento del grupo será seleccionado.
si usar el valor 2n+1, luego los elementos se dividirán en grupos de dos, y se seleccionarán los primeros elementos de cada grupo, es decir, los elementos con un número ordinal impar. Si usas el valor 2n+2, entonces los elementos se dividirán nuevamente en grupos de dos, pero ahora se seleccionarán los segundos elementos de cada grupo, es decir, los elementos con un número de serie par.
Como ejemplo para entender la pseudoclase :nth-child, seleccionaremos cada cuarto elemento con ella, es decir, el cuarto, octavo, duodécimo, decimosexto, etc. Para ello, dividiremos los elementos en grupos de cuatro y luego seleccione cada cuarto elemento.
A continuación hay una lista de diez elementos, y usaremos las pseudoclases :nth-child, :first-child y :last-child para seleccionar los elementos que queremos resaltar.
Uso de la pseudoclase CSS:nth-child para seleccionar un solo elemento
Al configurar la pseudoclase :nth-child como un número, puede elegir a qué hijo del grupo se referirá:
Elemento 1
elemento 2
elemento 3
Elemento 4
Elemento 5
elemento 6
elemento 7
elemento 8
Elemento 9
elemento 10
Uso de la pseudoclase CSS:nth-child para seleccionar todos los elementos excepto los cinco primeros
Si establece la pseudoclase :nth-child en un valor de la forma n+ número, puede seleccionar todos los elementos, comenzando con el elemento con este número ordinal:
Elemento 1
elemento 2
elemento 3
Elemento 4
Elemento 5
elemento 6
elemento 7
elemento 8
Elemento 9
elemento 10
Uso de la pseudoclase CSS:nth-child para seleccionar solo los primeros cinco elementos
Cuando establecemos la pseudoclase :nth-child en un valor negativo n+ número, seleccionamos todos los elementos que están antes del elemento con este número ordinal:
Elemento 1
elemento 2
elemento 3
Elemento 4
Elemento 5
elemento 6
elemento 7
elemento 8
Elemento 9
elemento 10
Uso de la pseudoclase CSS:nth-child para seleccionar cada tercer elemento
La pseudoclase :nth-child se puede usar para seleccionar una secuencia de elementos especificando cuántos elementos hay en la secuencia y el número ordinal elemento deseado. Si establece el valor 3n+1, se seleccionará cada tercer elemento, comenzando por el primero:
Elemento 1
elemento 2
elemento 3
Elemento 4
Elemento 5
elemento 6
elemento 7
elemento 8
Elemento 9
elemento 10
Uso de la pseudoclase CSS:nth-child para seleccionar solo elementos impares
Puede establecer la pseudoclase :nth-child en impar para seleccionar todos los elementos con números ordinales impares. Es decir, los elementos primero, tercero, quinto, séptimo, noveno, etc. Esto es muy útil para establecer colores para filas de tablas adyacentes.
Elemento 1
elemento 2
elemento 3
Elemento 4
Elemento 5
elemento 6
elemento 7
elemento 8
Elemento 9
elemento 10
Uso de la pseudoclase CSS:nth-child para seleccionar solo elementos pares
Este ejemplo muestra lo mismo que el anterior, pero esta vez se seleccionan todos los elementos pares. Es decir, los elementos segundo, cuarto, sexto, octavo, décimo, etc.:
Elemento 1
elemento 2
elemento 3
Elemento 4
Elemento 5
elemento 6
elemento 7
elemento 8
Elemento 9
elemento 10
Uso de la pseudoclase CSS:first-child para seleccionar el primer elemento
Otra pseudo-clase: primer hijo seleccionará el primer elemento:
Elemento 1
elemento 2
elemento 3
Elemento 4
Elemento 5
elemento 6
elemento 7
elemento 8
Elemento 9
elemento 10
Uso de la pseudoclase CSS:last-child para seleccionar el último elemento
Además de la pseudoclase :first-child, hay una pseudoclase :last-child que seleccionará el último elemento de un grupo de elementos:
Elemento 1
elemento 2
elemento 3
Elemento 4
Elemento 5
elemento 6
elemento 7
elemento 8
Elemento 9
elemento 10
Uso de la pseudoclase CSS:nth-last-child para seleccionar el penúltimo elemento
También puede usar la pseudoclase :nth-last-child, que combina las características de las pseudoclases :last-child y :nth-child para comenzar a contar elementos desde el final. Es decir, puede seleccionar un elemento contando los números de serie del final del grupo, por ejemplo, en un grupo de diez elementos, puede seleccionar el segundo elemento del final:
Elemento 1
elemento 2
elemento 3
Elemento 4
Elemento 5
elemento 6
elemento 7
elemento 8
Elemento 9
elemento 10
Explore la pseudoclase :nth-child con el constructor nth-child.
A veces, al diseñar páginas, desea "automatizar" un poco los estilos CSS.
Uno de los problemas con los que te puedes encontrar es cómo seleccionar todos los elementos pares de una lista, tabla, bloque y otros elementos en una página web.
Por supuesto, puede asignar una cierta clase a cada elemento par, pero esto es bueno cuando no hay demasiados elementos. Agregar todo esto manualmente no siempre es posible y no siempre es deseable.
Me gustaría hablar de un método que se basa en el uso de una pseudoclase enésimo hijo.
Esta pseudoclase se introdujo en CSS3, así que tenga en cuenta que es posible que no funcione en navegadores más antiguos. Pero, las posibilidades que aparecen al usarlo son muy impresionantes.
Una forma de usar esta pseudoclase en la práctica es seleccionar todos los elementos pares que aparecen en el árbol de un documento HTML.
Hay varias opciones sobre cómo se puede implementar esto. Echemos un vistazo a ellos.
1 opción Usa el parámetro par.
Digamos que tenemos una lista como esta:
- Elemento 1
- elemento 2
- elemento 3
- Elemento 4
- Elemento 5
- elemento 6
- elemento 7
- elemento 8
- Elemento 9
- elemento 10
Para hacer que todos los elementos pares en esta lista sean rojos, debemos agregar algunos estilos CSS:
Ul li:nth-child(par) (color:#F00;)
Como resultado, aparecerá la siguiente imagen.
Even es una palabra clave que significa que se seleccionarán elementos pares.
Buena solución, ¿no? Solo una línea de estilos CSS.
Opcion 2. Utilice la opción 2n.
Esta opción se puede utilizar como alternativa. Un valor de 2n significa que se seleccionará cada segundo elemento y, de hecho, cada segundo elemento es par.
Así es como se puede usar para tablas.
| columna 1 | Columna 2&. t;td>6 |
| 7 | 7 |
| 8 | 8 |
| 9 | 9 |
Y estilos CSS
Tr:nth-child(2n) (color:#F00;)
El texto en cada elemento tr par se volvió rojo.
webgyry.info
Compatibilidad con navegador
| 12.0+ | 9.0+ | 3.5+ | 4.0+ | 9.6+ | 3.2+ |
Descripción
La pseudoclase :nth-child() selecciona elementos secundarios en función de su posición (número de serie) dentro del elemento principal.
Sintaxis
:nth-child(número) (propiedades)Un argumento se especifica entre paréntesis, que puede ser un número, una palabra clave o una expresión numérica en la forma an+b, donde a y b son números enteros, y n es un contador que automáticamente toma valores enteros no negativos de 0 y más: 0, 1, 2, 3, ... .
Usando un número, puede especificar un número ordinal específico del elemento secundario al que desea aplicar el estilo:
/* selecciona el tercer elemento de la lista */ ul li:nth-child(3) ( color: red; )
Hay dos palabras clave posibles en total: impar (impar) y par (par). Le permiten seleccionar elementos secundarios que tienen números ordinales pares o impares:
/* selecciona todas las filas impares de la tabla */ tr:nth-child(odd) td (background-color: silver; )
La parte "an" de la expresión calcula las posiciones de los elementos secundarios utilizando la siguiente fórmula: número*n, dado que n es un contador, los valores numéricos se sustituyen automáticamente durante el cálculo, comenzando desde 0 y luego el valor aumenta cada vez en uno más que el anterior: 0,1,2,3 etc. Digamos que necesitamos seleccionar cada tercer elemento en la lista, para esto necesitamos escribir solo 3n:
ul li:nth-child(3n) (color: rojo;)
3 * 0 = 0 - nada seleccionado
3 * 1 = 3er elemento
3 * 2 = 6to elemento
etc.
La parte "b" de la expresión le permite especificar desde qué posición debe comenzar la selección de elementos. Digamos que necesitamos seleccionar cada tercer elemento de la lista, comenzando desde el segundo elemento de la lista, para esto necesitamos escribir la siguiente expresión 3n + 2:
Ul li:nth-child(3n + 2) ( color: rojo; )
Por lo tanto, los elementos de la lista se seleccionarán de acuerdo con la siguiente fórmula:
(3 * 0) + 2 = 2do artículo
(3 * 1) + 2 = 5to elemento
(3 * 2) + 2 = 8vo elemento
etc.
Ejemplo:
| texto |
| texto |
| texto |
| texto |
| texto |
| texto |
| texto |
| texto |
| texto |
| texto |
El resultado de este ejemplo:
puzzleweb.ru
Compatibilidad con navegador
Selector: nth-child
es uno de los pocos selectores de CSS que es casi totalmente compatible con los navegadores modernos y no es compatible con IE, ni siquiera con IE8. Entonces, cuando se trata de usarlo, y el resultado final es una mejora progresiva, puede usarlo de manera segura para algunos elementos tipográficos, como colorear las filas de las tablas. Sin embargo, no debe usarse en casos más graves. Por ejemplo, confíe en él en el diseño del sitio o elimine el margen derecho de cada tercer bloque en una cuadrícula de tres por tres para que quepan en una fila.
La biblioteca jQuery puede servir aquí como rescate, ya que implementa la compatibilidad con todos los selectores de CSS, incluido :nth-child , incluso en Internet Explorer.
web-standards.com
Importancia y aplicación
pseudoclase :nth-child() le permite seleccionar elementos secundarios dentro del elemento principal según su ubicación (número de serie).
El uso de esta pseudoclase está muy extendido, le permite alternar estilos de fila en tablas, listas, diseñar una combinación de elementos secundarios, etc.
Sintaxis CSS:
:nth-child(número | palabra clave | fórmula)(bloque de anuncios;)ejemplo de uso
Diseño por número de serie
Veamos un ejemplo en el que tienes la tarea de cambiar el estilo de todos los elementos que están resaltados en naranja en la imagen:
¿Qué tienen en común los elementos resaltados en la imagen? Lo que tienen en común es que están resaltados en naranja. ¿Divertido? no pienses Todavía tienen algo en común, elementos
también se puede contar, y su número de serie será el tercero (el tercer hijo de su padre ). Para diseñar estos elementos, necesitamos usar una pseudo clase :nth-child.
Pasemos a un ejemplo:
El primer encabezado h2 de la etiqueta del cuerpo.
- uno
- dos
- tres
El segundo encabezado h2 de la etiqueta del cuerpo.
:nth-child diseñamos los elementos
Y
El resultado de nuestro ejemplo:
Estilo por palabra clave
Como un valor de pseudoclase :nth-child() puede ser no solo el número ordinal de elementos secundarios que deben diseñarse, sino también palabras clave que pueden definir un grupo completo de elementos. Se pueden utilizar dos valores como palabra clave:
- incluso (elementos pares)
- impar (elementos impares)
El estilo de los elementos mediante palabras clave tiene una aplicación muy amplia, ya que puede seleccionar y diseñar fácilmente elementos secundarios pares o impares en un documento.
Por ejemplo, creemos dos tablas simples con diferentes clases de estilo y visualicemos la diferencia al aplicar valores de palabras clave de pseudoclase. :nth-child para elemento HTML
| 1 línea | Posición | Cantidad |
|---|---|---|
| 2 linea | ||
| 3 linea | ||
| 4 líneas | ||
| linea 5 |
| 1 línea | Posición | Cantidad |
|---|---|---|
| 2 linea | ||
| 3 linea | ||
| 4 líneas | ||
| linea 5 |
En este ejemplo usando pseudo clase :nth-child() diseñamos incluso filas de la primera tabla (elementos
Estilo con una fórmula matemática simple
pseudoclase :nth-child() le permite seleccionar no solo elementos pares, impares o secundarios con un determinado número de serie, sino también elementos secundarios especificados por una fórmula matemática elemental. Echemos un vistazo al siguiente selector y veamos qué significa esta entrada:
td:nth-child(4n+2)- 4n- cada cuarto elemento.
- 2
En las fórmulas se permiten valores con signo de resta, pero esto no suele ser necesario:
td:nth-child(4n-1)( color de fondo: azul claro; /* establece el color de fondo */ )Este selector significa que cada cuarta celda de la tabla (
- 4n- cada cuarto elemento.
- -1 - con qué elemento empezar.
Veamos un ejemplo de uso:
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 2 | |||||||||||||
| 3 | |||||||||||||
| 4 |
En este ejemplo, utilizando la pseudoclase :nth-child, hemos seleccionado y aplicado estilo a cada cuarta celda de la tabla (
basicweb.ru
Cómo funciona el selector CSS de n-ésimo hijo
Hay un selector en CSS, más específicamente un pseudo-selector llamado nth-child. Un ejemplo de su uso:
Ul li:nth-child(3n+3) ( color: #ccc; )
El CSS anterior hace lo siguiente: aplica un estilo a cada tercer elemento de una lista desordenada. Es decir, el 3, 6, 9, 12, etc. pero como funciona? Además, ¿cuál es el beneficio de usar nth-child?
El significado principal está en la expresión entre paréntesis. nth-child acepta dos palabras clave: incluso(incluso) y extraño(extraño). Su significado es absolutamente claro. Even selecciona elementos pares (2, 4, 6), impar selecciona elementos impares (1, 3, 5).
Como se muestra en el ejemplo anterior, nth-child puede procesar expresiones. ¿Cuál es la expresión más simple posible? Solo un número. Si escribe cualquier número entre paréntesis, se seleccionará un solo elemento. Por ejemplo, seleccionemos el quinto elemento de la lista:
Ul li:nth-child(5) ( color: #ccc; )
Volvamos a nuestro primer ejemplo donde usamos la expresión (3n+3). ¿Cómo trabaja? ¿Por qué selecciona cada tercer elemento? Todo el punto está en la variable n. Acepta valores enteros desde cero o más. Miremos más de cerca:
(3 x 0) + 3 = 3 = 3.er elemento (3 x 1) + 3 = 6 = 6.º elemento (3 x 2) + 3 = 9 = 9.º elemento, etc.
Ahora probemos la siguiente expresión: nth-child(2n+1) :
(2 x 0) + 1 = 1 = 1er elemento (2 x 1) + 1 = 3 = 3er elemento (2 x 2) + 1 = 5 = 5to elemento, etc.
Como resultado, obtuvimos lo mismo que en el caso de impar, por lo que no es necesario usar esa expresión con frecuencia. Además, nuestro primer ejemplo también se puede simplificar y usar en lugar de la expresión original (3n+3), expresión (3n):
(3 x 0) + 0 = 0 = sin coincidencia (3 x 1) + 0 = 3 = 3er elemento (3 x 2) + 0 = 6 = 6to elemento, etc.
Como puede ver, el resultado es el mismo, pero no necesita escribir "+3". También podemos usar valores negativos en una expresión. Por ejemplo, 4n-1:
(4 x 0) - 1 = -1 = sin coincidencia (4 x 1) - 1 = 3 = 3er elemento (4 x 2) - 1 = 7 = 7mo elemento etc.
El uso de valores negativos para el coeficiente de n parece un poco extraño, porque en el caso de un resultado negativo, no se encontrará una coincidencia. Deberá cambiar constantemente la expresión para agregar elementos positivos. Al final resultó que, este enfoque es muy conveniente para seleccionar los primeros n elementos. Considere el ejemplo con "-n+3":
0 + 3 = 3 = 3er elemento -1 + 3 = 2 = 2do elemento -2 + 3 = 1 = 1er elemento -3 + 3 = 0 = sin coincidencia
Compatibilidad entre navegadores
nth-child es uno de esos desafortunados atributos que es completamente compatible con todos los navegadores, a excepción del cero absoluto en IE, incluso la versión 8. Por tanto, a la hora de utilizarlo, si el resultado esperado es algún tipo de efecto visual (por ejemplo, colorear las filas de una determinada tabla), entonces este es el enfoque ideal. Pero, probablemente, no deberías usarlo para algo más importante, que puede afectar, por ejemplo, el diseño correcto.
Por supuesto, si está utilizando jQuery, entonces no necesita preocuparse por esto, ya que jQuery incluso funciona en Internet Explorer.
Y finalmente
Puede jugar con diferentes expresiones de selector en la página de ejemplo.
www.css-tricks.ru
Valores
| Significado | Descripción |
|---|---|
| Número | Un número positivo a partir de 1. Especifica el número del elemento al que queremos acceder. La numeración de elementos comienza desde 1. |
| extraño | elementos extraños. |
| incluso | Incluso elementos. |
| Expresión | Puede hacer expresiones especiales con la letra n, que representa todos los números enteros de cero (¡no uno!) hasta el infinito. Entonces, 2n significa todos los números pares (a partir del segundo). ¿Cómo entenderlo? Sustituimos sucesivamente en n números desde 0 y así sucesivamente: si n = 0, entonces 2n dará 0 - no existe tal elemento ( numeración de elementos desde 1!), si n = 1, entonces 2n da 2 - el segundo elemento, si n = 2, 2n da 4 - el cuarto elemento. Si escribe 3n, será cada tercer elemento (¡a partir del tercero!), y así sucesivamente. |
Ejemplos
Ejemplo
En este ejemplo, haremos rojo el li que es cuarto descendiente su padre (cuarto interior ol):
Resultado de la ejecución del código:
Ejemplo
Ahora hagamos que todo sea rojo. incluso li:
Resultado de la ejecución del código:
Ejemplo
Ahora hagamos que todo sea rojo. extraño li:
Resultado de la ejecución del código:
Ejemplo
Hagámoslo rojo cada tercio li (a partir de la tercera):
Resultado de la ejecución del código:
Ejemplo
Puede especificar un rango de elementos en un selector. Supongamos que tiene una lista de 20 elementos y desea seleccionar los elementos del 7 al 14 inclusive. Se puede hacer así:
Resultado de la ejecución del código:
codigo.mu
Sintaxis
La pseudoclase nth-child se especifica con un solo argumento, que representa el patrón para los elementos coincidentes.
Valores de palabras clave
impar Representa elementos cuya posición numérica en una serie de hermanos es impar: 1, 3, 5, etc. par Representa elementos cuya posición numérica en una serie de hermanos es par: 2, 4, 6, etc.notación funcional
sintaxis formal
:nth-child(dónde
dónde
dónde
dónde
Existe tal selector, más específicamente una pseudoclase, llamada :nth-child . Aquí hay un ejemplo de su uso:
UL LI:nth-child(3n+3) ( color:#CCC; )
¿Qué hace el CSS anterior? Selecciona cada tercer elemento dentro de la lista con viñetas: es el 3, 6, 9, 12, etc. Veamos exactamente cómo funciona esta expresión y qué más se puede hacer con :nth-child .
Todo depende de lo que esté entre paréntesis. El selector :nth-child acepta dos palabras clave: par e impar. Aquí es simple: even selecciona elementos pares como 2nd, 4th, 6th, etc., y odd selecciona elementos impares, como 1st, 3rd, 5th, etc. d.
Como puede ver en el primer ejemplo, :nth-child también acepta expresiones como parámetro. Incluyendo las ecuaciones más simples, en otras palabras, solo números. Si los pones entre paréntesis, solo se seleccionará un elemento con el número correspondiente. Por ejemplo, aquí se explica cómo seleccionar solo el quinto elemento:
UL LI:nth-child(5) ( color:#CCC; )
Sin embargo, volvamos a 3n+3 del primer ejemplo. ¿Cómo funciona y por qué se selecciona cada tercer elemento? Todo el truco está en entender la variable n y la ecuación algebraica reducida. Piense en n como un conjunto de enteros de base cero. Luego completa la ecuación. Entonces 3n es 3×n, y la ecuación completa es (3×n)+3. Ahora, sustituyendo números mayores o iguales a cero en lugar de n, obtenemos:
- (3 × 0) + 3 = 3 = 3er elemento
- (3 × 1) + 3 = 6 = 6to elemento
- (3 × 2) + 3 = 9 = 9º elemento, etc.
¿Qué pasa con: nth-child (2n + 1)?
- (2 × 0) + 1 = 1 = 1er elemento
- (2×1) + 1 = 3 = 3er elemento
- (2 × 2) + 1 = 5 = 5to elemento, etc.
¡Sí, para! Es lo mismo que impar. Entonces, ¿quizás no deberías usar esta expresión? Pero, ¿no estamos complicando demasiado nuestro primer ejemplo en este caso? ¿Qué pasa si en lugar de 3n+3 escribimos 3n+0 o incluso 3n más simple?
- (3 × 0) = 0 = nada
- (3 × 1) = 3 = 3er elemento
- (3 × 2) = 6 = 6to elemento
- (3 × 3) = 9 = 9º elemento, etc.
Entonces, como puede ver, el resultado es el mismo, lo que significa que no hay necesidad de +3. Podemos usar valores negativos de n tan bien como la resta en las ecuaciones. Por ejemplo, 4n-1:
- (4 × 0) - 1 = -1 = nada
- (4 × 1) - 1 = 3 = 3er elemento
- (4 × 2) - 1 = 7 = 7º elemento, etc.
Usar -n puede parecer extraño, porque si el resultado final es negativo, ningún elemento entrará en la selección. Pero si complementa la ecuación y vuelve a hacer que el resultado sea positivo, la muestra resultará bastante interesante: con ella puede obtener los primeros n elementos, por ejemplo, así: -n + 3:
- –0 + 3 = 3 = 3er elemento
- –1 + 3 = 2 = 2do elemento
- -2 + 3 = 1 = 1er elemento
- -3 + 3 = 0 = nada, etc.
SitePoint tiene una buena guía con un bonito letrero, que publicaré descaradamente aquí:
| norte | 2n+1 | 4n+1 | 4n+4 | 4n | 5n-2 | -n+3 |
|---|---|---|---|---|---|---|
| 0 | 1 | 1 | 4 | – | – | 3 |
| 1 | 3 | 5 | 8 | 4 | 3 | 2 |
| 2 | 5 | 9 | 12 | 8 | 8 | 1 |
| 3 | 7 | 13 | 16 | 12 | 13 | – |
| 4 | 9 | 17 | 20 | 16 | 18 | – |
| 5 | 11 | 21 | 24 | 20 | 23 | – |
Compatibilidad con navegador
El selector :nth-child es uno de los pocos selectores de CSS que se admite casi por completo en los navegadores modernos y no se admite en IE, ni siquiera en IE8. Entonces, cuando se trata de usarlo, y el resultado final es una mejora progresiva, puede usarlo de manera segura para algunos elementos tipográficos, como colorear las filas de las tablas. Sin embargo, no debe usarse en casos más graves. Por ejemplo, confíe en él en el diseño del sitio o elimine el margen derecho de cada tercer bloque en una cuadrícula de tres por tres para que quepan en una fila.
Descripción
La pseudoclase :nth-child se usa para agregar estilo a los elementos en función de la numeración en el árbol de elementos.
Sintaxis
elemento:nth-child(impar | par |<число> | <выражение>) {...}
Valores
impar Todos los números de elementos impares. even Todos los números de elementos pares. número El número ordinal del hijo relativo a su padre. La numeración parte del 1, que será el primer elemento de la lista. expresión Especificada como an+b , donde a y b son números enteros y n es un contador que toma automáticamente el valor 0, 1, 2...Si a es cero, entonces no se escribe y la notación se reduce a b. Si b es cero, también se omite y la expresión se escribe en la forma an . a y b pueden ser números negativos, en este caso el signo más se cambia a menos, por ejemplo: 5n-1.
Al usar valores negativos para a y b, algunos resultados también pueden ser negativos o cero. Sin embargo, los elementos solo se ven afectados por valores positivos debido a que la numeración de elementos comienza desde 1.
En mesa. 1 muestra algunas posibles expresiones y palabras clave, y también indica qué números de artículo estarán involucrados.
HTML5 CSS3 IE Cr Op Sa Fx
| 2134 | 2135 | 2136 | 2137 | 2138 | |
| Aceite | 16 | 34 | 62 | 74 | 57 |
| Oro | 4 | 69 | 72 | 56 | 47 |
| Árbol | 7 | 73 | 79 | 34 | 86 |
| piedras | 23 | 34 | 88 | 53 | 103 |
En este ejemplo, la pseudoclase :nth-child se usa para cambiar el estilo de la primera fila de la tabla, así como para colorear todas las filas pares (Figura 1).