nth-of-type vs nth-child

Estoy un poco confundido acerca de la pseudoclase n-ésima de tipo, y cómo se supone que funciona, especialmente en comparación con la clase n-ésima.

Tal vez tengo una idea equivocada, pero dada esta estructura

A
B
1
2
3

..el tercer elemento secundario (primero con la etiqueta de clase) debería (¿quizás?) ser seleccionable con

 .row .label:nth-of-type(1) { /* some rules */ } 

Sin embargo, al menos en Chrome aquí, no lo selecciona. Parece que solo funciona si es el primer hijo de la fila, que es lo mismo que enésimo hijo; por lo tanto, ¿cuál es la diferencia entre este y el n-ésimo tipo?

La nth-child refiere al “N-ésimo elemento secundario coincidente”, lo que significa que tiene una estructura de la siguiente manera:

 

Hello

Paragraph

Target

Entonces p:nth-child(2) seleccionará el segundo hijo, que también es ap (es decir, el p con “Párrafo”).
p:nth-of-type seleccionará el segundo elemento p coincidente (a saber, nuestro objective p ).

Aquí hay un excelente artículo sobre el tema de Chris Coyier @ CSS-Tricks.com


El motivo por el que se rompe es porque el tipo se refiere al tipo de elemento (es decir, div ), pero el primer div no coincide con las reglas que mencionaste ( .row .label ), por lo tanto, la regla no se aplica.

La razón es que CSS se analiza de derecha a izquierda , lo que significa que el navegador primero busca en :nth-of-type(1) , determina que busca un elemento de tipo div , que también es el primero de su tipo, que coincide con el elemento .row y el primer elemento .icon . Luego se lee que el elemento debe tener la clase .label , que no coincide con nada de lo anterior.

Si desea seleccionar el primer elemento de etiqueta, deberá envolver todas las tags en su propio contenedor o simplemente utilizar el tipo nth-of-type(3) (suponiendo que siempre habrá 2 icons).

Otra opción sería (lamentablemente) usar … esperar … jQuery:

 $(function () { $('.row .label:first') .css({ backgroundColor:"blue" }); }); 
 .label:nth-of-type(1) 

“tipo” aquí se refiere al tipo de elemento. En este caso, div , no a la clase. Esto no significa el primer elemento que es .label , sino el primer elemento de su tipo que también tiene una clase de label .

No hay elementos con una clase de label que estén en el índice 1 de su tipo.

enter image description here

en la imagen de los 10 elementos añadidos, 8 son

y 2 son , los dos elementos de la parte sombreada indican restantes 8 son

el CSS para la página va aquí:

    

la primera bombilla verde indica

  section p:nth-child(1) { background-color: green; /*first-child of p in the flow*/ } 

y la segunda bombilla roja en el código no funciona porque no estoy primeros elementos en el flujo

 section i:nth-child(1) { background-color: red; /*[first-child of i in the flow]NO */ } 

y el bulbo azul en la imagen indica el primer tipo de yo en el flujo

 section i:nth-of-type(1) { background-color: blue; /*the type i of first child in the flow*/ } 

Aquí hay un ejemplo:

 
0
1
2
3
4
5

este selector: div div:nth-child(1) seleccionará el primer hijo del div pero con otra condición que el hijo debe ser un div. aquí el primer hijo es un

0

pero si el primer hijo era un párrafo p :

0

este selector no afectará a la página porque no hay primer div hijo el primer hijo es p .

pero este selector: div div:nth-of-type(1) si el primer hijo era un

0

lo afectará, pero si el primer hijo es

0

ahora lo hará afectar al segundo hijo

1

porque es el primer hijo de su tipo div .

:nth-of-type se usa para seleccionar un hermano de un tipo particular. Por tipo me refiero a un tipo de etiqueta como en

  • , ,

    etc.

    :nth-child se usa para seleccionar hijos de una etiqueta padre particular sin tener en cuenta un tipo

    Ejemplo de :nth-of-type

    HMTL:

      
    • Item 1
    • Item 2
    • Item 3
    • Item 4
    • Item 5
    • Item 6
    • Item 7
    • Item 8
    • Item 9
    • Item 10
    • Item 11
    • Item 12
    • Item 13
    • Item 14
    • Item 15
    • Item 16

    CSS:

    Observe que no hay espacio entre la etiqueta

  • y la pseudo-class nth-of-type .

    li:nth-of-type(odd) { background-color: #ccc; }

    Resultado: https://jsfiddle.net/79t7y24x/

    Ejemplo de :nth-child

    HTML:

      
    • Item 1
    • Item 2
    • Item 3
    • Item 4
    • Item 5
    • Item 6
    • Item 7
    • Item 8
    • Item 9
    • Item 10
    • Item 11
    • Item 12
    • Item 13
    • Item 14
    • Item 15
    • Item 16

    CSS:

    Observe aquí que hay un espacio entre la etiqueta

      y la pseudo-clase :nth-child

      ul :nth-child(even) { background-color: red }

      Resultado: https://jsfiddle.net/o3v63uo7/

      Heres es un ejemplo simple que muestra la diferencia entre nth-child vs nth-of-type.

      Considere el siguiente html

       

      I am first

      I am secong

      I am 3rd

      Usando nth-of-child

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

      El fondo rojo se aplicará al segundo elemento p dentro de div.

      Esto sucede porque nth-of-child básicamente significa encontrar nth p tag (en este caso, 2da etiqueta p) dentro de un contenedor

      Usando nth-child

       p:nth-child(2){ background:red; } 

      Aquí no se aplica css.

      Esto sucede porque nth-child básicamente significa encontrar n-ésima etiqueta dentro de un contenedor (en este caso, la segunda etiqueta es div) y comprobar si se trata de una etiqueta p

       element:nth-of-type(p) //p=integer , basically return the DOM Element with respect of body. Let us understand this with an example     

      This is paragraph in first div

      This is a paragraph

      This is paragraph in second div

      • First Item
      • Second Item
      **This above html will look like this.**

      enter image description here

       Now suppose We have to style Second Item in UnOrderd list. In this case we can use nth-of-type(index) selector wrt DOM body. we can achieve styling like this  explanation : div:nth-of-type(2) by this we are trying to tell find the second div in html body,after that we have second div accessible ,now we can dig inside div using same nth-of-type selector,next we are using li:nth-of-type(2) so now we can find second list inside second div and styling it . Final Code :      

      This is paragraph in first div

      This is a paragraph

      This is paragraph in second div

      • First Item
      • Second Item
      **And Final output will look like this**

      enter image description here