Learn CSS Flexbox by Building a Photo Gallery - Step 7

I just want to know what the * selector is doing. I looked up what the box-sizing is and have loose idea of what that is doing, but I don’t get why I needed to use *. That doesn’t seem to be referencing anything in the code. I’ve finished this lesson and nowhere do I ever even use another *. Is it a sort of select all selector. Like, does using a * mean that the following code is applied to everything? Why not set the selector to img, div, or body?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Photo Gallery</title>
    <link rel="stylesheet" href="./styles.css">
    <header class="header">
      <h1>css flexbox photo gallery</h1>
    <div class="gallery">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
/* file: styles.css */
* {
  box-sizing: border-box;

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.126 Safari/537.36

Challenge: Learn CSS Flexbox by Building a Photo Gallery - Step 7

Link to the challenge:

It is applying the property to every element. It’s the “select all elements” selector.

Because box-sizing set to border-box is so convenient and what you probably want for everything that you just set it to everything :slight_smile:


yes * is the selector of all elements (select all elements)

You could call out all the different elements individually to give them the box-sizing but * here is a catch-all

box-sizing btw just says that when figuring out how large an element is, the browser should include any padding or border into the calculation (when normally it wouldn’t)

1 Like

Thank you, that makes sense. I was just confused because I thought it should have been set to body to get everything in this particular code. However, that does seem very useful to be able to select everything at once.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.