Selettore Padre > Figlio per più Figli

[Luigi636]

Salve,
vorrei sapere se è possibile sintetizzare questi selettori evitando di ripetere ogni volta il button >

button > h1, button > h2, button > h3, button > h4, button > h5, button > h6{
    cursor: pointer;
}

Semplicemente per curiosità più che per chissà cosa..
Grazie

[KillerWorm]

Ciao, prendendo con riserva il codice che hai postato (ti spiego a fine post*) posso dirti che se usi semplice CSS, lasciando da parte un eventuale discorso di minimizzazione del codice, credo che quella sia la soluzione più sintetica possibile, perlomeno parlando in linea generale.

Bisognerebbe contestualizzare il discorso per poter mettere meglio a fuoco una qualche soluzione per ottenere un codice meglio ottimizzato.
Senza entrare troppo nei dettagli, dato che comunque la tua è una curiosità, posso ipotizzare diverse situazioni in cui applicare varie possibili soluzioni.

Se il discorso viene fatto nell'ambito di specifici progetti, allora si potrebbe pensare di utilizzare altri tipi di selettori per poter specificare la totalità di quegli elementi.

Giusto un banale esempio:
mettiamo il caso che nel tuo progetto, all'interno dei button, non ci sia altro che degli elementi h (di qualsiasi grado e in qualsiasi ordine) e del semplice testo "libero" (non contenuto in altri elementi).
In tal caso si potrebbe risolvere così:

button > *{
    cursor: pointer;
}

Tenendo presente che il testo libero non sarà considerato come elemento figlio di button, per cui il selettore universale (*) identificherà semplicemente tutti gli elementi h.

Altro esempio:
mettiamo il caso che oltre agli elementi h ci siano anche degli elementi span, sempre dentro il button.
In tal caso si potrebbe fare una cosa del genere:

button > *:not(span){
    cursor: pointer;
}

O, ancora, se gli elementi h dovessero risultare solo come primi figli, si potrebbe usare il peudo-elemento :first-child o altri selettori simili.

Chiaramente i casi potrebbero essere svariati e differenti, ma sostanzialmente si tratta di capire quale combinazione di selettori, a seconda delle esigenze, è possibile usare per identificare quegli specifici elementi in modo implicito, cioè senza doverne specificare il nome-tag, evitando quindi ripetizioni di codice.

Si potrebbe anche pensare all'uso di una classe da applicare a ciascun tag h in questione. Ad esempio si supponga di applicare la classe "btn_titolo" su ogni tag h dentro button.
Il CSS potrà essere:

.btn_titolo{
    cursor: pointer;
}

Chiaramente in questo caso, pur favorendo la sintesi del codice CSS, ci sarà un dispendio di codice sulla parte HTML, perché si dovrà applicare class="btn_titolo" su ogni elemento interessato. In generale non ha molto senso, a meno che, per qualche motivo, non sia già presente una qualche classe che identifichi tali elementi, ad esempio nel caso di progetti basati su framework che usano spesso delle classi distintive per identificare al meglio i vari elementi. Sono comunque giusto delle ipotesi.

Un'altra soluzione alternativa potresti trovarla con l'uso di CSS dinamico o analoghi pre-processori, vedi LESS, SASS, SCSS e robe simili, con cui poter scrivere codice CSS in modo programmatico; soluzioni che comunque tornerebbero utili all'interno di progetti basati sull'uso di tali librerie CSS, in un discorso più ampio di ottimizzazione del codice, ma che sarebbero inadeguatamente eccessive se usate in modo limitato, giusto per sintetizzare minime parti di codice.

Infine, per completezza, a seconda dei casi sarebbe anche possibile l'uso dell'attributo HTML5 scoped del tag style, con cui poter applicare il CSS all'interno di un contesto dentro il body, in tal modo si potrebbe pensare di inserire un blocco style nel contesto in cui stanno i button in questione, evitando quindi di specificare tale selettore. Ad ogni modo, tale attributo è attualmente supportato solo da FireFox. Per il momento è quindi una soluzione da escludere.

---

* Ho preso con riserva il codice da te postato perché se dovesse trattarsi di HTML5 allora la presunta struttura HTML, riferita a quei selettori, avrebbe un codice non valido.
Secondo le specifiche W3C (ripeto, per HTML5) non è consentito inserire elementi heading dentro un elemento button, che può invece contenere solo elementi di tipo "phrasing content" e i quali non siano dei contenuti interattivi.

Inoltre, testando su FireFox, noto un problema sull'applicazione di cursor che non ha effetto. In sostanza, qualsiasi valore gli imposto e applicandola ad un qualsiasi elemento contenuto in button, non ho alcun effetto; prevale sempre la proprietà cursor del button stesso (anche se non è espressamente specificata). Ad ogni modo il problema non si presenta su altri browser con cui ho provato.
Era giusto per chiarire.

[Luigi636]

Ora provo con button > *
Grazie per la spiegazione!
Praticamente hai scritto un articolo! Potresti farti un sito per quante ne sai!