Selector de búsqueda de problemas para usar en el primer tramo en un div

Question

¿Cómo puedo dirigir el diseño al primer tramo (Foo) sin afectar el segundo tramo (barra) preferiblemente sin utilizar una clase? El soporte IE6 no es necesario. Intenté usar el primer hijo, pero eso solo funciona sin que la imagen esté allí.

Podría vivir con la degradación si uso ".adcodeblock span: nth-child (3)", pero pensé que primero verificaría con personas más experimentadas.

<div class="adcodeblock"> 
    img src="/images/aUHFgK.jpg" alt="" border="0"> 
    <br> 
    <span>Foo</span> 
    <span>Bar</span> 
</div> 

Answer 1

Puede utilizar la pseudo-clase :first-of-type:

.adcodeblock span:first-of-type 

Ver this para una mesa de soporte de los navegadores. Para los navegadores más antiguos que yo usaría algo como esto:

.adcodeblock br + span 

Answer 2

Si se puede vivir sin Internet Explorer 8 y por debajo, podría intentar

.adcodeblock span:nth-of-type(1)