:not(:first-child) y :not(:first-of-type) no funcionan

3 minutos de lectura

Tengo una especie de sistema de árbol. Lo que intento hacer es dar un margen a todos los padres excepto al primero. Este es mi HTML:

<div id="someDivID">
    <div class="theBody">
        <div class="someContainer">
            <div id="someItem" class="someItemClass">
                Test
            </div>
        </div>
        <div class="someContainer">
            <div id="someItem2" class="someItemClass">
                Test2
            </div>
        </div>
    </div>
</div>

Y mi CSS:

#someDivID
{
    width: 400px;
}

#someItem,
#someItem2
{
    border: 1px solid #000;
    padding: 1px;
    margin-bottom: 2px;
    clear: both;
    overflow: auto;
}

.someItemClass
{
    background-color: #0077FF;
}

.someItemClass:not(:first-of-type)
{
    margin-top: 50px;
}

Ahora mi .someContainer tiene el color de fondo pero el segundo .someContainer no tiene un margen superior. Si elimino el :first-of-type funciona. :first-child tampoco funciona

Aquí está mi jsfiddles:

Con first-of-type: http://jsfiddle.net/JoshB1997/zsu2o3cg/

Con first-child: http://jsfiddle.net/JoshB1997/zsu2o3cg/1/

avatar de usuario
Eduardo

Eso es porque no son hermanos.

Si cambia el selector :not al div principal, funcionará.

.someContainer:not(:first-of-type)
{
    margin-top: 50px;
}
#someDivID
{
    width: 400px;
}

#someItem,
#someItem2
{
    border: 1px solid #000;
    padding: 1px;
    margin-bottom: 2px;
    clear: both;
    overflow: auto;
}

.someContainer
{
    background-color: #0077FF;
}

.someContainer:not(:first-of-type)
{
    margin-top: 50px;
}
<div id="someDivID">
    <div class="theBody">
        <div class="someContainer">
            <div id="someItem" class="someItemClass">
                Test
            </div>
        </div>
        <div class="someContainer">
            <div id="someItem2" class="someItemClass">
                Test2
            </div>
        </div>
    </div>
</div>

  • Es bueno, funciona en mi código de ejemplo. Pero mi código principal es mucho más complejo y simplemente no funciona. Probaré algunas cosas, pero esto ciertamente ayuda. Gracias por la ayuda. – Edit: ¡ahora funciona correctamente!

    – Josué Bakker

    1 de diciembre de 2015 a las 10:52


Como sugirió Edd arriba de mí, no son hermanos, por lo que debe cambiar su selector al padre (.someContainer).

Pero también sugeriría otro enfoque, el enfoque “positivo”: configure el primer elemento secundario de un selector para que no tenga las propiedades deseadas y todo lo demás para tenerlo

.someContainer:first-child {
    margin-top: 0
} 

.someContainer {
   margin-top: 50px
}

adjunto Lápiz

  • Estoy de acuerdo con tu enfoque, que es más simple. Aunque personalmente preferiría establecer primero las propiedades generales ENTONCES anularlas con las más específicas (por ejemplo, el primer hijo). Aunque el código anterior funciona debido a la especificidad de CSS, la anulación de estilos es la naturaleza de CSS (es decir, se aplica el último de múltiples selectores iguales, no el primero).

    – aldos

    23 de septiembre de 2021 a las 17:24

  • En algunos casos, esta puede ser una solución más limpia. Sin embargo, en otros casos, también puede causar más complejidad y más dificultad para mantener el CSS. Un ejemplo es si el margen debe coincidir con otros elementos, que pueden no ser siempre “0px”. Primero puede que necesite encontrar ese valor. Más importante aún, no importa el valor, si luego se cambia, ahora debe recordar cambiarlo aquí también. Una modificación a su código que puede mantener esos valores sincronizados (dependiendo de la estructura) es usar en su lugar margin: revert;. También prefiero la sugerencia de @alds de poner la excepción en segundo lugar.

    – SherylHohman

    14 de enero a las 15:21


¿Ha sido útil esta solución?