CODEWITHSUNDEEP
javascriptjquerycss
Ameer hamza
Ameer hamza

Reputation: 41

Using .css() on pseudo elements with jQuery

var navIcon1 = $('.nav-toggle span, .nav-toggle span:before, .nav-toggle span:after');

if (iconPos >= audPos && iconPos < eventPos) {
  navIcon.css('color', 'black');
  navIcon1.css('color', 'black');

}

I am trying to change the color of bootstrap navigation. I tried this code but it is not working for me.
Can I change the CSS of pseudo elements with jQuery?

Upvotes: 3

Views: 89

Answers (2)

Frank
Frank

Reputation: 634

The only one of the elements you can modify using this method is .nav-toggle span, you could do:

if (iconPos >= audPos && iconPos < eventPos) {
  $(".nav-toggle span").css('color', 'black');
}

As to the other ones: :before, :after etc. are pseudo elements - jQuery can't access them the way you are trying to do it.

Adding a class containing your preferred color to the elements you want to change would be a way of achieving what you want to achieve.

Upvotes: 2

Vlad Pintea
Vlad Pintea

Reputation: 853

Rather than adding css in your if, add a clas to "nav-toggle" for the given position and add your color for that class

Upvotes: 4

Related Questions