Pregunta

Si bien la práctica de diferentes escenarios en los que CSS3 pseudo-clases y selectores pueden venir bien, me encontré con algo que simplemente no puedo entender!

Esta es la situación. Quiero modificar el :first-of-type::first-letter del primer párrafo no vacío de un bloque de texto. No estoy seguro de que la pseudo-clases se pueden apilar sin embargo. Esto es lo que he llegado con (no funciona, por supuesto)

.article-body > p:not(:empty):first-of-type::first-letter { ... }

Dado el marcado siguiente:

<div class="article-body">
    <p></p>
    <p>The "T" in this paragraph should be the one affected.</p>
</div>

El único que puedo llegar a es que los pseudo-clases (es decir;: no () y: first-de-tipo) no pueden ser apilados uno sobre el otro. Lo cual es extraño, ya que se pueden apilar los pseudo-elementos unos sobre otros, y otros pseudo-clases ...

Cualquier ideas de cómo esto se puede lograr?

¿Fue útil?

Solución

:first-of-type selecciona el primer p, como su nombre indica, no es la primera p no vacía como se podría desear.

Ellos se apilan bien, pero :first-of-type puramente opera en el tag (tipo es decir) , no en el selector complejo anterior. Así que acaba de terminar en busca de la primera p, y ese primer párrafo también no debe estar vacío. Y eso no existe.

Suponiendo párrafos vacíos pueden aparecer a lo largo del texto, y sólo desea que el primer párrafo, no vacío a verse afectada, yo no creo que sea posible hacer esto con un solo selector. Esto es lo mejor que puedo llegar a:

p:first-of-type::first-letter,
p:empty + p::first-letter { text-transform: uppercase; /* ... */ }

p:not(:empty) ~ p::first-letter { text-transform: inherit; /* reset */ }

que se aplicará el CSS sólo al primer párrafo no vacío (bueno, ya un primer párrafo vacío, pero no va a hacer nada, entonces de todos modos).

Otros consejos

La eliminación de las causas párrafo vacío

.article-body > p:first-of-type::first-letter { ... }

a comportarse adecuadamente. ¿Hay alguna razón por la que el párrafo vacío tiene que estar allí? Se puede alterar el espaciado del primer párrafo para tener en cuenta el vacío de no estar allí?

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top