I’m trying to manipulate two different rectangles with CSS in two different ways.
Let’s say I have:
.header {
background-color: #000000;
.rectangle {
height: 2px;
width: 100%;
<body>
<div class="header">
<div class="rectangle"></div>
<h1>Head</h1>
</div>
<div class="rectangle"></div>
</body>
Can I alter the top rectangle without altering the bottom one? E.g is it possible to change the size of the top rectangle and not the bottom one?
>Solution :
Yes, you can do it like this. Target the rectangle class that is inside of the header by using .header .rectangle. I hope this helps!
.rectangle {
height: 10px;
background: red;
}
.header .rectangle {
background: blue;
}<body>
<div class="header">
<div class="rectangle"></div>
<h1>Head</h1>
</div>
<div class="rectangle"></div>
</body>