pseudo-classes estruturais empilhamento CSS3

Question

Ao praticar diferentes cenários em que CSS3 pseudo-classes e seletores pode vir a calhar, deparei com algo que eu simplesmente não consigo descobrir!

Aqui está a situação. Eu quero modificar o :first-of-type::first-letter do primeiro parágrafo não-vazia para um bloco de texto. Eu não tenho certeza de que pseudo-classes podem ser empilhados embora. Aqui está o que eu vim acima com (não funciona, é claro)

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

Dada a seguinte marcação:

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

O único acho que pode chegar a que é pseudo-classes (ou seja,;: não (e): em primeiro lugar-de-tipo) não podem ser empilhados uns sobre os outros. O que é estranho, já que você pode empilhar pseudo-elementos uns sobre os outros, e outros pseudo-classes ...

Todas as idéias sobre como isso pode ser feito?

Answer 1

seleciona :first-of-type o primeiro p, como o nome sugere, não é a primeira p não vazio como você pode querer.

Eles empilhar muito bem, mas :first-of-type opera exclusivamente no tag (tipo ou seja), e não sobre o seletor complexo anterior. Então você só acabam procurando o primeiro p, e que primeiro parágrafo também não deve estar vazio. E que não existe.

Assumindo parágrafos vazios podem aparecer ao longo do texto, e você só quer que o primeiro parágrafo, não vazio a ser afetado, eu não acho que é possível fazer isso com apenas um selector. Este é o melhor que pode vir acima com:

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

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

Isso vai aplicar o CSS apenas ao primeiro parágrafo não vazia (bem, e um primeiro parágrafo vazio, mas ele não vai fazer nada, então de qualquer maneira).

Answer 2

Removendo as causas parágrafo vazio

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

se comportar corretamente. Existe alguma razão para que as necessidades parágrafo vazio para estar lá? você pode alterar o espaçamento do primeiro parágrafo para explicar o vazio não estar lá?