Crea quantità specifiche stili e layouts

Sep 13, 2025

Come si fa

In questo tutorial daremo un'occhiata ai modi di cambiare gli stili di elementi di CSS, oltre a styling apparentemente i loro genitori, a seconda del numero di elementi. Vedremo anche come modificare il layout degli elementi in base alla loro quantità, al fine di creare un più adattivo Layout del sito web questo fa un uso migliore dello spazio.

Trucchi CSS per rivoluzionare i tuoi layout web

Infine, copriremo l'uso dei contatori CSS per visualizzare l'indice di un elemento all'interno di un set all'interno, oltre a visualizzare il conteggio totale all'interno del genitore. Tutto ciò sarà raggiunto solo con PURE CSS, senza la necessità di JavaScript o quadri, portando a codice semplice ed efficiente.

Per costruire un sito senza la necessità di un codice infinito, avrai bisogno di un Builder del sito web . E qualunque sia la capacità del tuo sito, assicurati il tuo web hosting Il servizio è adatto allo scopo. Per qualcosa di diverso, ottieni il tuo deposito cloud. fino a zero.

Selettori elementi singoli.

CSS3 ha solo una singola coppia di selettori che possono determinare la quantità di elementi, vale a dire il: solo-bambino e: solo selettori di tipo. Detto questo, sono davvero in grado di determinare se un elemento è da solo o ha fratelli. Il selettore solo per bambini corrisponde a elementi che sono l'unico figlio del loro genitore, mentre: solo-tipo corrisponde a elementi che sono gli unici del loro tipo.

Sfortunatamente, è per quanto riguarda i singoli selettori, ma ci sono alcuni altri selettori che possono indirizzare gli elementi in base al loro ordine in un insieme di elementi simili. Questi sono: NTH-BAMBINO,: NTH-Type, NTH-Ultimo-figlio e NTH-Ult-of-Type, che sono tipicamente utilizzati per indirizzare gli elementi in base al loro ordine in un insieme di elementi simili. I: NTH-Ultimo-figlio e NTH-Ultimo selezionatori di tipo vengono utilizzati per determinare l'ordine degli elementi che contano all'indietro dall'ultimo elemento al primo. La combinazione con altri selettori ci consente di costruire catene più complesse che mirano ad elementi specifici in base alla loro quantità.

Catene di selezione specifiche della quantità

selector chains — Selettore: primo di tipo: NTH-Ultimo-tipo (3) e il combinatore di fratelli generali ~ può essere combinato per indirizzare il primo di tre e tutti i suoi fratelli, quindi tutto in un insieme di tre

Dei quattro selezionatori sopra menzionati, quello principale che useremo in questo tutorial è nth-ultima-of-type. La differenza tra questo e il selettore NTH-Ultimo-figlio è che quest'ultimo include tutti i fratelli degli elementi nel set, mentre il primo include solo elementi dello stesso tipo HTML ed è quindi più selettivo. Per il resto di questo tutorial utilizzeremo i selettori di tipo -OF, tuttavia le varianti -Child sono ugualmente valide.

L'ennesimo tipo di tipo può essere utilizzato insieme ai più popolari selettori di primo tipo per creare una catena che indirizza il primo elemento in un insieme di una quantità desiderata. Ad esempio, possiamo usare: Primo di tipo: NTH-Ultimo-tipo (3) agli elementi di destinazione sia il primo che il terzo dalla fine del loro tipo o, in altre parole, il primo di a Set di tre. Possiamo quindi estendere questo con il Combinator General Sybling ~ per selezionare tutti i fratelli che seguono il primo di un set di tre. Combinando queste due catene di selezione, possiamo creare un selettore complesso che punta a elementi che sono i primi tre e tutti gli elementi dello stesso tipo che lo seguono, selezionando così tutti gli elementi in un set di tre.

 .box: Primo di tipo: NTH-Ult-of-Type (3),
.box: primo di tipo: nth-ultima-tipo (3) ~ .box

Questa catena di selezione non funziona solo per un numero specifico di elementi, ma può anche essere modificato per indirizzare una gamma di quantità.

selector chain — Selettori NTH-Last-of-Type (N + 2) e: NTH-Last-of-Type (-n + 2) può essere utilizzato per indirizzare gli elementi in serie di più di e meno di due rispettivamente

Se vogliamo mirare agli elementi in un set con una quantità più o meno di un particolare valore m, possiamo usare rispettivamente la catena con le tecniche (N + M) e (-N + M). Ad esempio, per indirizzare tutti gli elementi in un insieme di due o più elementi che possiamo usare:

 .box: primo di tipo: NTH-Ult-of-Type (N + 2),
.box: primo di tipo: NTH-Last-of-Type (N + 2) ~ .box

Allo stesso modo, possiamo indirizzare tutti gli elementi in un insieme di due o meno elementi utilizzando:

 .box: primo di tipo: NTH-Ult-of-Type (-n + 2),
.box: primo di tipo: NTH-Last-of-Type (-n + 2) ~ .box

Come puoi vedere questa è una potente catena di selezione che ci consente di ottenere cose molto interessanti e utili senza la necessità di JavaScript o di altri quadri. È particolarmente utile quando si tratta di creare layout adattivi che cambiano in base al numero di elementi.

Layout dinamici e specifici della quantità

grid layouts with odd and even numbers — Per un numero pari di elementi I layout della griglia sembrano grandi, ma non così tanto per i numeri dispari

Diciamo che vogliamo visualizzare un gruppo di scatole che mostrano i risultati di una ricerca o una chiamata API in un layout di griglia a due colonne. Il problema risiede nel fatto che i risultati provengono da una fonte esterna e non abbiamo modo di conoscere il numero di risultati che verranno restituiti, quindi non sappiamo quante scatole verranno create. Mentre la griglia sembra ideale per un numero pari di scatole, se applicato a un numero dispari l'ultima scatola si siede su una riga da sola e sembra ... beh, tipo di strano.

Questo è particolarmente problematico quando si utilizzano elementi FlexBox con flex-cresciti applicati a loro poiché causa l'ultimo elemento di crescere nello spazio vuoto sulla riga, prendendo in tal modo la larghezza completa. Un modo per prevenire questo potrebbe essere quello di rendere il primo di un numero dispari di scatole di prendere una riga completa applicando una larghezza del 100% alle prime caselle che sono anche un numero dispari di scatole dalla fine, utilizzando: First-Child: nth-last-of-type (dispari). Ciò fornisce un layout migliore in quanto dà il primo e quindi il risultato più rilevante o recente più significato rispetto all'ultimo.

Possiamo persino aggiungere un caso speciale per quando la quantità è divisibile da tre usando: First-Child: nth-ultima-tipo (3N) per trasformare la griglia in un layout a tre colonne applicando una larghezza del 33% a prima scatole in un set con una quantità divisibile da tre e tutte le scatole che lo seguono.

 .box {
  Larghezza: 50%;
}

.box: First-Child: nth-last-of-type (dispari) {
  Larghezza: 100%;
}

.box: First-Child: Nth-Last-of-Type (3N),
.box: First-Child: Nth-Last-of-Type (3N) ~ .box {
  Larghezza: 33%;
}

Conclusione

different layouts — I layout possono essere modificati in base al numero di elementi solo utilizzando le catene di selezione CSS

Come abbiamo visto, i selezionatori CSS possono essere incatenati insieme in una varietà di modi interessanti per applicare stili e layout adattivi che cambiano in base alla quantità di elementi. Le catene del selettore possono anche essere utilizzate per applicare gli stili apparentemente per i genitori di una serie di elementi di una certa quantità, utilizzando :: prima o :: dopo pseudo-elementi che sono posizionati per occupare la dimensione completa del genitore. Combinato con contatori CSS, questi pseudo-elementi possono essere utilizzati per visualizzare il numero totale di discendenti in un elemento genitore, nonché il testo che cambia in base alla quantità di discendenti.

Queste tecniche offrono un prezioso modo di creare stili e layout dinamici, basati sulla quantità che sono utili quando si maneggiano un numero sconosciuto di elementi, che è spesso il caso quando si tratta di API.

Questo articolo è stato originariamente pubblicato in emissione 308 di netto , la rivista best-seller del mondo per web designer e sviluppatori. Comprare il problema 308 qui o Iscriviti qui .

Articoli Correlati:

5 consigli per CSS super-veloce
Crea un layout rispondente con la griglia CSS
Capire la proprietà del display CSS

Crea quantità specifiche stili e layouts

Selettori elementi singoli.

Catene di selezione specifiche della quantità

Layout dinamici e specifici della quantità

Conclusione

Come si fa - Articoli più popolari

Esplora la visualizzazione dei dati con p5.js

Inizia con la stampa monotype

Prepara una tavola per la pittura in 3 semplici passaggi

Dipingi su una maglia 3D con lo strumento Polypaint di Zbrushcore

Costruisci app che funzionano offline

Introduzione al test di usabilità

Come creare un personaggio 3D stilizzato per i giochi

Come creare capelli e pelliccia 3D

Categorie