CODEWITHSUNDEEP
css
MaronFive
MaronFive

Reputation: 39

Css: change only first div

I have something like this: 

.first {
    background: yellow;    
}
<div class="first">
 1
  <div class="second">
   2
    <div class="three">
     3
    </div>
  </div>
</div>

and i want to change color for first class so i want to see "1" for example with yellow background. Is it possible to make it in css?

Upvotes: 2

Views: 1029

Answers (4)

Jack
Jack

Reputation: 9388

Another answer mentioned cascade, however this isn't really a cascading issue. You've applied a background to .first, which is the parent element. Your nested, child elements (.second and .three) are not inheriting a background-color; they're just showing the background-color of .first.

Think about it like this:

|-----------------------
| FIRST                |
| |==================| |
| | SECOND           | |
| | |**************| | |
| | | THIRD        | | |
| | |**************| | |
| |==================| |
|----------------------|

In the beautiful ascii diagram above, FIRST has a YELLOW background color. All the children inside it (taking up space) are showing that background color because they have no background color.

Solution:

The way to avoid .second and .third from "inheriting" the color (again, it's actually just showing the background-color of .first - not inheriting) is to specify a background-color for those divs as provided by other answer. However, if you apply a margin, you'll notice an issue (the yellow will peek through on the edges where the margins have been applied). You'll also notice a similar issue with the nested .three element (showing second's background color).

There is another option, which is to take .second and .third out of the DOM-flow, using position: absolute. If you're new to CSS, I don't recommend this without first understanding how positioning works (as there are other consequences, such as how height is calculated), however it will have the desired effect.

Anyway, good luck & happy learnings.

Demos:

Demo of background-color on second and third, but with margin applied.

div {
    border: 1px solid red;
}
.first {
    background: yellow;    
}
.second, 
.three { 
    background-color: blue; 
    margin: 5px; 
}
.three {
    background-color: white;
}
<div class="first">
 1
  <div class="second">
   2
    <div class="three">
     3
    </div>
  </div>
</div>

Demo of removing from DOM flow using position: absolute;

.first {
    background: yellow;
}
.second {
    position: absolute;
    background-color: blue;
    margin-top: 10px;
}
<div class="first">
 1<br />1<br />
  <div class="second">
   2
    <div class="three">
     3
    </div>
  </div>
</div>

Upvotes: 1

Gianfranco Fertino
Gianfranco Fertino

Reputation: 632

CSS stands for Cascading Style Sheets. It's called cascading because it cascades, it flows from the top to the bottom. Whatever style you apply to the top element will be flowed down to its child element, its grandchild, and so on, just like waterfall.

What you want to do is basically prevent the cascading to happen from first div to the second and third div. So what you can do is to apply a universal background-color (white) to all the div. After that (the order is important), you can apply a specific background-color to the first div. This will result in the first div having yellow background-color and the other div will override that with white background-color.

Here is the end result

div {
  background-color: white;
}
div.first {
  background-color: yellow;
}
<div class="first">
  1
  <div class="second">
    2
    <div class="three">
      3
    </div>
  </div>
</div>

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 273649

One idea is to partially color the first div so that you only cover the content you want (here the 1). For this you can consider linear-gradient where you can easily adjust the size:

.first {
  line-height: 1.2em;
  background: linear-gradient(yellow, yellow) top/100% 1.2em no-repeat;
}

body {
  background: linear-gradient(to right, pink, purple);
}
<div class="first">
  1
  <div class="second">
    2
    <div class="three">
      3
    </div>
  </div>
</div>

<div class="first" style="font-size:30px;">
  1
  <div class="second">
    2
    <div class="three">
      3
    </div>
  </div>
</div>

You simply need to set the height of the gradient to be equal to the height of the linebox (defined by line-height) and you will color only one line.

Upvotes: 0

Wimanicesir
Wimanicesir

Reputation: 5122

Maybe too easy? I don't know what is allowed..

.first {
    background: yellow;    
}
.second {
    background: white;
}
<div class="first">
 1
  <div class="second">
   2
    <div class="three">
     3
    </div>
  </div>
</div>

Upvotes: 0

Related Questions