enésimo de tipo vs enésimo hijo
Estoy un poco confundido acerca de la nth-of-typepseudoclase y cómo se supone que funciona, especialmente en comparación con la nth-childclase.
Tal vez tenga 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 (el primero con etiqueta de clase) debería (¿quizás?) poder seleccionarse con
.row .label:nth-of-type(1) {
/* some rules */
}
Sin embargo, al menos aquí en Chrome, no lo selecciona. Solo parece funcionar si es el primer hijo de la fila, que es lo mismo que nth-child; por lo tanto, ¿cuál es la diferencia entre this y nth-of-type?
La nth-childpseudoclase se refiere al "enésimo elemento secundario coincidente", es decir, si tiene una estructura como la siguiente:
<div>
<h1>Hello</h1>
<p>Paragraph</p>
<p>Target</p>
</div>
Luego p:nth-child(2)seleccionará el segundo hijo que también es ap (es decir, el que ptiene "Párrafo").
p:nth-of-typeseleccionará el segundo elemento coincidentep (es decir, nuestro Objetivo p).
Aquí hay un gran artículo sobre el tema de Chris Coyier @ CSS-Tricks.com
La razón por la que el tuyo se rompe es porque 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 mira el :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 .rowelemento, y el primer .iconelemento. Luego se lee que el elemento debe tener la .labelclase, 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 usarlas nth-of-type(3)(asumiendo que siempre habrá 2 íconos).
Otra opción sería (lamentablemente) usar... espéralo... jQuery:
$(function () {
$('.row .label:first')
.css({
backgroundColor:"blue"
});
});
en la imagen, de los 10 elementos agregados, 8 son <p>y 2 son <i>, los dos elementos de la parte sombreada indican que <i>los ocho restantes son<p>
El CSS de 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 soy el primer elemento del flujo
section i:nth-child(1) {
background-color: red; /*[first-child of i in the flow]NO */
}
y la bombilla azul en la imagen indica el primer tipo de i en el flujo
section i:nth-of-type(1) {
background-color: blue; /*the type i of first child in the flow*/
}
.label:nth-of-type(1)
"tipo" aquí se refiere al tipo de elemento. En este caso, divno a la clase. Esto no significa el primer elemento que es .label, sino que significa el primer elemento de su tipo que también tiene una clase de label.
No hay elementos con una clase que labelesté en el índice 1de su tipo.
Aquí hay un ejemplo simple que muestra la diferencia entre enésimo hijo y enésimo tipo.
Considere el siguiente html
<div>
<p>I am first</p>
<div>I am secong</div>
<p>I am 3rd</p>
</div>
Usando el enésimo niño
p:nth-of-child(2){
background:red;
}
El fondo rojo se aplicará al segundo elemento p dentro del div.
Esto sucede porque la enésima etiqueta del niño básicamente significa encontrar la enésima etiqueta p (en este caso, la segunda etiqueta p) dentro de un contenedor.
Usando enésimo niño
p:nth-child(2){
background:red;
}
Aquí no se aplica CSS.
Esto sucede porque nth-child básicamente significa encontrar la enésima etiqueta dentro de un contenedor (en este caso, la segunda etiqueta es div) y verificar si es la etiqueta p
