0

I am using this stackoverflow answer to dynamically style an element to have different ::before styling using jquery. I add a class (.special) to an element (#town-icon) which should then style the element with the styles of the new class (.special). The class does get added to the element but the css selector must be too weak because the styling of the element chooses to use the same styling that it already had.

How can I make my selector stronger?

Here is my css:

.select .arr 
  background #fff
  bottom 5px
  position absolute
  right 5px
  top 5px
  width 50px
  pointer-events none

.select .arr:before { //the styling it initially has
  content ''
  position absolute
  top 50%
  right 24px
  margin-top -5px
  pointer-events none
  border-top 10px solid brand-colour
  border-left 10px solid transparent
  border-right 10px solid transparent
}

.special:before { //the styling I want to make it have
  content ''
  position absolute
  top 50%
  right 24px
  margin-top -5px
  pointer-events none
  border-top 10px solid transparent
  border-left 10px solid transparent
  border-right 10px solid transparent
}

.select .arr:after 
  content ''
  position absolute
  top 50%
  right 28px
  margin-top -5px
  pointer-events none
  border-top 6px solid #fff
  border-left 6px solid transparent
  border-right 6px solid transparent
<span id="town-icon" class="arr special" style="background:

Here is my jquery:

$("#town-icon").addClass('special');
            $("#town-icon").css("background", "url(assets/gifs/ajax-loader.gif) no-repeat");
            $("#town-icon").css("background-size", "100%");
Community
  • 1
  • 1
BeniaminoBaggins
  • 11,202
  • 41
  • 152
  • 287

1 Answers1

2

just add the ID #town-icon to it like this:

#town-icon.special::before { /* your code */ }

You can test your CSS specificity here

dippas
  • 58,591
  • 15
  • 114
  • 126