CSS Quiz Time #1 - Elemons gotta catch 'em * ♫
Tags: css, frontend, quiz
Published: 2024-04-08 14:30:00

(In advance apology to Pokémon fans)

## 1 - How to properly apply `border-box` to **ALL** elements?

Easy peasy 🍋👊💦 right?

```css
*{
  box-sizing: border-box;
}
```

---

_~“Now all elements shouldn't collapse when the padding and the border is set”_
![Partial view of a face of a black man pointing at his head](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b60mj1pvbj8oawusl3iq.png)
***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! 💡

```css
*,
*::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:
![A white button with a dark border](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qo72eh518tbiv5ittgd1.png)

Without:
![A white button with a dark border but it has a slight offset](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4iis4hlm8d55weercep6.png)

**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:
```html
<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! 💡

```css
.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?

```html
<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! 💡

```css
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](https://www.instagram.com/schemetastic/)
My YouTube Channel: [@schemetastic](https://www.youtube.com/@schemetastic)