Betinget styling af udvalgte elementer i en gitterbeholder

Kalendere, indkøbskurve, gallerier, filstifindere og onlinebiblioteker er nogle situationer, hvor valgbare elementer vises i gitter (dvs. firkantede gitter). Du ved, selv de sikkerhedstjek, der beder dig om at vælge alle billeder med fodgængerovergange eller hvad som helst.

Jeg fandt en pæn måde at vise valgbare muligheder i et gitter. Nej, ikke genskabe den reCAPTCHA, men blot at kunne vælge flere elementer. Og når to eller flere tilstødende elementer er udvalgt, kan vi bruge smart :nth-of-type kombinatorer, pseudoelementer og :checked pseudo-klasse for at style dem på en måde, hvor de ser grupperet sammen.

Hele ideen med kombinatorer og pseudos for at få de afrundede afkrydsningsfelter kom fra en tidligere artikel jeg skrev. Det var et enkelt enkelt-kolonne design:

Denne gang anvendes afrundingseffekten imidlertid på elementer langs både den lodrette og vandrette akse på et gitter. Du behøver ikke at have læst min sidste artikel om afkrydsningsfelt-styling for dette, da jeg kommer til at dække alt, hvad du behøver at vide her. Men hvis du er interesseret i et slanket bud på, hvad vi laver i denne artikel, så er det værd at tjekke ud.

Inden vi starter...

Det vil være nyttigt for dig at notere et par ting. For eksempel bruger jeg statisk HTML og CSS i min demo for enkelhedens skyld. Afhængigt af din applikation skal du muligvis generere gitteret og elementerne i det dynamisk. Jeg udelader praktiske tjek for tilgængelighed for at fokusere på effekten, men den slags vil du bestemt overveje i et produktionsmiljø.

Jeg bruger også CSS Grid til layoutet. Jeg vil anbefale det samme, men det er selvfølgelig kun en personlig præference, og din kilometertal kan variere. For mig tillader brugen af ​​gitter mig nemt at bruge søskende-selektorer til at målrette en vare ::before , ::after pseudos.

Derfor, uanset hvilken layoutstandard du måtte ønske at bruge i din applikation, skal du sørge for, at pseudo'erne stadig kan målrettes i CSS og sikre, at layoutet forbliver i takt på tværs af forskellige browsere og skærme.

Lad os komme i gang nu

Som du måske har bemærket i den tidligere demo, ændrer markering og fjernelse af markeringen af ​​et afkrydsningsfelt-element boksenes design, afhængigt af valgtilstanden for de andre afkrydsningsfelter omkring det. Dette er muligt, fordi jeg stylede hver boks ved at bruge pseudo-elementerne i dets tilstødende elementer i stedet for dets eget element.

Følgende figur viser, hvordan ::before pseudo-elementer af kasser i hver kolonne (undtagen den første kolonne) overlapper boksene til venstre for dem, og hvordan ::after pseudo-elementer af kasser i hver række (undtagen den første række) overlapper boksene ovenfor.

Her er basiskoden

Markeringen er ret ligetil:

<main> <input type=checkbox> <input type=checkbox> <input type=checkbox> <!-- more boxes -->
</main>

Der sker lidt mere i den indledende CSS. Men først, selve gitteret:

/* The grid */
main { display: grid; grid: repeat(5, 60px) / repeat(4, 85px); align-items: center; justify-items: center; margin: 0;
}

Det er et gitter med fem rækker og fire kolonner, der indeholder afkrydsningsfelter. Jeg besluttede at slette standardudseendet for afkrydsningsfelterne og derefter give dem min egen lysegrå baggrund og super afrundede kanter:

/* all checkboxes */
input { -webkit-appearance: none; appearance: none; background: #ddd; border-radius: 20px; cursor: pointer; display: grid; height: 40px; width: 60px; margin: 0;
}

Bemærk også, at selve afkrydsningsfelterne er gitter. Det er nøglen til at placere deres ::before , ::after pseudo-elementer. Apropos det, lad os gøre det nu:

/* pseudo-elements except for the first column and first row */
input:not(:nth-of-type(4n+1))::before,
input:nth-of-type(n+5)::after { content: ''; border-radius: 20px; grid-area: 1 / 1; pointer-events: none;
}

Vi markerer kun pseudo-elementerne i afkrydsningsfelter, der ikke er i den første kolonne eller den første række i gitteret. input:not(:nth-of-type(4n+1)) starter ved det første afkrydsningsfelt og vælger derefter ::before af hver fjerde vare derfra. Men læg mærke til, at vi siger :not(), så egentlig er det, vi laver skipping og ::before pseudo-element i hvert fjerde afkrydsningsfelt, startende ved det første. Så anvender vi stilarter på ::after pseudo af hvert afkrydsningsfelt fra den femte.

Nu kan vi style både ::before , ::after pseudos for hvert afkrydsningsfelt, der ikke er i den første kolonne eller række i gitteret, så de flyttes henholdsvis til venstre eller op, og skjuler dem som standard.

/* pseudo-elements other than the first column */
input:not(:nth-of-type(4n+1))::before { transform: translatex(-85px);
} /* pseudo-elements other than the first row */
input:nth-of-type(n+5)::after { transform: translatey(-60px); }

Styling af :checked tilstand

Nu kommer styling af afkrydsningsfelterne, når de er i en :checked stat. Lad os først give dem en farve, siger en limegreen baggrund:

input:checked { background: limegreen; }

Et afkrydsningsfelt skal være i stand til at omstile alle dets tilstødende afkrydsningsfelter. Med andre ord, hvis vi markerer det ellevte afkrydsningsfelt i gitteret, bør vi også være i stand til at style boksene omkring det øverst, nederst, til venstre og til højre.

Dette gøres ved at målrette de korrekte pseudo-elementer. Hvordan gør vi det? Nå, det afhænger af det faktiske antal kolonner i gitteret. Her er CSS, hvis to tilstødende felter er markeret i et 5⨉4-gitter:

/* a checked box's right borders (if the element to its right is checked) */
input:not(:nth-of-type(4n)):checked + input:checked::before { border-top-right-radius: 0; border-bottom-right-radius: 0; background: limegreen;
}
/* a checked box's bottom borders (if the element below is checked) */
input:nth-last-of-type(n+5):checked + * + * + * + input:checked::after { border-bottom-right-radius: 0; border-bottom-left-radius: 0; background: limegreen;
}
/* a checked box's adjacent (right side) checked box's left borders */
input:not(:nth-of-type(4n)):checked + input:checked + input::before { border-top-left-radius: 0; border-bottom-left-radius: 0; background: limegreen;
}
/* a checked box's adjacent (below) checked box's top borders */
input:not(:nth-of-type(4n)):checked + * + * + * + input:checked + input::before { border-top-left-radius: 0; border-top-right-radius: 0; background: limegreen;
}

Hvis du foretrækker det, kan du generere ovenstående kode dynamisk. Men et typisk gitter, f.eks. et billedgalleri, vil antallet af kolonner være lille og sandsynligvis et fast antal elementer, hvorimod rækkerne kan blive ved med at stige. Især hvis designet til mobilskærme. Derfor er denne tilgang stadig en effektiv vej at gå. Hvis din applikation af en eller anden grund tilfældigvis har begrænsede rækker og udvidende kolonner, så overvej at rotere gitteret sidelæns, fordi CSS Grid med en strøm af elementer arrangerer dem fra venstre mod højre og top-til-bund (dvs. række for række) .

Vi skal også tilføje styling til de sidste afkrydsningsfelter i gitteret - de er ikke alle dækket af pseudo-elementer, da de er de sidste elementer i hver akse.

/* a checked box's (in last column) left borders */
input:nth-of-type(4n-1):checked + input:checked { border-top-left-radius: 0; border-bottom-left-radius: 0;
}
/* a checked box's (in last column) adjacent (below) checked box's top borders */
input:nth-of-type(4n):checked + * + * + * + input:checked { border-top-left-radius: 0; border-top-right-radius: 0;
}

Det er nogle vanskelige vælgere! Den første…

input:nth-of-type(4n-1):checked + input:checked

... siger dybest set dette:

A tjekket <input> element ved siden af ​​en markeret <input> i næstsidste kolonne.

Og nth-of-type beregnes således:

4(0) - 1 = no match
4(1) - 1 = 3rd item
4(2) - 1 = 7th item
4(3) - 1 = 11th item
etc.

Så vi starter ved det tredje afkrydsningsfelt og vælger hver fjerde derfra. Og hvis et afkrydsningsfelt i den rækkefølge er markeret, stiler vi også afkrydsningsfelterne ved siden af, hvis de også er markeret.

Og denne linje:

input:nth-of-type(4n):checked + * + * + * + input:checked

Siger dette:

An <input> element, forudsat at det er markeret, støder direkte op til et element, som støder direkte op til et andet element, som også støder direkte op til et andet element, som igen støder direkte op til en <input> element, der er i en kontrolleret tilstand.

Det betyder, at vi markerer hvert fjerde afkrydsningsfelt, der er markeret. Og hvis et afkrydsningsfelt i den rækkefølge er markeret, stiler vi det næste fjerde afkrydsningsfelt fra det afkrydsningsfelt, hvis det også er markeret.

Tager den i brug

Det, vi lige har set på, er det generelle princip og logikken bag designet. Igen, hvor nyttigt det er i din applikation vil afhænge af gitterdesignet.

Jeg brugte afrundede kanter, men du kan prøve andre former eller endda eksperimentere med baggrundseffekter (Temani har du dækket for ideer). Nu hvor du ved, hvordan formlen virker, er resten helt op til din fantasi.

Her er et eksempel på, hvordan det kan se ud i en simpel kalender:

Igen er dette blot en grov prototype, der bruger statisk markup. Og der ville være masser og masser af tilgængelighedsovervejelser at overveje i en kalenderfunktion.

---

Det er en wrap! Ret pænt, ikke? Jeg mener, der er ikke noget præcist "nyt" ved det, der sker. Men det er et godt eksempel på udvælge ting i CSS. Hvis vi har styr på mere avancerede udvælgelsesteknikker, der bruger kombinatorer og pseudoer, så kan vores styling-kræfter række langt ud over styling af ét element - som vi så, kan vi betinget style elementer baseret på tilstanden af ​​et andet element.

---

Betinget styling af udvalgte elementer i en gitterbeholder oprindeligt udgivet den CSS-tricks. Du burde få nyhedsbrevet.

• Coinsmart. Europas bedste Bitcoin og Crypto Exchange.
• Platoblokkæde. Web3 Metaverse Intelligence. Viden forstærket. FRI ADGANG.
• CryptoHawk. Altcoin radar. Gratis prøveversion.
• Kilde: https://css-tricks.com/conditionally-styling-selected-elements-in-a-grid-container/