Betinget styling av utvalgte elementer i en rutenettbeholder

Kalendere, handlekurver, gallerier, filutforskere og nettbiblioteker er noen situasjoner der valgbare elementer vises i rutenett (dvs. firkantede gitter). Du vet, selv de sikkerhetskontrollene som ber deg velge alle bilder med fotgjengeroverganger eller hva som helst.

Jeg fant en fin måte å vise valgbare alternativer i et rutenett. Nei, ikke gjenskape den reCAPTCHA, men bare å kunne velge flere elementer. Og når to eller flere tilstøtende elementer er valgt, kan vi bruke smart :nth-of-type kombinatorer, pseudoelementer og :checked pseudo-klasse for å style dem på en måte der de ser gruppert sammen.

Hele ideen med kombinatorer og pseudoer for å få de avrundede avmerkingsboksene kom fra en forrige artikkel jeg skrev. Det var et enkelt enkelt-kolonne design:

Denne gangen brukes imidlertid avrundingseffekten på elementer langs både den vertikale og horisontale aksen på et rutenett. Du trenger ikke å ha lest min siste artikkel om avkrysningsboksstyling for dette siden jeg skal dekke alt du trenger å vite her. Men hvis du er interessert i et slanket syn på det vi gjør i denne artikkelen, så er det verdt å sjekke ut.

Før vi starter...

Det vil være nyttig for deg å legge merke til et par ting. For eksempel bruker jeg statisk HTML og CSS i demoen min for enkelhets skyld. Avhengig av applikasjonen din må du kanskje generere rutenettet og elementene i det dynamisk. Jeg utelater praktiske kontroller for tilgjengelighet for å fokusere på effekten, men du vil definitivt vurdere den slags i et produksjonsmiljø.

Dessuten bruker jeg CSS Grid for oppsettet. Jeg vil anbefale det samme, men det er selvfølgelig bare en personlig preferanse, og kjørelengden din kan variere. For meg lar bruken av rutenett meg enkelt bruke søsken-selektorer for å målrette en vare ::before og ::after pseudos.

Derfor, uansett hvilken layoutstandard du måtte ønske å bruke i applikasjonen din, sørg for at pseudoene fortsatt kan målrettes i CSS og sørg for at oppsettet forblir i takt på tvers av forskjellige nettlesere og skjermer.

La oss komme i gang nå

Som du kanskje har lagt merke til i den tidligere demoen, endrer du utformingen av boksene ved å merke av og fjerne merket for et avmerkingsbokselement, avhengig av valgtilstanden til de andre avmerkingsboksene rundt det. Dette er mulig fordi jeg stylet hver boks ved å bruke pseudo-elementene til de tilstøtende elementene i stedet for sitt eget element.

Følgende figur viser hvordan ::before pseudo-elementer av bokser i hver kolonne (unntatt den første kolonnen) overlapper boksene til venstre for dem, og hvordan ::after pseudo-elementer av bokser i hver rad (unntatt den første raden) overlapper boksene ovenfor.

Her er basiskoden

Markeringen er ganske grei:

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

Det skjer litt mer i den første CSS-en. Men først, selve rutenettet:

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

Det er et rutenett med fem rader og fire kolonner som inneholder avmerkingsbokser. Jeg bestemte meg for å slette standardutseendet til avmerkingsboksene, og deretter gi dem min egen lysegrå bakgrunn og superavrundede kanter:

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

Legg også merke til at selve avmerkingsboksene er rutenett. Det er nøkkelen for å plassere sine ::before og ::after pseudo-elementer. Apropos det, la oss gjøre det nå:

/* 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 velger bare pseudoelementene til avmerkingsboksene som ikke er i den første kolonnen eller den første raden i rutenettet. input:not(:nth-of-type(4n+1)) starter ved den første avkrysningsboksen, og velger deretter ::before av hver fjerde vare derfra. Men legg merke til at vi sier :not(), så egentlig er det vi gjør hoppe de ::before pseudo-element i hver fjerde avkrysningsboks, fra den første. Så bruker vi stiler på ::after pseudo av hver avmerkingsboks fra den femte.

Nå kan vi style både ::before og ::after pseudoer for hver avmerkingsboks som ikke er i den første kolonnen eller raden i rutenettet, slik at de flyttes henholdsvis til venstre eller opp, 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 av :checked stat

Nå kommer styling av avmerkingsboksene når de er i en :checked stat. Først, la oss gi dem en farge, si en limegreen bakgrunn:

input:checked { background: limegreen; }

En avkrysset boks skal kunne omforme alle de tilstøtende avmerkede boksene. Med andre ord, hvis vi velger den ellevte avmerkingsboksen i rutenettet, bør vi også kunne style boksene rundt den øverst, nederst, til venstre og til høyre.

Dette gjøres ved å målrette de riktige pseudo-elementene. Hvordan gjør vi det? Vel, det avhenger av det faktiske antallet kolonner i rutenettet. Her er CSS hvis to tilstøtende bokser er merket av i et 5⨉4 rutenett:

/* 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 foretrekker det, kan du generere koden ovenfor dynamisk. Et typisk rutenett, for eksempel et bildegalleri, vil imidlertid antallet kolonner være lite og sannsynligvis et fast antall elementer, mens radene kan fortsette å øke. Spesielt hvis designet for mobilskjermer. Det er derfor denne tilnærmingen fortsatt er en effektiv vei å gå. Hvis applikasjonen av en eller annen grunn tilfeldigvis har begrensede rader og utvidende kolonner, bør du vurdere å rotere rutenettet sidelengs fordi, med en strøm av elementer, arrangerer CSS Grid dem fra venstre til høyre og topp-til-bunn (dvs. rad for rad) .

Vi må også legge til stil for de siste avmerkingsboksene i rutenettet - de er ikke alle dekket av pseudoelementer, da de er de siste elementene 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 noen vanskelige velgere! Den første…

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

... sier i grunnen dette:

A sjekket <input> element ved siden av en avkrysset <input> i nest siste kolonne.

Og nth-of-type beregnes slik:

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 den tredje avmerkingsboksen og velger hver fjerde derfra. Og hvis en avkrysningsboks i den sekvensen er merket, stiler vi også avmerkingsboksene ved siden av, hvis de også er merket av.

Og denne linjen:

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

Sier dette:

An <input> element forutsatt at det er krysset av, er direkte tilstøtende til et element, som er direkte tilstøtende til et annet element, som også er direkte tilstøtende til et annet element, som igjen er direkte tilstøtende til en <input> element som er i sjekket tilstand.

Det betyr at vi velger hver fjerde avmerkingsboks som er merket av. Og hvis en avkrysningsboks i den sekvensen er merket, stiler vi den neste fjerde avmerkingsboksen fra den boksen hvis den også er merket.

Tar den i bruk

Det vi nettopp så på er det generelle prinsippet og logikken bak designet. Igjen, hvor nyttig det er i applikasjonen din vil avhenge av rutenettdesignet.

Jeg brukte avrundede kanter, men du kan prøve andre former eller til og med eksperimentere med bakgrunnseffekter (Temani har dekket deg for ideer). Nå som du vet hvordan formelen fungerer, er resten helt opp til fantasien din.

Her er et eksempel på hvordan det kan se ut i en enkel kalender:

Igjen, dette er bare en grov prototype som bruker statisk markup. Og det ville være mange og mange tilgjengelighetshensyn å vurdere i en kalenderfunksjon.

---

Det er en wrap! Ganske ryddig, ikke sant? Jeg mener, det er ingenting akkurat "nytt" om det som skjer. Men det er et godt eksempel på velge ting i CSS. Hvis vi har grep om mer avanserte utvelgelsesteknikker som bruker kombinatorer og pseudoer, kan stylingkreftene våre nå langt utover det å style en vare – som vi så, kan vi betinget style elementer basert på tilstanden til et annet element.

---

Betinget styling av utvalgte elementer i en rutenettbeholder opprinnelig publisert på CSS-triks. Du burde få nyhetsbrevet.

• Myntsmart. Europas beste Bitcoin og Crypto Exchange.
• Platoblokkkjede. Web3 Metaverse Intelligence. Kunnskap forsterket. FRI TILGANG.
• CryptoHawk. Altcoin Radar. Gratis prøveperiode.
• Kilde: https://css-tricks.com/conditionally-styling-selected-elements-in-a-grid-container/