'How to write less css to create square boxes of different color

I am creating small divs that contain different colors so users can select them. Currently, I have to insert something between the span tag

<span>11</span>

so that the elements appear on the screen. I tried adding content:"" in the CSS but it's not working.

Can someone suggest to me a better way to solve the problem? The issue is when I'm creating a yellow box and then I have to add extra color: "yellow" to make sure the box is just a box with a color(no text in it). There should be a smarter approach right?

    .colorselection {
      width: 5px;
      height: 5px;
      margin-left: 12px;
      content: "";
    }

    .colorselection--yellow {
      background: yellow;
    }

    .colorselection--black {
      background: black;
    }

 .colorselection--red {
      background: red;
    }

<!-- begin snippet: js hide: false console: true babel: false -->
    <span class='colorselection colorselection--black'>11 </span>
    <span class='colorselection colorselection--red '>12 </span>
    <span class='colorselection colorselection--yellow'>13 </span>
htmlcss


Solution 1:[1]

You should use Flexbox.

.flex-box{
    display: flex;
}

.colorselection {
  width: 20px;
  height: 20px;
  margin: 2px;
}

.colorselection--yellow {
  background: yellow;
}

.colorselection--black {
  background: black;
}

.colorselection--red {
  background: red;
}


.colorselection--red {
  background: red;
}
<div class="flex-box">
  <div class="colorselection colorselection--black"></div>
  <div class="colorselection colorselection--red"></div>
  <div class="colorselection colorselection--yellow"></div>
</div>

Solution 2:[2]

There are a few HTML tags working as a block element while span working as an inline element. So you either have to go with a block element HTML tag or simply use display: block or display: inline-block with your span tag.

.colorselection {
  width: 25px;
  height: 25px;
  margin-bottom: 12px;
  display: block;
  background: #ddd; /* fallback color */
}

.colorselection.yellow {
  background: yellow;
}

.colorselection.black {
  background: black;
}

.colorselection.red {
  background: red;
}
<span class="colorselection"></span>
<span class="colorselection yellow">11</span>
<span class="colorselection yellow"></span>
<span class="colorselection black">11</span>
<span class="colorselection red">11</span>
<span class="colorselection red"></span>

Solution 3:[3]

My preferred way of handling this is using CSS variables. You first create a variable that is scoped to the color-selection class, so that it can be overridden by changes within its own scope. Providing a block level display will allow the element to honor height and width dimensions. You could also use inline-flex, flex, or inline-block to achieve the same result.

.color-selection {
  --box-color: transparent;
  width: 25px;
  height: 25px;
  background-color: var(--box-color);
  margin-bottom: 0.5rem;
  display: block;
}

.color-selection.black {
  --box-color: black;
}

.color-selection.yellow {
  --box-color: yellow;
}

.color-selection.red {
  --box-color: red;
}
<span class="color-selection"></span>
<span class="color-selection yellow"></span>
<span class="color-selection red"></span>
<span class="color-selection black"></span>

jsFiddle

Solution 4:[4]

I understand! The solution is quite simple. Use insted a inline-element a block element. If you want that all elements inline then you need additional to wrap the colored divs with display:flex.

.container {
  display: flex;
  gap: 20px;
}

.container div {
  width: 40px;
  height: 40px;   
  border:1px solid black;
}

.container div:nth-child(1) {
  background: red;
}

.container div:nth-child(2) {
  background: green;
}
.container div:nth-child(3) {
  background: yellow;
}
<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mushroomator
Solution 2 Shadow
Solution 3 Andy Hoffman
Solution 4 Maik Lowrey

Related Questions