css() not working with li:before selector

Question

I have CSS as shown below, Let say if I want to change the border color using jquery for li before it doesn't work for me. Can someone help with this issue. How can I change the color for that css style using Jquery.

.multi-steps > li:before {     
  border-color: #ffb22b;
}

$('.multi-steps > li:before').css({
  'border-color': '#007bff'
})

please add your html code also. – doğukan Jan 30 '19 at 11:08 — doğukan, Jan 30 '19 at 11:08
check this : https://stackoverflow.com/a/49618941/8620333 – Temani Afif Jan 30 '19 at 11:10 — Temani Afif, Jan 30 '19 at 11:10

score 2 · Accepted Answer · answered Jan 30 '19 at 11:10

2

jQuery cannot amend pseudo elements as they are not part of the DOM.

To work around this, have jQuery add/remove a class on the element and tie the :before CSS rule to that class. For example:

.multi-steps > li:before {     
  border-color: #ffb22b;
}
.multi-steps > li.foo:before {
  border-color: #007bff;
}

$('.multi-steps > li').addClass('foo');

answered Jan 30 '19 at 11:10

Rory McCrossan

331,213
40
305
339

If I want to change the color using Jquery then what is the best way?. $('.multi-steps > li.foo').css({'border-color': '#007bff'}); like this? – Infy Jan 30 '19 at 12:36
No, use the CSS class exactly as in the answer above. You cannot use css() with a psuedo element selector – Rory McCrossan Jan 30 '19 at 12:38

css() not working with li:before selector

1 Answers1