Selector de CSS para otro que no sea el primer hijo y el último hijo

105

Estoy haciendo un sitio web muy avanzado. Mi pregunta: ¿Es posible seleccionar todos los demás hijos excepto el :first-childy el :last-child? Sé que hay un :not()selector, pero no funciona con más de uno que no esté entre paréntesis. Esto es lo que tengo:

#navigation ul li:not(:first-child, :last-child) {
    background: url(images/UISegmentBarButtonmiddle@2x.png);
    background-size: contain;
}
html css css-selectors Daniel
fuente
Eres muy valiente para usar esto. Tenga en cuenta que solo funcionará en navegadores modernos, y definitivamente no funcionará en el anti-navegador que todos están usando.
librado el
2
@Radu: "Estoy creando un sitio web muy avanzado" No es de extrañar ...
BoltClock
1
@BoltClock, cierto, solo digo ... Palabra de advertencia. Pero de todos modos, si el objetivo es iOS Safari como sugiere el nombre de la imagen, entonces debería ser seguro.
librado el
1
Ahora veo por qué esta pregunta me parece tan familiar ... stackoverflow.com/questions/7403129/combining-not-selectors
BoltClock
"anti-navegador"? ¿Es ese el nuevo Google Ultron del que sigo escuchando?
Jonathan Dumaine

Respuestas:

262

Prueba #navigation ul li:not(:first-child):not(:last-child).

Salman von Abbas
fuente
¡ERES INCREIBLE! ¡Gracias!
Daniel
1
rofl, la estupidez de mi not()incluso intentar esto antes de buscar en Google: P genius
SidOfc
1
Eso está mal: not (A and B)no es igual a (not A) and (not B), preferiría serlo (not A) or (not B). No funciona.
Hibou57
2
No, lo que dijo Salman Abbas es correcto. Estás pensando en la coma; #navigation ul li: not (: primer hijo), #navigation ul li: not (: last-child)
user847074
20

Seguro que funcionará, solo tienes que usar dos selectores "no".

#navigation ul li:not(:first-child):not(:last-child) {

Continuará en la línea después del primero, diciendo "no el primer hijo" y "no el último hijo".

animuson
fuente