Choose grandchildren elements within 2 tiers deep of the main div

I am currently working on a code to display 9 boxes in a layout reminiscent of a rubix cube.

#child {
  height: 30px;
  width: 30px;
  float: left;
  margin: 1px;
  background-color: rgba(235, 26, 224, 0.829);
}

#outer {
  position: absolute;
}
    <div id="outer">
        <div id="inner">
            <div id="child"></div>
            <div id="child"></div>
            <div id="child"></div>
        </div>
        <div>
            <div id="child"></div>
            <div id="child"></div>
            <div id="child"></div>
        </div>
        <div>
            <div id="child"></div>
            <div id="child"></div>
            <div id="child"></div>
        </div>
    </div>

I want to style each of the 9 divs with different colors using nth-child, but the browser is treating them as 3 separate elements instead of 9 due to the intermediate div #inner acting as another parent for #child.

#child:nth-child(2) {
    background-color: blue;
}
#child:nth-child(3) {
    background-color: green;
}
#child:nth-child(4) {
    background-color: red;
}
#child:nth-child(5) {
    background-color: yellow;
}
#child:nth-child(6) {
    background-color: black;
}
/*  and so forth for all 9 divs  */

Is there anyone who can assist me in applying unique styles to the #child divs using only CSS?

css

Answer №1

Before you can choose the children, make sure to first select the parent:

.inner div {
  display: inline-block;
  width: 100px;
  height: 100px;
}

/* Styling for different child elements */
.inner:nth-child(1) :nth-child(1) {
  background: black;
}
.inner:nth-child(1) :nth-child(2) {
  background: red;
}
.inner:nth-child(1) :nth-child(3) {
  background: blue;
}

.inner:nth-child(2) :nth-child(1) {
  background: green;
}
.inner:nth-child(2) :nth-child(2) {
  background: orange;
}
.inner:nth-child(2) :nth-child(3) {
  background: yellow;
}

.inner:nth-child(3) :nth-child(1) {
  background: pink;
}
.inner:nth-child(3) :nth-child(2) {
  background: purple;
}
.inner:nth-child(3) :nth-child(3) {
  background: brown;
}
 <div id="outer">
   <div class="inner">
     <div></div>
     <div></div>
     <div></div>
   </div>
   <div class="inner">
     <div></div>
     <div></div>
     <div></div>
   </div>
   <div class="inner">
     <div></div>
     <div></div>
     <div></div>
   </div>
</div>

Answer №2

To differentiate each child, simply assign them individual IDs for color coding purposes Here is an example in HTML:

<div id="outer">
                    <div>
                        <div id="kid1">1</div>
                        <div id="kid2">2</div>
                        <div id="kid3">3</div>
                    </div>
                    <div>
                        <div id="kid4">4</div>
                        <div id="kid5">5</div>
                        <div id="kid6">6</div>
                    </div>
                    <div>
                        <div id="kid7">7</div>
                        <div id="kid8">8</div>
                        <div id="kid9">9</div>
                    </div>
                </div>

For CSS styling, you can use the following properties:

#kid1{
    background-color: red;
    color:red;
}

#kid2{
    background-color: blue;
}

#kid3{
    background-color: green;
}

#kid4{
    background-color: pink;
}

#kid5{
    background-color: yellow;
}

#kid6{
    background-color: white;
}

#kid7{
    background-color: black;
}

#kid8{
    background-color: orange;
}

#kid9{
    background-color: red;
}

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

Challenge with adjusting opacity of background when hovering over a box

I've encountered an issue with the background transparency in the following demo. For some reason, it's not working properly. .figure .caption-mask:hover { background: rgba(0, 0, 0, 0.0); } I'm attempting to remove the opacity f ...

css

Is an image with solid colors placed on top of a see-through banner and

I'm facing an issue where my image, despite being set to 100% opacity, appears partially transparent and shows the banner and background image behind it. How can I resolve this problem? Below is the snippet from my style sheet: #banner{ width:12 ...

csshtmlopacity

How can I position a vertically centered image to the left of a block paragraph using inline styles?

I am faced with the challenge of aligning a 100x100 vertically-centered image to the left of a text block that extends beyond its height. It is important that the text does not wrap underneath the image but stays in a single block on the right side. I must ...

htmlcssimagepositioninginline-styles

No wrapping of columns in Bootstrap 4

I am struggling with preventing the B4 columns from wrapping when resizing the Browser. Check out my code below: <div class="card card-outline-primary"> <div class="card-block"> <form class="row"> <div class="col-xs-4" sty ...

cssbootstrap-4

Positioning custom buttons using CSS and HTML

Need help with centering a button inside a div within a table cell. Is there a way to determine the current size of the hovered-over div and position the button in the middle both vertically and horizontally? https://i.sstatic.net/6NQ9J.jpg I hope you ...

htmlcss

Establish the container with a specific height and enable scrolling functionality

Here is the code snippet I am currently working with: <section class="table"> <div class="table-row"> <div class="table-cell"></div> <div class="table-cell"></div> <div class="table-cell"></div> ...

htmlcss

Framework designed to be compatible with Internet Explorer 7 for seamless

Is there a CSS framework that provides full support for IE7 without any issues? Specifically, something similar to Twitter Bootstrap but with guaranteed rounded corners and properly functioning tabs. I have experienced problems with the Popover plugin sp ...

cssinternet-explorer-7css-frameworks

utilizing checkboxes to select multiple occurrences

I have encountered an issue with my script. While it is functioning correctly for a single set of items, I am struggling to make it work with multiple sets. The checkboxes in the first set function perfectly, but I cannot seem to replicate the same behavio ...

javascriptjqueryhtmlcss

Can a collection of HTML elements be grouped together for synchronized movement?

When the browser size is adjusted or viewed on different devices, it is necessary for a group of related HTML elements to stay together and move as a block. This means that if one element moves to the next "row" due to lack of space, all elements should sh ...

csshtml

Display or conceal nested divs within ng-repeat loop

I set up a div with sub divs to establish a nested grid system. There are three levels altogether: MainDiv - Always Visible SecondDiv - Display or conceal when MainDiv is clicked on ThirdDiv - Display or conceal when SecondDiv is clicked on <div c ...

javascriptcssangularjsionic-framework

What is the proper way to showcase an image within an <li> tag?

So, here's the issue. I initially set up a standard "Home" Button that links to the Home Page of the website, but I felt that the word "Home" was too plain. As a solution, I attempted to replace the word with an icon, but unfortunately, it's not ...

htmlcss

"Interactive CSS Elements: Enhancing User Experience Through

After stumbling upon a fiddle example that utilizes :hover as a selector to hide a div until a certain area is moused over, I've been searching for a way to change it to trigger on a click instead. Anyone have any suggestions? http://jsfiddle.net/rak ...

htmlcss

Opacity property not functioning properly in Internet Explorer 8

There seems to be an issue with adjusting the background opacity. style.css .divOpacity1 { position: absolute; z-index: 1; height: 2000px; width: 100%; background-color: #FFFFFF; top: 2px; left: 0px; opacity: 0.6; ...

cssinternet-explorer-8

HTML files do not inherit from other HTML files

I am venturing into the world of VSCode for the first time to create a web application. Starting with the basics, I have an index.html page with a simple "Hello, world!" message. Additionally, I have developed a layout.html file that contains code for a na ...

pythonhtmlcssdjango

encase the text within a div to create a visual flow

Is there a way to make div 2 encircle div 1? Both divs have text inside. +---++------------------+ | || | | 1 || | | || 2 | +---+| | +---- | | | ...

htmlcsstext

The Bootstrap row snag causing text display issues

There seems to be a glitch when the first column has more text than the one next to it. Check out the screenshot provided for reference. Any suggestions on how to fix this issue in Bootstrap? https://i.sstatic.net/fSq68.png Live Demo: https://jsfiddle. ...

htmlcsstwitter-bootstrap

The Jqueryui image link is not displaying the image despite no error being reported

Can anyone help me figure out what I'm missing? I'm currently working with ASP.NET MVC 5 and have downloaded the JqueryUI combined via Nuget package. Despite no error references for css/js files, the close button is still not showing in the ima ...

javascriptjquerycssasp.net-mvcjquery-ui

Tips for preventing a React component from scrolling beyond the top of the page

I am looking to achieve a specific behavior with one of my react components when a user scrolls down a page. I want the component to reach the top of the page and stay there without moving any further up. Here is an Imgur link to the 'intranet' ...

javascriptcssreactjsflexbox

The ball refuses to fall into the designated boxes

I designed a basic webpage featuring 3 boxes that, when clicked on, trigger the dropping of a ball into them. Below is the code I used: <!DOCTYPE html> <html> <head> <script type="text/javascript"> function popup (n) { ...

javascripthtmlcss

Having an absolute element can lead to overflow causing a scroll

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .wrap { ...

htmlcsscss-positionoverflow