html - tbody - nth-first-of-type(2)

Diferencia entre div ~ div y div: not(: first-of-type)?

Question

¿Hay alguna diferencia entre div~div y div:not(:first-of-type) ? Aparte de IE6 cualesquiera que sean los errores, ¿hay casos en que harían cosas diferentes?

Answer 1

En términos de elementos coincidentes, no hay diferencia. Cualquier div que siga a algún otro div dentro del mismo padre es, por necesidad, no el primer elemento del tipo div dentro de su padre.

Si el selector de hermanos fuera + y no ~ , entonces div+div tiene la condición añadida de que el siguiente elemento debe aparecer inmediatamente después del elemento anterior. Este no es el caso con ~ - cualquier cantidad de hermanos de cualquier otro tipo puede aparecer entre los dos.

Si la pseudoclase fuera :first-child y no :first-of-type , entonces div:not(:first-child) aún coincidirá con div:first-of-type si la primera div dentro de su matriz no es la primera niño.

Aquí hay una ilustración:

<section>
    <div></div> <!-- div:first-child or div:first-of-type -->
    <div></div> <!-- div+div or div~div or div:nth-of-type(2) -->
    <p></p>
    <div></div> <!-- div+p+div or div~div or div:nth-of-type(3),
                     but not div+div -->
</section>
<section>
    <h1></h1>   <!-- h1:first-child -->
    <div></div> <!-- div:first-of-type or div:nth-child(2) -->
    <div></div> <!-- div~div or div:nth-of-type(2) or div:nth-child(3) -->
</section>

En términos de especificidad , hay una diferencia. Si tiene reglas CSS con ambos selectores que coinciden con los mismos elementos, entonces div:not(:first-of-type) tendrá prioridad debido a :first-of-type pseudo-class. Observe que el :not() sí mismo no se cuenta, solo se considera su argumento.

Aquí hay otra ilustración:

div {
    float: left;
    width: 50px;
    height: 50px;
    margin: 5px;
    border: 1px solid red;
}

/* 1 pseudo-class, 1 type -> specificity = 0-1-1 */
div:not(:first-of-type) {
    border-color: green;
}

/* 2 types                -> specificity = 0-0-2 */
div ~ div {
    border-color: blue;
}

<section>
    <div></div>
    <div></div>
    <div></div>
</section>