0

Pessoal tenho uma tabela de categorias. No momento eu tenho 3 categorias, o que eu quero é que quando cadastrar mais uma categoria, tipo de 3 aumentou para 4, eu quero mostrar uma div especifica, porque essa div só pode aparecer se almentar o numero de categorias.

Eu pego o total de categorias

$total = $categories->count();

Preciso fazer uma comparação do total de categorias atual, ou seja antes de aumentar ess total, e comparar com o valor depois ser adicionado mais uma categoria e dai se comparação com if for verdadeira eu mostro essa div. Ai que esta o problema, não sei como montar essa logica. Se alguém puder me ajuda agradeço.

0

1 Resposta 1

1

Vc pode criar uma regra CSS que só funcione caso tenha mais de 3 elementos. Para isso vc vai usar uma pseudo-classe com nth-child(n+3) e o seletor ~

O nth-child(n+3) significa: a partir do terceiro filho. E o seletor ~ significa nesse caso: qualquer elemento abaixo do terceiro filho. Então no filho que eu quero esconder eu coloca a classe last e minha regra fica assim:

.container .box:nth-child(n+3) ~ .last {
    background-color: red;
}

Isso significa que apenas se tiver mais de 3 .box, o elemento que tiver a classe .last fica com a cor vermelha. Se tiver menos a regra falha e ninguém fica com a cor, se tiver mais não tem problema, pois o seletor ~ vai pegar qq elemento com a classe last que esteja depois do terceiro filho. Então sempre a regra inteira tem que ser "true" para esse CSS funcionar

inserir a descrição da imagem aqui

Segue o código da imagem acima

.container {
    display: flex;
}
.box {
    border: 1px solid #000;
    width: 100px;
    height: 100px;
}
.container .box:nth-child(n+3) ~ .last {
    background-color: red;
}
<div class="container">
    <div class="box">box 1</div>
    <div class="box">box 2</div>
    <div class="box">box 3</div>
    
    <!-- aqui vc coloca as divs que for criando -->
    <!-- <div class="box">box 4</div>  -->
    <!-- 5, 6, 7, etc... -->
    
    <!-- última div -->
    <div class="box last">só aparece se tiver mais de 3 box</div>
</div>

2
  • 1
    Exatamente isso que eu precisava, muito obrigado. Deus abençoe.
    – Rafael
    Commented 12/07/2019 às 14:44
  • @Rafael sem problemas meu caro, tb da para "programar" em CSS :D
    – hugocsl
    Commented 12/07/2019 às 14:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .