CSS Quiz Time #1 - Elemons gotta catch 'em * ♫

(In advance apology to Pokémon fans)

1 - How to properly apply border-box to ALL elements?

Easy peasy 🍋👊💦 right?

*{
  box-sizing: border-box;
}

~“Now all elements shouldn't collapse when the padding and the border is set”

Me some days ago in 2024

Well, think again. But before I'd show you how, I'll give you a clue, and after I'll give you the answer... okay, let's jump right into it!

...

Solution! 💡

*,
*::before,
*::after{
  box-sizing: border-box;
}

While working on a component (freebie that I'll share soon) I was having issues adding an overlay, after some head scratching I've realized that box-sizing wasn't affecting any ::after or ::before element. The same goes for any pseudo-element.

Let me demonstrate this to you:

With:

Without:

BTW I asked the AI if I should worry about potential performance issues for doing this and it told me that I shouldn't... No worries then!

2 - How to select all immediate children?

Now, with this markup:

<div class="parent">
  <ul>
    <li> Nested:
      <ul>
        [...]
      </ul>
    </li>
    [...]
  </ul>
  <ol>
    [...]
  </ol>
  <figure>
    [...]
  </figure>
</div>

Imagine that you want to add a background-color and border-radius but only to the immediate children of the .parent element.

In this context, you can have any type of elements as children.

Solution! 💡

.parent>*{
  background-color: white;
  border-radius: 12px;
}

In other words, this selector means: select all immediate children of .parent

Knowing this, becomes useful when you want to apply styles to elements, and you don't have a specific way to determine the markup of the children or when you want to shorten markup... for example, if you have a container with a lot of flex rows only, instead of adding a .row class to every element you can just .container>* and apply flex 💪.

3 - How to select all the siblings placed

after an element?

<nav data-is-mobile="true">
  <ul class="items">
    [...]
  </ul>
  <a href="..."> Sign-up</a>
  <button class="openMenu"></button>
</nav>

Imagine that you have a nav menu, and when the attribute data-is-mobile equals true, you want to show all elements after the <ul> as they are only relevant in mobile screens.

Solution! 💡

nav[data-is-mobile="true"] .items~* {
  visibility: visible;
}

nav[data-is-mobile="false"] .items~* {
  visibility: hidden;
}

With the ~ selector we can select any number of siblings after a selector, with the asterisk we indicate that we want to select them all. Keep in mind that the + selector would only select the first sibling element.

This method is very handy to select sibling elements when specific conditionals are met.

Did you catch 'em all?

I'll be producing more of these quizzes soon!

Official Instagram account: @schemetastic
My YouTube Channel: @schemetastic