CSS: before y: first-child combina

estoy usando el siguiente código para agregar separadores entre mis elementos de menú:CSS: before y: first-child combina

#navigation_center li:before { 

    content: "| "; 
    color: #fff; 

}

Ahora quiero que el primer elemento no tiene un separador delante de él, así que descubrí el siguiente código:

#navigation_center li:before:first-child { 

    content: none; 

}

pero eso no está haciendo nada. ¿Es posible combinar: antes y: primer hijo?

Fuente

2012-03-22 Jeffrey

explicación rápida de respuesta hradac: ': first' es un selector de jQuery (y jQuery utiliza chisporroteo, para ser completa) cuando se utiliza CSS': primera child' – FelipeAls

@FelipeAlsacreations Gracias por la expansión en mi respuesta. No estoy seguro, pero creo que el orden también es importante donde 'first-child' viene antes' before', pero no lo he probado. – hradac

@hradac Tienes razón, hay un pedido. Por lo que recuerdo, ': before' y': after' deberían escribirse al final, a la derecha. Confirmado por el módulo Selectores CSS3: [Solo puede aparecer un pseudo-elemento por selector, y si está presente debe aparecer después de la secuencia de selectores simples (...)] (http://www.w3.org/TR/selectors/ # pseudo-elementos) – FelipeAls

Trate

#navigation_center li:first-child:before { 
    content: ''; 
}

Editar: quería ampliar esta respuesta con los comentarios hechos por FelipeAls. La pregunta original usó :first que no es un selector de CSS válido. En su lugar, use :first-child. También el orden de los pseudo-selectores es importante. El primer selector de niños debe ser lo primero.

Tiendo a pensar en :before como un tipo de modificador para un selector. En realidad, no selecciona un elemento solo el espacio justo antes del elemento seleccionado.

Fuente

2012-03-22 12:40:46 hradac

Eso hizo el truco. ¡Gracias! – Jeffrey

De nada, feliz de ayudar. – hradac

Aunque la respuesta de hradac debería ser el truco, pensé que sería mejor revisar algunas posibles permutaciones para ayudar a los recién llegados.

.works:first-child:before 
 
{ 
 
\t color: green; 
 
\t content: 'working '; 
 
} 
 
.works:not(:first-child):after 
 
{ 
 
\t color: green; 
 
\t content: ' is working'; 
 
} 
 

 

 
.broken:before:first-child 
 
{ 
 
\t color: red; 
 
\t content: 'this will never show up'; 
 
} 
 
.broken:after:not(:first-child) 
 
{ 
 
\t color: red; 
 
\t content: 'and this will not show up either'; 
 
}

works: 
 
<div> 
 
\t <div class='works'> 
 
\t something 
 
\t </div> 
 
\t <div class='works'> 
 
\t something 
 
\t </div> 
 
\t <div class='works'> 
 
\t something 
 
\t </div> 
 
</div> 
 
<hr/> 
 
broken: 
 
<div> 
 
\t <div class='broken'> 
 
\t something 
 
\t </div> 
 
\t <div class='broken'> 
 
\t something 
 
\t </div> 
 
\t <div class='broken'> 
 
\t something 
 
\t </div> 
 
</div>

Tomemos esto aparte:

Tres div.works están dentro de un div
Tres div.broken son también dentro de un div
La primera regla de CSS añade una texto verde "trabajando" antes. Lo hace seleccionando first-child y luego seleccionando el espacio vacío justo antes.
La segunda regla agrega que "está funcionando" después de cada bloque que viene después, por analogía primero selecciona cada bloque que no está bajo la definición first-child, y luego selecciona el espacio vacío antes de ellos.
Las dos reglas siguientes, no encontrarán un bloque para atacarse. El :before:first-child intenta seleccionar un espacio vacío, pero luego prueba si es un first-child y no lo está (ya que técnicamente aún no está en el árbol DOM), el problema similar es con :not(:first-child).

Fuente

2016-06-27 08:01:32 v010dya

Respuesta

Cuestiones relacionadas