Hello I have this CSS code:

.bar .progress-line.html span {
  width: 78%;
}

How can I change the width from javascript? I have tried many ways like

$(".bar .progress-line.html span").css("width", "10%");

But nothing is found.

I also tried this:

$(".bar .progress-line.html span").css("width", "10%");

but nothing happens.

Original example: https://codepen.io/Prashal9499/pen/oNWzPqR

CodePudding user response：

If you're trying to change the text, see the link in my comment to your original post.

You can do it manually like this:

New class:

.progress-line.html span.change::after {
    content: "55%";
}

jQuery

$(".progress-line.html span").css("width", "55%");
$(".progress-line.html span").addClass("change");

CodePudding user response：

You have to set a comma in between the class names while targeting multiple elements. Here is an updated version of what you have done so far.

$(".bar, .progress-line, .html, span").css("width", "10%");