Impilabile CSS3 strutturali pseudo-classi
-
11-09-2019 - |
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?
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?