El primer hijo de CSS y el último hijo no funcionan cuando se usa en el mismo elemento

Question

Me di cuenta de que CSS :first-child y :last-child no funcionan cuando se usan en el mismo elemento. Solo uno es usado. Me pregunto por qué es eso y si hay alguna solución para eso en CSS. Parece una falla de CSS para mí: el primer elemento también puede ser el último elemento.

No pude encontrar nada en Google sobre ese tema. Cada tutorial supone que habrá al menos 2 elementos.

Estoy buscando algo así como: "El primer hijo también es el último hijo". ¿Existe?

Answer 1

Me pregunto por qué es eso y si hay alguna solución a eso en CSS? Parece una falla de CSS para mí: el primer elemento también puede ser el último elemento.

No es un error. Así es como funciona la cascada: si un elemento es tanto el primer hijo como el último hijo, entonces si tiene :first-child y en reglas separadas y ambas coinciden con el mismo elemento, entonces cualquier cosa en la regla posterior declarada o más específica anula al otro.

se puede encontrar un ejemplo de este comportamiento here, con la propiedad rápida border-radius y soluciones que incluyen el uso de las propiedades de los componentes en lugar de la taquigrafía, así como especificar una regla separada por completo usando uno de los siguientes selectores ...

Estoy buscando algo así como: "el primer hijo también es el último hijo" selector. ¿Existe?

Literalmente, lo haría con la cadena tanto pseudo-clases como éste, que funciona bien:

:first-child:last-child 

Sin embargo existe una pseudo-clase especial que actúa de la misma manera:

:only-child 

La diferencia principal (de hecho, la diferencia solamente) entre estos dos selectores es la especificidad: la primera es más específica ya que contiene una pseudoclase adicional. No hay diferencia incluso en el soporte de navegador, ya que :last-child y :only-child son compatibles con las mismas versiones exactas de cada navegador.

Answer 2

Me doy cuenta de que llegué masivamente tarde a esto, pero también puedes usar CSS :first-of-type y :last-of-type. Por ejemplo:

<blockquote> 
    <p>Some text you want to quote</p> 
</blockquote> 

Este CSS se sumará a las citas del párrafo:

blockquote{ 
    quotes: "“" "”" "‘" "’"; 
} 

blockquote p:first-of-type:before{ 
    content:open-quote; 
} 

blockquote p:last-of-type:after{ 
    content:close-quote; 
}