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

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?

htmlcssshapessasanalytics


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions