I have a pure html stepper. It works if the 'active' class is in the 2nd, 3rd and so on element. But I have a problem if the 'active' class is only in the 1st class.
How do I make it if the 'active' class is in the first class, then no line is colored? If only the first stepper has active, then no line should be changing color, only the color before the stepper with the active class should be colored.
Below is the screenshot:
:root {
--circle-size: clamp(1.5rem, 5vw, 3rem);
--spacing: clamp(0.25rem, 2vw, 0.5rem);
}
.stepper {
display: flex;
}
.stepper-item {
display: flex;
flex-direction: column;
flex: 1;
text-align: center;
&::before {
--size: 3rem;
content: "";
display: block;
width: var(--circle-size);
height: var(--circle-size);
border-radius: 50%;
border: 0.4rem solid green;
background-color: transparent;
opacity: 0.5;
margin: 0 auto 1rem;
}
&:not(:last-child) {
&::after {
content: "";
position: relative;
top: calc(var(--circle-size) / 2);
width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
left: calc(50% + calc(var(--circle-size) / 2 + var(--spacing)));
height: 2px;
background-color: #448b62;
order: -1;
}
}
}
.stepper-title {
font-weight: bold;
font-size: clamp(1rem, 4vw, 1.25rem);
margin-bottom: 0.5rem;
color: #448b62;
}
.stepper-desc {
color: grey;
font-size: clamp(0.85rem, 2vw, 1rem);
padding-left: var(--spacing);
padding-right: var(--spacing);
}
/*** Non-demo CSS ***/
.wrapper {
max-width: 100%;
margin: 2rem auto 0;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
.stepper-item::before {
--size: 3rem;
content: attr(data-step);
/* Use a custom attribute for step number */
display: flex;
align-items: center;
justify-content: center;
width: var(--circle-size);
height: var(--circle-size);
border-radius: 50%;
border: 4% solid rgb(0, 64, 255);
opacity: 0.5;
margin: 0 auto 1rem;
font-weight: bold;
font-size: 1.25rem;
color: #448b62;
/* Font customization */
font-family: 'Poppins', sans-serif;
/* Change to any desired font */
font-weight: 700;
/* Bold */
font-size: 1.5rem;
/* Adjust size */
letter-spacing: 0.05rem;
/* Optional spacing */
}
.stepper-item.active::before {
opacity: 1;
border: 0.4rem solid red;
color: red;
}
.stepper-item.active .stepper-title {
color: red;
}
.stepper-item.active:is(:first-child):after {
background-color: red;
opacity: 1;
}
/* Style the line between consecutive active items */
.stepper-item.active+.active:before {
opacity: 1;
}
.stepper-item:not(:last-child)::after {
content: "";
position: relative;
top: calc(var(--circle-size) / 2);
width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
left: calc(50% + calc(var(--circle-size) / 2 + var(--spacing)));
height: 2px;
background-color: #448b62;
opacity: 0.5;
order: -1;
}
/* Color line red only when current item is active AND next item is active */
.stepper-item:not(:first-child).active:not(:last-child):has(+ .active)::after {
background-color: red;
opacity: 1;
}
/* Special case for first item - only color if next is active */
.stepper-item:first-child.active:has(+ .active)::after {
background-color: rgb(255, 0, 0);
opacity: 1;
}
<div class="wrapper">
<ol class="stepper">
<li class="stepper-item active" data-step="1">
<h3 class="stepper-title">Step 1</h3>
<p class="stepper-desc">Authentication started</p>
</li>
<li class="stepper-item active" data-step="2">
<h3 class="stepper-title">Step 2</h3>
<p class="stepper-desc">Authentication successful</p>
</li>
<li class="stepper-item active" data-step="3">
<h3 class="stepper-title">Step 3</h3>
<p class="stepper-desc">Authorization complete</p>
</li>
<li class="stepper-item" data-step="4">
<h3 class="stepper-title">Step 4</h3>
<p class="stepper-desc">Finalizing process</p>
</li>
<li class="stepper-item" data-step="5">
<h3 class="stepper-title">Step 5</h3>
<p class="stepper-desc">Process complete</p>
</li>
</ol>
</div>
I have a pure html stepper. It works if the 'active' class is in the 2nd, 3rd and so on element. But I have a problem if the 'active' class is only in the 1st class.
How do I make it if the 'active' class is in the first class, then no line is colored? If only the first stepper has active, then no line should be changing color, only the color before the stepper with the active class should be colored.
Below is the screenshot:
:root {
--circle-size: clamp(1.5rem, 5vw, 3rem);
--spacing: clamp(0.25rem, 2vw, 0.5rem);
}
.stepper {
display: flex;
}
.stepper-item {
display: flex;
flex-direction: column;
flex: 1;
text-align: center;
&::before {
--size: 3rem;
content: "";
display: block;
width: var(--circle-size);
height: var(--circle-size);
border-radius: 50%;
border: 0.4rem solid green;
background-color: transparent;
opacity: 0.5;
margin: 0 auto 1rem;
}
&:not(:last-child) {
&::after {
content: "";
position: relative;
top: calc(var(--circle-size) / 2);
width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
left: calc(50% + calc(var(--circle-size) / 2 + var(--spacing)));
height: 2px;
background-color: #448b62;
order: -1;
}
}
}
.stepper-title {
font-weight: bold;
font-size: clamp(1rem, 4vw, 1.25rem);
margin-bottom: 0.5rem;
color: #448b62;
}
.stepper-desc {
color: grey;
font-size: clamp(0.85rem, 2vw, 1rem);
padding-left: var(--spacing);
padding-right: var(--spacing);
}
/*** Non-demo CSS ***/
.wrapper {
max-width: 100%;
margin: 2rem auto 0;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
.stepper-item::before {
--size: 3rem;
content: attr(data-step);
/* Use a custom attribute for step number */
display: flex;
align-items: center;
justify-content: center;
width: var(--circle-size);
height: var(--circle-size);
border-radius: 50%;
border: 4% solid rgb(0, 64, 255);
opacity: 0.5;
margin: 0 auto 1rem;
font-weight: bold;
font-size: 1.25rem;
color: #448b62;
/* Font customization */
font-family: 'Poppins', sans-serif;
/* Change to any desired font */
font-weight: 700;
/* Bold */
font-size: 1.5rem;
/* Adjust size */
letter-spacing: 0.05rem;
/* Optional spacing */
}
.stepper-item.active::before {
opacity: 1;
border: 0.4rem solid red;
color: red;
}
.stepper-item.active .stepper-title {
color: red;
}
.stepper-item.active:is(:first-child):after {
background-color: red;
opacity: 1;
}
/* Style the line between consecutive active items */
.stepper-item.active+.active:before {
opacity: 1;
}
.stepper-item:not(:last-child)::after {
content: "";
position: relative;
top: calc(var(--circle-size) / 2);
width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
left: calc(50% + calc(var(--circle-size) / 2 + var(--spacing)));
height: 2px;
background-color: #448b62;
opacity: 0.5;
order: -1;
}
/* Color line red only when current item is active AND next item is active */
.stepper-item:not(:first-child).active:not(:last-child):has(+ .active)::after {
background-color: red;
opacity: 1;
}
/* Special case for first item - only color if next is active */
.stepper-item:first-child.active:has(+ .active)::after {
background-color: rgb(255, 0, 0);
opacity: 1;
}
<div class="wrapper">
<ol class="stepper">
<li class="stepper-item active" data-step="1">
<h3 class="stepper-title">Step 1</h3>
<p class="stepper-desc">Authentication started</p>
</li>
<li class="stepper-item active" data-step="2">
<h3 class="stepper-title">Step 2</h3>
<p class="stepper-desc">Authentication successful</p>
</li>
<li class="stepper-item active" data-step="3">
<h3 class="stepper-title">Step 3</h3>
<p class="stepper-desc">Authorization complete</p>
</li>
<li class="stepper-item" data-step="4">
<h3 class="stepper-title">Step 4</h3>
<p class="stepper-desc">Finalizing process</p>
</li>
<li class="stepper-item" data-step="5">
<h3 class="stepper-title">Step 5</h3>
<p class="stepper-desc">Process complete</p>
</li>
</ol>
</div>
Share
Improve this question
edited Jan 18 at 19:55
j08691
208k32 gold badges269 silver badges280 bronze badges
asked Jan 18 at 14:03
Danish GhaziDanish Ghazi
816 bronze badges
1 Answer
Reset to default 2Looks to me that all you need to do is comment out or remove this CSS:
/* .stepper-item.active:is(:first-child):after {
background-color: red;
opacity: 1;
} */
Full snippet demonstrating that this solves the problem is below.
:root {
--circle-size: clamp(1.5rem, 5vw, 3rem);
--spacing: clamp(0.25rem, 2vw, 0.5rem);
}
.stepper {
display: flex;
}
.stepper-item {
display: flex;
flex-direction: column;
flex: 1;
text-align: center;
&::before {
--size: 3rem;
content: "";
display: block;
width: var(--circle-size);
height: var(--circle-size);
border-radius: 50%;
border: 0.4rem solid green;
background-color: transparent;
opacity: 0.5;
margin: 0 auto 1rem;
}
&:not(:last-child) {
&::after {
content: "";
position: relative;
top: calc(var(--circle-size) / 2);
width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
left: calc(50% + calc(var(--circle-size) / 2 + var(--spacing)));
height: 2px;
background-color: #448b62;
order: -1;
}
}
}
.stepper-title {
font-weight: bold;
font-size: clamp(1rem, 4vw, 1.25rem);
margin-bottom: 0.5rem;
color: #448b62;
}
.stepper-desc {
color: grey;
font-size: clamp(0.85rem, 2vw, 1rem);
padding-left: var(--spacing);
padding-right: var(--spacing);
}
/*** Non-demo CSS ***/
.wrapper {
max-width: 100%;
margin: 2rem auto 0;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
.stepper-item::before {
--size: 3rem;
content: attr(data-step); /* Use a custom attribute for step number */
display: flex;
align-items: center;
justify-content: center;
width: var(--circle-size);
height: var(--circle-size);
border-radius: 50%;
border: 4% solid rgb(0, 64, 255);
opacity: 0.5;
margin: 0 auto 1rem;
font-weight: bold;
font-size: 1.25rem;
color: #448b62;
/* Font customization */
font-family: 'Poppins', sans-serif; /* Change to any desired font */
font-weight: 700; /* Bold */
font-size: 1.5rem; /* Adjust size */
letter-spacing: 0.05rem; /* Optional spacing */
}
.stepper-item.active::before {
opacity: 1;
border: 0.4rem solid red;
color: red;
}
.stepper-item.active .stepper-title {
color: red;
}
/* .stepper-item.active:is(:first-child):after {
background-color: red;
opacity: 1;
} */
/* Style the line between consecutive active items */
.stepper-item.active + .active:before {
opacity: 1;
}
.stepper-item:not(:last-child)::after {
content: "";
position: relative;
top: calc(var(--circle-size) / 2);
width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
left: calc(50% + calc(var(--circle-size) / 2 + var(--spacing)));
height: 2px;
background-color: #448b62;
opacity: 0.5;
order: -1;
}
/* Color line red only when current item is active AND next item is active */
.stepper-item:not(:first-child).active:not(:last-child):has(+ .active)::after {
background-color: red;
opacity: 1;
}
/* Special case for first item - only color if next is active */
.stepper-item:first-child.active:has(+ .active)::after {
background-color: rgb(255, 0, 0);
opacity: 1;
}
<div class="wrapper">
<ol class="stepper">
<li class="stepper-item active" data-step="1">
<h3 class="stepper-title">Step 1</h3>
<p class="stepper-desc">Authentication started</p>
</li>
<li class="stepper-item" data-step="2">
<h3 class="stepper-title">Step 2</h3>
<p class="stepper-desc">Authentication successful</p>
</li>
<li class="stepper-item" data-step="3">
<h3 class="stepper-title">Step 3</h3>
<p class="stepper-desc">Authorization complete</p>
</li>
<li class="stepper-item" data-step="4">
<h3 class="stepper-title">Step 4</h3>
<p class="stepper-desc">Finalizing process</p>
</li>
<li class="stepper-item" data-step="5">
<h3 class="stepper-title">Step 5</h3>
<p class="stepper-desc">Process complete</p>
</li>
</ol>
</div>