Issue
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>
Answered By - Evan Jones
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.