Empilage CSS3 pseudo-classes structurelles

Question

Tout en pratiquant différents scénarios dans lesquels les pseudo-classes CSS3 et sélecteurs pourraient être utiles, je suis tombé sur quelque chose que je ne peux pas comprendre!

Voici la situation. Je veux modifier le :first-of-type::first-letter du premier alinéa non vide pour un bloc de texte. Je ne suis pas sûr que les pseudo-classes peuvent être empilés bien. Voici ce que je suis venu avec (ne fonctionne pas, bien sûr)

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

le balisage suivant:

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

La seule suppose que je peux trouver est que les pseudo-classes (c.-à-;: non () et: la première du type) ne peuvent pas être empilés les uns sur les autres. Ce qui est étrange, puisque vous pouvez empiler des pseudo-éléments les uns aux autres, et d'autres pseudo-classes ...

Toutes les idées sur la façon dont cela peut être accompli?

Answer 1

:first-of-type sélectionne la première p, comme son nom l'indique, pas la première p non vide comme vous voudrez peut-être.

Ils empilent très bien, mais :first-of-type fonctionne uniquement sur le balise (à savoir le type), et non pas sur le sélecteur complexe précédent. Donc, vous venez de finir par la première p, et que le premier paragraphe ne devriez pas être vide. Et cela n'existe pas.

En supposant des paragraphes vides peuvent apparaître dans le texte, et que vous voulez que le premier paragraphe non vide d'être affecté, je ne pense pas qu'il est possible de le faire avec un seul sélecteur. C'est le meilleur que je peux venir avec:

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

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

Cela applique le CSS uniquement au premier paragraphe non vide (bien, et à un premier paragraphe vide, mais il ne rien faire alors de toute façon).

Answer 2

Retrait des causes vides paragraphe

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

pour se comporter correctement. Y at-il raison que le paragraphe vide doit être là? Pouvez-vous modifier l'espacement du premier alinéa pour tenir compte du vide un ne pas être là?