Is it possible to differentiate between two of the same shape in HTML and CSS?-CodePudding

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 >
    <div ></div>
    <h1>Head</h1>
</div>

    <div ></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?

CodePudding user response：

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 >
    <div ></div>
    <h1>Head</h1>
  </div>

  <div ></div>

</body>