html title - ¿Cómo puedo usar un selector no:primer hijo?




attribute tags (6)

Tengo una etiqueta div contiene varias etiquetas ul .

Si intento establecer las propiedades CSS solo para la primera etiqueta ul , y este código funciona:

div ul:first-child {
    background-color: #900;
}

Cuando quiero establecer las propiedades CSS para cada etiqueta ul excepto la primera, intenté esto:

div ul:not:first-child {
    background-color: #900;
}

también esto:

div ul:not(:first-child) {
    background-color: #900;
}

y esto:

div ul:first-child:after {
    background-color: #900;
}

Pero sin efecto. ¿Cómo debo escribir en CSS: "cada elemento, excepto el primero"?


Answers

Esta solución CSS2 ("cualquier ul después de otra ul ") también funciona y es compatible con más navegadores.

div ul + ul {
  background-color: #900;
}

A diferencia de :not y :nth-sibling , IE7 + admite el selector de hermanos adyacente .

Si tiene JavaScript cambia estas propiedades después de que se cargue la página, debería observar algunos errores conocidos en las implementaciones de IE7 e IE8 de esto. Vea este enlace .

Para cualquier página web estática, esto debería funcionar perfectamente.


Bueno ya que :not es aceptado por IE6 ~ 8 , te sugiero esto:

div ul:nth-child(n+2) {
    background-color: #900;
}

Así que escoges cada ul en su elemento padre excepto el primero .

Consulte el artículo "Útil: Recetas de nth-child" de Chris Coyer para ver más ejemplos de nth-child .


No tuve suerte con algunos de los anteriores,

Este fue el único que realmente trabajó para mí.

ul:not(:first-of-type) {}

Esto me funcionó cuando intenté que el primer botón que se muestra en la página no se vea afectado por una opción de margen izquierdo.

Esta fue la opción que probé primero pero no funcionó

ul:not(:first-child)


Una de las versiones que publicaste funciona para todos los navegadores modernos (donde se supported selectores de CSS de nivel 3 ):

div ul:not(:first-child) {
    background-color: #900;
}

Si necesita admitir navegadores heredados, o si está limitado por la limitation :not selector (solo acepta un selector simple como argumento), puede utilizar otra técnica:

Defina una regla que tenga un alcance mayor al que pretendía y luego "revoque" condicionalmente, limitando su alcance a lo que pretende:

div ul {
    background-color: #900;  /* applies to every ul */
}

div ul:first-child {
    background-color: transparent; /* limits the scope of the previous rule */
}

Al limitar el alcance, use el valor predeterminado para cada atributo de CSS que esté configurando.


div li~li {
    color: red;
}

Soporta IE7


En la mayoría de los navegadores, esto se puede lograr utilizando variaciones propietarias en la propiedad de user-select CSS, originalmente propuesta y luego abandonada en CSS3 y ahora propuesta en CSS UI Nivel 4 :

*.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

Para IE <10 y Opera <15, deberá utilizar el atributo unselectable del elemento que desea que no sea seleccionable. Puedes configurarlo usando un atributo en HTML:

<div id="foo" unselectable="on" class="unselectable">...</div>

Lamentablemente, esta propiedad no se hereda, lo que significa que debe colocar un atributo en la etiqueta de inicio de cada elemento dentro de <div> . Si esto es un problema, en su lugar, podría usar JavaScript para hacer esto recursivamente para los descendientes de un elemento:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

Actualización del 30 de abril de 2014 : este recorrido del árbol debe volver a ejecutarse cada vez que se agregue un nuevo elemento al árbol, pero de un comentario de @Han parece que es posible evitar esto agregando un controlador de eventos de ratón que no se pueda unselectable El objetivo del evento. Consulte http://jsbin.com/yagekiji/1 para obtener más información.

Esto todavía no cubre todas las posibilidades. Si bien es imposible iniciar selecciones en elementos no seleccionables, en algunos navegadores (IE y Firefox, por ejemplo), todavía es imposible evitar selecciones que comiencen antes y terminen después del elemento no seleccionable sin hacer que todo el documento no sea seleccionable.





html css css-selectors