DEV Community

Cover image for CSS Quiz Time #1 - Elemons gotta catch 'em * ♫
Schemetastic (Rodrigo)
Schemetastic (Rodrigo) Subscriber

Posted on • Originally published at instagram.com

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

#css #frontend #quiz

(In advance apology to Pokémon fans)

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

Easy peasy 🍋👊💦 right?

*{
  box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode

~“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
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;
}
Enter fullscreen mode Exit fullscreen mode

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

Without:
A white button with a dark border but it has a slight offset

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)