Tips for choosing every <div> within a specific class

I'm trying to create multiple boxes within a class, all with the same background color. I've written code for 6 boxes in the "color-board" class, but when I go to select them, only 1 box is displaying...

Below is the code for the class and how I'm selecting the div:

.color-board{
    background-color: rgba(131, 131, 131, 0.4000000059604645);
    padding: 5px;
    width: 100px;
    height: fit-content;
}

div .color-board {
    width: 30px;
    height: 30px;
    border: 1px black solid;
    border-radius: 1em;
    background-color: white;
}

And this is how I've added the boxes in the HTML file:

<div class="color-board">
                <div></div>
                <div></div>
                <div></div>

                <div></div>
                <div></div>
                <div></div>
            </div>

However, despite adding code for 6 divs, only one box appears. It seems like only one div is being added to the class - why aren't all 6 showing up?

Answer №1

.color-block{
    background-color: rgba(131, 131, 131, 0.4000000059604645);
    padding: 5px;
    width: 100px;
    height: fit-content;
}

.color-block div {
    width: 30px;
    height: 30px;
    border: 1px black solid;
    border-radius: 1em;
    background-color: white;
}
<div class="color-block">
                <div></div>
                <div></div>
                <div></div>

                <div></div>
                <div></div>
                <div></div>
            </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Managing field placement as the table height grows: tips and tricks

I am encountering an issue with my dynamic form. When I click on the add button, a new row is added to the table. However, once there are more than 6 rows added, the table height starts covering the fields. How can I go about setting this so that the field ...

What are the elevated sections in bootstrap?

Having come from Semantic-UI and starting to learn Bootstrap, I must say that despite its widespread popularity, I find Bootstrap a bit lacking compared to what Semantic-UI has to offer in terms of basic stylings. Currently, I am on the lookout for the Bo ...

Guide to interpreting an Angular expression using traditional JavaScript conventions

I have encountered an issue with the Angular app that I am currently working on. It needs to retrieve the Google Analytics ID from Angular in order to pass it to ga('create', 'UA-XXXXX-Y') using standard JavaScript in my index.html. &l ...

Leveraging jQuery Ajax and MySQL to generate dynamic HTML content

I'm in the process of creating a unique photo gallery that utilizes dynamic features. Instead of relying on constant HTML/PHP refreshing for updates, I am incorporating jQuery to handle dynamic MYSQL queries. As a beginner, I've managed to creat ...

Hide the border below the active tab

Could anyone assist me in removing the border below the selected tab? I've attempted multiple approaches without success. I experimented with adding a negative margin to the tab and creating a white border, but as the border I want to conceal is from ...

What is the best way to align a value within CardActions in Material UI?

I'm currently facing an issue with my website design. Here's a snapshot of how it looks: Additionally, here is the code snippet related to the problem: <CardActions> <Typography style={{ fontWeight: 'bold', c ...

Express.js - display the complete information

Trying to display an array of objects (highcharts points) is giving me some trouble. Instead of the actual data, I'm seeing [object Object]. It seems that JSON.stringify() doesn't play well with HTML. util.inspect also doesn't work as expe ...

How can I attach a click event to the left border of a div using jQuery?

I am wondering about a div element <div id="preview"> </div> Can anyone suggest a method to attach a click event specifically to the left border of this div? Your help is greatly appreciated. ...

Removing CSS from an HTML document using Gulp

My Web App is built using Angular and I encountered an issue with Gulp. Every time I add a new custom CSS line to my HTML file and run Gulp, it automatically removes that line from the file. <!--MATERILIZE CORE CSS--> <link h ...

Assess how my website is displayed to an algorithm

A website can be accessed not just by a user through a browser, but also by programs, bots, and crawlers. I have a website hosted on Google App Engine with Python that features non-static HTML pages generated by a Python program by manipulating strings. Th ...

Experiencing difficulties positioning svg text path in the center using CSS on desktop devices

I've looked into other SVG text questions, but I'm struggling to understand my mistake. Currently, I'm working on a live site at and implementing the following code: <svg class="svg-width desktop" style="margin:auto"> <path ...

iframe: retrieve current iframe

Currently, I'm working on a page that contains multiple iframes. Only one iframe is active at a time, and I need to be able to determine which one is currently active. I attempted using document.activeElement.id, but it only returns the correct resul ...

Highlighting a specific list item dynamically without affecting its nested children

While I have come across similar questions, they don't quite address the specific issue I'm facing. My current project involves creating a keyboard-accessible tree widget. My goal is to apply a background color to the selected list item without ...

What is the proper method for delivering Javascript code with rendered HTTP to a client?

During the development process, I made a decision to switch to server-side rendering in order to have better control and take advantage of other benefits. My web application relies heavily on AJAX with no url redirecting, creating a website that dynamicall ...

Rotate the circular border in a clockwise direction when clicked

I have successfully designed a heart icon using SVG that can be filled with color upon clicking. Now, I am looking to add an outer circle animation that rotates clockwise around the heart as it is being created. Currently, the circle only spins in the code ...

Triggering transitionend event once with an added if condition

Currently, I have an application of an if statement that examines whether an element contains a style attribute. In the event that the style attribute is absent, it appends inline styling. Conversely, if the style attribute exists, it is removed. Furthermo ...

Utilize CSS to position an element absolutely above the scrollbar

I'm encountering an issue with CSS absolute positioning, where the element appears above the scrollbar... Here is my code: document.addEventListener("DOMContentLoaded", () => { const h1 = overflow.querySelector("header h1") overflow.ons ...

Prevent Fixed Gridview Header from being affected by browser Scroll-bar using JQuery

Is there a way to make the fixed header responsive to only one scroll bar in JQuery? Specifically, is it possible to have it respond solely to the div's scroll bar and not the browser's scroll bar? I attempted to remove the browser's scroll ...

Update the html() function to include any content that has been typed into a

I have a webpage structured like this: <div id="report_content"> Some information <textarea name="personal"></textarea> <b>Other information</b> <textarea name="work"></textarea> </div> Whe ...

How can we achieve a seamless fade transition effect between images in Ionic 2?

My search for Ionic 2 animations led me to some options, but none of them quite fit what I was looking for. I have a specific animation in mind - a "fade" effect between images. For example, I have a set of 5 images and I want each image to fade into the ...