Estilizando condicionalmente elementos selecionados em um contêiner de grade

Calendários, carrinhos de compras, galerias, exploradores de arquivos e bibliotecas online são algumas situações em que os itens selecionáveis ​​são mostrados em grades (ou seja, treliças quadradas). Você sabe, mesmo aquelas verificações de segurança que pedem para você selecionar todas as imagens com faixas de pedestres ou qualquer outra coisa.

Eu encontrei uma maneira legal de exibir opções selecionáveis ​​em uma grade. Não, não recriando esse reCAPTCHA, mas simplesmente sendo capaz de selecionar vários itens. E quando dois ou mais itens adjacentes são selecionados, podemos usar :nth-of-type combinadores, pseudo elementos e o :checked pseudo-classe para estilizá-los de maneira que pareçam agrupados.

Toda a ideia de combinadores e pseudos para obter as caixas de seleção arredondadas veio de um artigo anterior que escrevi. Era um design simples de coluna única:

Desta vez, no entanto, o efeito de arredondamento é aplicado aos elementos ao longo dos eixos vertical e horizontal em uma grade. Você não precisa ter lido meu último artigo sobre estilo de caixa de seleção para isso, pois vou cobrir tudo o que você precisa saber aqui. Mas se você estiver interessado em uma visão simplificada do que estamos fazendo neste artigo, vale a pena conferir.

Antes de começarmos…

Será útil para você tomar nota de algumas coisas. Por exemplo, estou usando HTML e CSS estático em minha demonstração para simplificar. Dependendo do seu aplicativo, talvez seja necessário gerar a grade e os itens nela dinamicamente. Estou deixando de fora verificações práticas de acessibilidade para focar no efeito, mas você definitivamente gostaria de considerar esse tipo de coisa em um ambiente de produção.

Além disso, estou usando CSS Grid para o layout. Eu recomendaria o mesmo, mas, claro, é apenas uma preferência pessoal e sua milhagem pode variar. Para mim, o uso de grade me permite usar facilmente seletores de irmãos para segmentar um item ::before e ::after pseudo.

Portanto, qualquer que seja o padrão de layout que você queira usar em seu aplicativo, certifique-se de que os pseudos ainda possam ser direcionados em CSS e garanta que o layout permaneça intacto em diferentes navegadores e telas.

Vamos começar agora

Como você deve ter notado na demonstração anterior, marcar e desmarcar um elemento de caixa de seleção modifica o design das caixas, dependendo do estado de seleção das outras caixas de seleção ao seu redor. Isso é possível porque estilizei cada caixa usando os pseudo-elementos de seus elementos adjacentes em vez de seu próprio elemento.

A figura a seguir mostra como o ::before pseudo-elementos de caixas em cada coluna (exceto a primeira coluna) sobrepõem as caixas à esquerda, e como as ::after pseudo-elementos de caixas em cada linha (exceto a primeira linha) sobrepõem as caixas acima.

Aqui está o código base

A marcação é bastante simples:

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

Há um pouco mais acontecendo no CSS inicial. Mas, primeiro, a própria grade:

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

Essa é uma grade de cinco linhas e quatro colunas que contêm caixas de seleção. Decidi eliminar a aparência padrão das caixas de seleção e, em seguida, dar a elas meu próprio plano de fundo cinza claro e bordas superarredondadas:

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

Observe também que as próprias caixas de seleção são grades. Essa é a chave para colocar seus ::before e ::after pseudo-elementos. Falando nisso, vamos fazer isso agora:

/* 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;
}

Estamos selecionando apenas os pseudoelementos das caixas de seleção que não estão na primeira coluna ou na primeira linha da grade. input:not(:nth-of-type(4n+1)) começa na primeira caixa de seleção e, em seguida, seleciona o ::before de cada quarto item a partir daí. Mas observe que estamos dizendo :not(), então realmente o que estamos fazendo é pular que o ::before pseudo-elemento de cada quarta caixa de seleção, começando na primeira. Em seguida, estamos aplicando estilos ao ::after pseudo de cada caixa de seleção a partir da quinta.

Agora podemos estilizar tanto o ::before e ::after pseudos para cada checkbox que não está na primeira coluna ou linha da grade, para que sejam movidos para a esquerda ou para cima, respectivamente, ocultando-os por padrão.

/* 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); }

Estilizando o :checked estado

Agora vem o estilo das caixas de seleção quando elas estão em um :checked Estado. Primeiro, vamos dar-lhes uma cor, digamos um limegreen fundo:

input:checked { background: limegreen; }

Uma caixa marcada deve poder redefinir o estilo de todas as caixas marcadas adjacentes. Em outras palavras, se selecionarmos a décima primeira caixa de seleção na grade, também poderemos estilizar as caixas que a cercam na parte superior, inferior, esquerda e direita.

Isso é feito visando os pseudo-elementos corretos. Como fazemos isso? Bem, depende do número real de colunas na grade. Aqui está o CSS se duas caixas adjacentes estiverem marcadas em uma grade de 5⨉4:

/* 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;
}

Se preferir você pode gerar o código acima dinamicamente. No entanto, em uma grade típica, digamos uma galeria de imagens, o número de colunas será pequeno e provavelmente um número fixo de itens, enquanto as linhas podem continuar aumentando. Especialmente se projetado para telas móveis. É por isso que essa abordagem ainda é um caminho eficiente a seguir. Se por algum motivo seu aplicativo tiver linhas limitadas e colunas em expansão, considere girar a grade lateralmente porque, com um fluxo de itens, CSS Grid os organiza da esquerda para a direita e de cima para baixo (ou seja, linha por linha) .

Também precisamos adicionar estilo para as últimas caixas de seleção na grade - elas não são todas cobertas por pseudoelementos, pois são os últimos itens em cada eixo.

/* 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;
}

Esses são alguns seletores complicados! O primeiro…

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

… está basicamente dizendo isso:

Um verificado <input> elemento ao lado de um verificado <input> na penúltima coluna.

E a nth-of-type é calculado assim:

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

Então, estamos começando na terceira caixa de seleção e selecionando cada quarta a partir daí. E se uma caixa de seleção nessa sequência estiver marcada, também estilizamos as caixas de seleção adjacentes, se elas também estiverem marcadas.

E esta linha:

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

Está dizendo isso:

An <input> elemento desde que marcado, é diretamente adjacente a um elemento, que é diretamente adjacente a outro elemento, que também é diretamente adjacente a outro elemento, que, por sua vez, é diretamente adjacente a um elemento <input> elemento que está em um estado verificado.

O que isso significa é que estamos selecionando cada quarta caixa de seleção marcada. E se uma caixa de seleção nessa sequência estiver marcada, estilizamos a próxima quarta caixa de seleção dessa caixa de seleção se ela também estiver marcada.

Colocando em uso

O que acabamos de ver é o princípio geral e a lógica por trás do design. Novamente, a utilidade dele em seu aplicativo dependerá do design da grade.

Eu usei bordas arredondadas, mas você pode tentar outras formas ou até mesmo experimentar efeitos de fundo (Temani dá cobertura para suas ideias). Agora que você já sabe como a fórmula funciona, o resto fica por conta da sua imaginação.

Aqui está um exemplo de como pode ficar em um calendário simples:

Novamente, este é apenas um protótipo aproximado usando marcação estática. E haveria muitas e muitas considerações de acessibilidade a serem consideradas em um recurso de calendário.

---

Isso é um embrulho! Bem legal, certo? Quer dizer, não há nada exatamente “novo” sobre o que está acontecendo. Mas é um bom exemplo de selecionando coisas em CSS. Se tivermos um controle sobre técnicas de seleção mais avançadas que usam combinadores e pseudos, nossos poderes de estilo podem ir muito além do estilo de um item - como vimos, podemos estilizar itens condicionalmente com base no estado de outro elemento.

---

Estilizando condicionalmente elementos selecionados em um contêiner de grade publicado originalmente em Truques de CSS. Você deve receba o boletim informativo.

• Coinsmart. A melhor troca de Bitcoin e criptografia da Europa.
• Platoblockchain. Inteligência Metaverso Web3. Conhecimento Ampliado. ACESSO LIVRE.
• CryptoHawk. Radar Altcoin. Teste grátis.
• Fonte: https://css-tricks.com/conditionally-styling-selected-elements-in-a-grid-container/