Show Divs when category number increases

Question

Guys, I have a table of categories. At the moment I have 3 categories, what I want is that when I register one more category, type 3 increased to 4, I want to show a specific div, because this div can only appear if you want the number of categories.

I take the total of categories

$total = $categories->count();

I need to make a comparison of the total of current categories, ie before increasing this total, and compare with the value after being added one more category and then if compared to if is true I show this div. Oh this the problem, I do not know how to assemble that logic. If anyone can help me thank.

Answer 1

You can create a CSS rule that only works if you have more than 3 elements. For this you will use a pseudo-class with nth-child(n+3) and the selector ~

The nth-child(n+3) means: from the third child. And the selector ~ means in this case: any element below the third child. So in the son I want to hide I put the class last and my rule stays like this:

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

That means only if you’re over 3 .box, the element that has the class .last turns the color red. If the rule is less the rule fails and no one gets the color, if you have more it is no problem, because the selector ~ will catch qq element with class last after the third child. So always the entire rule has to be "true" for this CSS to work

Follow the image code above

.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>