css - and - nth-of-type vs nth-child

css selector

Question

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

<div class="row">
    <div class="icon">A</div>
    <div class="icon">B</div>
    <div class="label">1</div>
    <div class="label">2</div>
    <div class="label">3</div>
</div>

..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?

Answer 1

Aquí hay un ejemplo:

<div>
    <div >0</div>
    <div >1</div>
    <div >2</div>
    <div >3</div>
    <div >4</div>
    <div >5</div>
</div>

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 <div>0</div> pero si el primer hijo era un párrafo p : <p>0</p> 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 <div>0</div> lo afectará, pero si el primer hijo es <p>0</p> ahora lo hará afectar al segundo hijo <div>1</div> porque es el primer hijo de su tipo div .

Answer 2

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

Considere el siguiente html

<div>
<p>I am first</p>
<div>I am secong</div>
<p>I am 3rd</p>
</div>

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

Answer 3

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

<div>
    <h1>Hello</h1>

    <p>Paragraph</p>

    <p>Target</p>
</div>

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 objetivo 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 etiquetas en su propio contenedor o simplemente utilizar el tipo nth-of-type(3) (suponiendo que siempre habrá 2 iconos).

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

$(function () {
    $(''.row .label:first'')
        .css({
            backgroundColor:"blue"
        });
});

Answer 4

:nth-of-type se usa para seleccionar un hermano de un tipo particular. Por tipo me refiero a un tipo de etiqueta como en <li> , <img> , <div> 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:

  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
    <li>Item 13</li>
    <li>Item 14</li>
    <li>Item 15</li>
    <li>Item 16</li>
  </ul>

CSS:

Observe que no hay espacio entre la etiqueta <li> 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:

  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
    <li>Item 13</li>
    <li>Item 14</li>
    <li>Item 15</li>
    <li>Item 16</li>
  </ul>

CSS:

Observe aquí que hay un espacio entre la etiqueta <ul> y la pseudo-clase :nth-child

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

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

Answer 5

en la imagen de los 10 elementos añadidos, 8 son <p> y 2 son <i> , los dos elementos de la parte sombreada indican <i> restantes 8 son <p>

el CSS para la página va aquí:

<style>
    * {
        padding: 0;
        margin:0;
    }
    section p {
        width: 20px;
        height: 20px;
        border:solid 1px black;
        border-radius: 15px;
        margin:20px;
        float: left;
    }
    section i {
        width: 20px;
        height: 20px;
        border:solid 1px black;
        border-radius: 15px;
        margin:20px;
        float: left;
    }
   section p:nth-child(1) {
        background-color: green; /*first-child of p in the flow*/
    }
   section i:nth-child(1) {
        background-color: red;  /*[first-child of i in the flow]NO */
    }
   section i:nth-of-type(1) {
        background-color: blue;  /*the type i of first child in the flow*/
    }
    </style>

</head>

<body>

    <section>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <i></i>
        <p></p>
        <i></i>
        <p></p>
        <p></p>
        <p></p>
    </section>
</body>

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*/
        }

Answer 6

.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.

Answer 7

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



     <html>
        <head>
        </head>
        <body>
          <div>
            <p> This is paragraph in first div</p>
           <input type="text" placeholder="Enter something"/>
            <p>This is a paragraph </p>
          </div>
          <div>
            <p>This is paragraph in second div</p>
            <ul>
            <li>First Item</li>
            <li>Second Item</li>
            <li>
             <label> This is label <strong>inside Unordered List</strong></label>
            </li>

          </ul>

           </div>
        </body>
    </html>


**This above html will look like this.**

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

<style type="text/css">
                div:nth-of-type(2) li:nth-of-type(2){
                    color: red;
                    font-weight: bold;
                }
            </style>

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 :



     <html>
            <head>
                <style type="text/css">
                    div:nth-of-type(2) li:nth-of-type(2){
                        color: red;
                        font-weight: bold;
                    }
                </style>
            </head>
            <body>
              <div>
                <p> This is paragraph in first div</p>
               <input type="text" placeholder="Enter something"/>
                <p>This is a paragraph </p>
              </div>
              <div>
                <p>This is paragraph in second div</p>
                <ul>
                <li>First Item</li>
                <li>Second Item</li>
                <li>
                 <label> This is label <strong>inside Unordered List</strong></label>
                </li>

              </ul>

               </div>
            </body>
        </html>

**And Final output will look like this**