Skapa kvantitetsspecifika CSS-stilar och layouter

Sep 13, 2025

Hur

I den här handledningen kommer vi att titta på sätt att ändra CSS-stilar av element, liksom till synes styla sina föräldrar, beroende på antalet element. Vi kommer också att se hur man ändrar utformningen av element baserat på deras kvantitet, för att skapa en mer adaptiv Webbplatslayout Det gör bättre användning av rymden.

CSS-tricks att revolutionera dina webbutikplatser

Slutligen kommer vi att täcka användningen av CSS-räknare för att visa ett elements index inom en uppsättning inuti det, såväl som att visa det totala antalet inuti föräldern. Allt detta kommer att uppnås med ren CSS, utan behov av JavaScript eller ramar, vilket leder till enkel och effektivare kod.

För att bygga en webbplats utan behov av oändlig kod behöver du en Website Builder . Och oavsett din webbplatss kapacitet, se till din webbhotell Tjänsten är lämplig för ändamål. För något annat, få din molnlagring upp till början.

Singel Element Selectors

CSS3 har bara ett enda par selektorer som kan bestämma mängden element, nämligen: bara barn och: endast av-typ-selektorer. Med detta sagt kan de verkligen bara avgöra om ett element är på egen hand eller har syskon. Den enda barnsäljaren matchar element som är det enda barnet hos sin förälder, medan: Endast-av-typ matchningselement som är de enda av deras typ.

Tyvärr är det så långt som enskilda selektorer, men det finns några andra selektorer som kan rikta in element baserat på deras order i en uppsättning liknande element. Dessa är: nth-barn,: nth-of-typ, nth-sista-child och nth-last-of-typ, som vanligtvis används för att rikta in element baserat på deras order i en uppsättning liknande element. NTH-LAST-BARN och NTH-Senast-of-Type-selektorerna används för att bestämma beställningen av element som räknas bakåt från det sista elementet till den första. Genom att kombinera dessa med andra selekter kan vi bygga mer komplexa kedjor som riktar sig till specifika element baserat på deras kvantitet.

Kvantitetsspecifika väljarkedjor

selector chains — Selector: First-of-Type: NTH-Last-of-Type (3) och den allmänna syskonkombinationen ~ kan kombineras för att rikta den första av tre och alla sina syskon, därmed allt i en uppsättning av tre

Av de fyra ovannämnda selektorerna är den viktigaste vi använder i denna handledning nth-last-of-typ. Skillnaden mellan detta och nth-sista barnsäljaren är att den senare innehåller alla elementens syskon i uppsättningen, medan den tidigare endast innehåller element av samma HTML-typ och är därför mer selektiv. För resten av den här handledningen kommer vi att använda -of-typ-selektorerna, men de -Child-varianterna är lika giltiga.

NTH-Last-of-Type kan användas tillsammans med de mer populära första-typerna för att skapa en kedja som riktar sig mot det första elementet i en uppsättning av en önskad mängd. Till exempel kan vi använda: First-of-Type: nth-Last-of-Type (3) till målelement som är både den första och den tredje från slutet av deras typ eller, med andra ord den första av a uppsättning av tre. Vi kan sedan förlänga detta med den allmänna syskonkombinationen ~ för att välja alla syskon som följer den första av en uppsättning av tre. Kombinera dessa två väljarkedjor kan vi skapa en komplex väljare som riktar sig till element som är de första av tre och alla delar av samma typ som följer det och därigenom välja alla element i en uppsättning av tre.

. FOX: Första-of-typ: nth-last-of-type (3),
.Box: Första-of-typ: nth-last-of-type (3) ~. box

Denna väljarkedja fungerar inte bara för ett visst antal element men kan till och med ändras för att rikta ett antal kvantiteter.

selector chain — Selectors nth-Last-of-Type (N + 2) och: nth-Last-of-Type (-N + 2) kan användas för att rikta in element i uppsättningar av mer än och mindre än två respektive

Om vi vill rikta in element i en uppsättning med en mängd mer än eller mindre än ett visst värde M, kan vi använda kedjan med respektive (n + m) respektive (-n + m). Till exempel, för att rikta alla element i en uppsättning två eller flera element kan vi använda:

. FOX: Första-of-typ: nth-last-of-type (n + 2),
.Box: Första-of-typ: nth-last-of-type (n + 2) ~. box

På samma sätt kan vi rikta alla element i en uppsättning två eller mindre element som använder:

.box: Första-of-typ: nth-last-of-type (-N + 2),
.Box: Första-of-typ: nth-last-of-type (-n + 2) ~. box

Som du kan se är det en kraftfull väljarkedja som gör det möjligt för oss att uppnå mycket intressanta och användbara saker utan att behöva JavaScript eller andra ramar. Det är särskilt användbart när det gäller att skapa adaptiva layouter som förändras baserat på antalet element.

Dynamiska, kvantitetsspecifika layouter

grid layouts with odd and even numbers — För ett jämnt antal element som gallerlayouter ser bra ut, men inte så mycket för udda tal

Låt oss säga att vi vill visa en grupp av lådor som visar resultaten av en sökning eller ett API-samtal i en två-kolonn, rutnät. Problemet ligger i det faktum att resultaten kommer från en extern källa och vi har inget sätt att veta antalet resultat som kommer att returneras, därför vet vi inte hur många lådor ska skapas. Medan rutnätet ser bra ut för ett jämnt antal lådor, när den appliceras på ett udda nummer, sitter den sista rutan på en rad ensam och ser ... Jo, typ av udda.

Detta är särskilt problematiskt när du använder Flexbox-objekt med Flex-Grow applicerad på dem eftersom det medför att det sista elementet växer i det tomma utrymmet på raden och därigenom tar upp hela bredden. Ett sätt att förhindra detta kan vara att göra det första av ett udda antal lådor ta upp en hel rad genom att applicera en bredd på 100% till första lådor som också är ett udda antal lådor från slutet, med: Första barn: nth-last-of-type (udda). Detta ger en bättre layout eftersom det ger det första och därför mest relevanta eller nyligen resultatet större betydelse än den sista.

Vi kan till och med lägga till ett speciellt fall för när kvantiteten är delbar med tre med: första barn: nth-sista-typ (3N) för att omvandla gallret till en tre-kolonnlayout genom att applicera en bredd på 33% till första Lådor i en uppsättning med en mängd delbar av tre och alla lådor som följer den.

 .x {
  Bredd: 50%;
}

. Box: Första barn: nth-last-of-type (udda) {
  Bredd: 100%;
}

.box: Första barn: nth-last-of-type (3n),
.box: Första barn: nth-last-of-type (3n) ~ .x {
  Bredd: 33%;
}

Slutsats

different layouts — Layouter kan ändras baserat på antalet element bara genom att använda CSS-selektorskedjor

Som vi har sett kan CSS-selektorerna vara kedjade på ett antal intressanta sätt för att tillämpa stilar och adaptiva layouter som förändras baserat på mängden element. Väljarkedjorna kan också användas för att till synes tillämpa stilar till föräldern till en uppsättning delar av en viss mängd, genom att använda :: före eller :: efter pseudo-element som är placerade för att ta upp den fulla storleken på föräldern. Kombinerade med CSS-räknare kan dessa pseudo-element användas för att visa det totala antalet efterkommande i ett moderelement, såväl som text som ändras beroende på mängden ättlingar.

Dessa tekniker erbjuder ett värdefullt sätt att skapa dynamiska, kvantitetsbaserade stilar och layouter som är användbara vid hantering av ett okänt antal element, vilket ofta är fallet när man arbetar med API.

Denna artikel publicerades ursprungligen i utgåva 308 av netto , världens bästsäljande tidning för webbdesigners och utvecklare. Köp nummer 308 här eller prenumerera här .

Relaterade artiklar:

5 tips för super-snabb CSS
Skapa en responsiv layout med CSS-rutnät
Förstå CSS-skärmens egendom

Skapa kvantitetsspecifika CSS-stilar och layouter

Singel Element Selectors

Kvantitetsspecifika väljarkedjor

Dynamiska, kvantitetsspecifika layouter

Slutsats

Hur - Mest populära artiklar

Hur man målar en Elven Maiden

10 Regler för att göra användarvänliga webbformulär

Hur man bygger ett ChatBot-gränssnitt

Skapa en vektorförskjutningsmaskborste

Hur man skapar färgglada världar som berättar en historia

Simulera en Ghost Rider-omvandling

5 sätt att skapa mer nedsänksamma VR-upplevelser

Bygg komplexa layouter med Postcss-Flexbox

Kategorier