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