科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>css - Pure HTML Stepper Changing the color of the line - Stack Overflow

    css - Pure HTML Stepper Changing the color of the line - Stack Overflow

    programmeradmin20浏览0评论

    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>

    • html
    • css
    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
    Add a comment  | 

    1 Answer 1

    Reset to default 2

    Looks 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>