Why under div elemnent - it didn't let me nest colors?

Tell us what’s happening:

SO as I have understood the task: I would have to add color(blue, yellow) under the div{} element. = So eventually it didn’t let me to pass it.
Explained to me . I guess i chose it by the guess: this might work or this might not work = so confused.
So the summary of this task ( that has past) :slight_smile:

body {

   background-color: #FFFFFF;

 }

 .blue {

   background-color: blue;

 }

 .yellow {

   background-color: yellow;

 } 

 div {

   display: inline-block;

   height: 100px;

   width: 100px;
}

**Your code so far**
     
```html

<style>
body {
 background-color: #FFFFFF;
}
.blue {
 background-color: blue;
}

.yellow {
 background-color: yellow;
} 

div {
 display: inline-block;
 height: 100px;
 width: 100px;
}
</style>
<div class="blue"></div>
<div class="yellow"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36.

Challenge: Learn about Complementary Colors

Link to the challenge:

@Bond007 You have to use the hex values to change the color not by using the names of colors

I don’t really understand the question but your code is passing for me.

If it is not passing for you make sure you do not have any extension running that changes the look of the page, like a dark mode/reader extension.

If passing the challenge isn’t the issue, please try and rephrase the question.

2 Likes

Yes indeed, it has passed on my side as well. I just want to understand it through.
However, I haven’t entered under
div { } ( like it told me in the scheduled task ) .
I have tried it as well.

This is what was in the instructions so far = The div element with class blue should have a background-color of blue.
How would you write based on the instructions ?
That is my question - if it told me to write code under div element: I would do this instead :
div { .blue {
background-color: blue;
}

.yellow {
background-color: yellow;
}

I’m still having a hard time understanding your question.

If you are asking how the divs are getting the colors applied, it is using the class selector and each of the divs in the HTML has a class on them. That is how the styles are being applied to the div elements.

<style>
/* class selector */
.yellow {
  background-color: yellow;
}
</style>
<!-- class="yellow" will use the .yellow selector -->
<div class="yellow"></div>

Again, I might not have understood your question so I’m sorry if that doesn’t answer your question.


If you are asking why the divs do not get the color you set when using the div element selector, then that is because class selectors have higher specificity than element selectors.

So for the below CSS/HTML the div will be blue and not red.

<style>
/* Both selectors are selecting the div element
 * but the class selector will win and its styles will be applied.
*/

.blue {
  background-color: blue;
}

div {
  background-color: red;
}
</style>

<div class="blue"></div>

That is not a valid selector.