如果特定子 div 处于活动状态，则更改 div 的 css

Question

I have a class with 4 different columns.

div class="mainContent">
        <div class="left-Col-1" *ngIf="data-1">
        </div>
        <div class="left-Col-2" *ngIf="!data-1">
        </div>
        <div class="right-Col-1" *ngIf="data-2">
        </div>
        <div class="right-Col-2" *ngIf="!data-2">
        </div>
</div>

Basicly i created a flexbox where i show two colums. If there's no data-1 in the first column i show div-right-2, and the same happens when theres no data-2, where i show div-left-2. If they both have data i show div-left-1 and div-right-1. My css looks like this:

.mainContent > *:nth-child(1){
 display: flex;
 flex-direction: column;
 flex-basis: 70%;
 padding: 0;
}
.mainContent > *:nth-child(2){
 display: flex;
 flex-direction: column;
 flex-basis: 30%;
 padding: 0;
}

The problem is that i want to change flex-basis to 50% in both div's if there is no data loaded (if first div is "left-div-2" and the second div "right-div-2"). Is that possible only using css or do i need to write some fucntion on typescript?

Ty for your help.

Answer 1

You might be confusing yourself by using an odd/even selector that you don't understand. Your selector splits your divs into odd and even children and the only difference is the flex-basis is 70% for the odd ones and 30% for the even. With the change you are describing you have 3 different values for 4 different classes, so don't use the odd even thing. Angular is going to remove two of those divs based on the content of data-1 anyway.

Since you are using four different classes for your four divs you might as well use them to specify what flex-basis you want for each. See if you can understand what this css does.

.mainContent{
    display: flex;
    flex-direction: column;
    padding: 0;
}

.mainContent .left-Col-1{
    flex-basis: 70%;
}
.mainContent .right-Col-1{
    flex-basis: 30%;
}
.mainContent .left-Col-2, .mainContent .right-Col-2{
    flex-basis: 50%;
}

The best would probably be to use classes that are more descriptive like full/empty and primary/secondary. That would make your code more clear and easy to manage.