La diferencia entre: nth-child y: nth-of-type | Programar Plus

Asumamos este HTML:

<section>
   <p>Little</p>
   <p>Piggy</p>    <!-- We want this one -->
</section>

Estos harán exactamente lo mismo:

p:nth-child(2) { color: red; }
p:nth-of-type(2) { color: red; }

Sin embargo, hay una diferencia, por supuesto.

Nuestra :nth-child selector de arriba, en “lenguaje sencillo”, significa seleccionar un elemento si:

  1. Es un elemento de párrafo
  2. Es el segundo hijo de un padre

Nuestra :nth-of-type selector, en “Plain English”, significa:

  1. Seleccione el segundo párrafo secundario de un padre

:nth-of-type es … cuál es una buena manera de decirlo … menos condicional.

Digamos que nuestro marcado cambió a esto:

<section>
   <h1>Words</h1>
   <p>Little</p>
   <p>Piggy</p>    <!-- We want this one -->
</section>

Esto rompe:

p:nth-child(2) { color: red; } /* Now incorrect */

Esto todavía funciona:

p:nth-of-type(2) { color: red; } /* Still works */

Por “descansos”, me refiero a que :nth-child El selector de arriba ahora selecciona la palabra “Little” en lugar de “Piggy” porque ese elemento cumple tanto 1) es el segundo hijo como 2) es un elemento de párrafo. Por “todavía funciona”, me refiero a que “Piggy” todavía está seleccionado porque es el segundo párrafo debajo de ese elemento principal.

Si tuviéramos que agregar un <h2> después <h1>, el selector: nth-child no seleccionaría nada en absoluto, porque ahora el segundo hijo ya no es un párrafo, por lo que el selector no encuentra nada. El :nth-of-type de nuevo todavía funciona.

me siento como :nth-of-type es menos frágil y más útil en general, a pesar de :nth-child siendo más común (en mis ojos). ¿Con qué frecuencia piensa “Quiero seleccionar el segundo hijo de un padre si resulta que es un párrafo”? Posiblemente a veces, pero lo más probable es que desee “seleccionar el segundo párrafo” o “seleccionar cada tercera fila de la tabla”, que son casos en los que :nth-of-type es (de nuevo, en mi opinión) una opción más fuerte.

Encuentro la mayor parte de mi “mierda, ¿por qué no funciona esto: selector de n-ésimo hijo?” Los momentos son porque resulta que he calificado el selector con etiqueta y ese número hijo no es realmente esa etiqueta. Entonces, al usar :nth-child, Creo que es mejor especificar el padre y dejar :nth-child sin etiqueta.

dl :nth-child(2) {  } /* is better than */
dd:nth-child(2) {  } /* this */

Pero, por supuesto, todo depende de la situación exacta.

Soporte del navegador para :nth-of-type es bastante decente… Firefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3.1+, IE 9+.

Yo diría que si necesita un soporte más profundo, jQuery lo respaldaría (use el selector allí, aplique una clase y estilo con esa clase), pero de hecho jQuery eliminó el soporte para: nth-of-type. Me parece raro. Escuché que fue por poco uso. Si desea seguir esa ruta, aquí hay un complemento para recuperarlos. jQuery 1.9 ahora es compatible :nth-of-type de nuevo (de vuelta a IE 6), por lo que es una opción.

Relacionado: no te olvides de los primos increíbles :first-of-type, :last-of-type, :nth-last-of-type y :only-of-type. Aprende más aquí.

Si quieres jugar con un ejemplo visual, ¡echa un vistazo a esta herramienta!