Kevin Powell - Community•2y ago

Separate conditions depending on children

How do i specify separate conditions if element has different children? For example - if a .button only has .icon - set the aspect-ratio to 1/1, if it has .icon and .text - unset the aspect-ratio and set the width to 100%

19 Replies

Unknown User•2y ago

Message Not Public

aolkoOP•2y ago

i use scss you seem to modify the children, but the point is to modify the parent

MarkBoots•2y ago

You can use the new :has() selector (but it does not have full support yet on all browsers)

.button { width: 100% }
.button:has(:not(.text)) { width: unset; aspect-ratio: 1/1 }

.button { width: 100% }
.button:has(:not(.text)) { width: unset; aspect-ratio: 1/1 }

aolkoOP•2y ago

i tried using has but got stuck on if it can pull out multiple elements or not

MarkBoots•2y ago

can you make a small example of what you have (html,css) of the button preferably codepen

aolkoOP•2y ago

<div class="button-group">
                        <a href="#" class="button"><span class="icon"><i class="fa-regular fa-envelope fa-fw"></i></span><span class="text">Contact us</span></a>
                        <a href="#" class="button"><span class="icon"><i class="fa-regular fa-envelope fa-fw"></i></span></a>
                    </div>

<div class="button-group">
                        <a href="#" class="button"><span class="icon"><i class="fa-regular fa-envelope fa-fw"></i></span><span class="text">Contact us</span></a>
                        <a href="#" class="button"><span class="icon"><i class="fa-regular fa-envelope fa-fw"></i></span></a>
                    </div>

should be

this one is always square
                 v
[✉ Contact us] [✉]
^ this button scales

this one is always square
                 v
[✉ Contact us] [✉]
^ this button scales

MarkBoots•2y ago

here simple example of has. if the .button has a .text, style the .button with color:red it works multiple levels down

aolkoOP•2y ago

🤔 here's a solution w/o has (+1 class)

.button{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: var(--clr__block__btn-bg);
      color: var(--clr__block__btn);
      padding: 8px;
      border-radius: 8px;
      text-decoration: unset;
      width: 100%;
      &.--icon{
        display: inline-flex;
        aspect-ratio: 1/1;
        height: 40px;
        width: auto;
      }
    }
    .button-group{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      >:not(.button.--icon){
        flex: 1;
      }
      &.--v{
        flex-direction: column;
        >*{
          width: 100%;
        }
      }
    }

.button{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: var(--clr__block__btn-bg);
      color: var(--clr__block__btn);
      padding: 8px;
      border-radius: 8px;
      text-decoration: unset;
      width: 100%;
      &.--icon{
        display: inline-flex;
        aspect-ratio: 1/1;
        height: 40px;
        width: auto;
      }
    }
    .button-group{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      >:not(.button.--icon){
        flex: 1;
      }
      &.--v{
        flex-direction: column;
        >*{
          width: 100%;
        }
      }
    }