Domanda

Durante la pratica diversi scenari in cui CSS3 pseudo-classi e selettori potrebbero tornare utile, mi sono imbattuto in una cosa che proprio non riesco a capire!

Ecco la situazione. Voglio modificare il :first-of-type::first-letter del primo paragrafo non vuoto per un blocco di testo. Non sono sicuro che le pseudo-classi possono essere impilati però. Ecco cosa mi è venuta in mente (Non funziona, ovviamente)

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

Dato il seguente markup:

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

L'unica supposizione che posso dare è che pseudo-classi (ie;: no () e: first-of-type) non possono essere impilati uno sull'altro. Il che è strano dato che è possibile impilare gli pseudo-elementi l'uno sull'altro, e di altre pseudo-classi ...

Tutte le idee su come questo può essere realizzato?

È stato utile?

Soluzione

:first-of-type seleziona il primo p, come suggerisce il nome, non il primo p non vuota come si potrebbe desiderare.

impilano bene, ma :first-of-type opera esclusivamente sul tag (cioè tipo), non il precedente selettore complesso. Così si finisce per guardare per la prima p, e che, primo comma, inoltre, non dovrebbe essere vuoto. E che non esiste.

Supponendo paragrafi vuoti potrebbero apparire in tutto il testo, e si desidera solo il primo, comma non vuota di essere colpiti, non credo che sia possibile farlo con un solo selettore. Questo è il meglio che posso venire con:

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

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

che si applicheranno il CSS solo al primo comma non vuoto (bene, e ad un primo paragrafo vuoto, ma non farà nulla quindi in ogni caso).

Altri suggerimenti

La rimozione delle cause paragrafo vuoto

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

a comportarsi correttamente. C'è qualche ragione che il paragrafo vuoto bisogno di essere lì? Si può modificare la spaziatura del primo paragrafo al conto per il vuoto non esserci?

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top