CODEWITHSUNDEEP
jquerycssjquery-ui
ehretf
ehretf

Reputation: 163

Is there a way to have my class overwrite the jQuery theme's class?

I'm quite new to jQuery and have an issue with theme overwrite a CSS class.

Here is my HTML code:

<head>
  .clicked
  {
    text-decoration: line-through !important;
    color: #000000; 
  }
</head>
...
<div data-role="collapsible" data-theme="b" data-content-theme="b" data-collapsed icon="arrow-r" data-expanded-icon="arrow-d">
  <ul data-role="listview" id="Key"></ul>
</div>

Here is my JS:

function WriteQuote(item) {
        $("#"+item).addClass(function(index, currentClass) {    
            if (currentClass.lastIndexOf("clicked") >= 0) {
                $("#"+item).removeClass("clicked");
                return; 
            }
            return "clicked";
        });
    }

I plan to use toggleClass so this code is only for testing purpose. When looking into Firebug, I see that a.ui-link-inherit is prefered and apply:

a.ui-link-inherit {
    text-decoration: none !important;
}
.clicked {
    color: #000000;
    text-decoration: line-through !important;
}

Is there a way to have my class overwrite the jQuery theme's class? My goal is to toggle "line-through" when user click on the given listview element.

Upvotes: 2

Views: 122

Answers (1)

JJJ
JJJ

Reputation: 33163

The theme's CSS rule applies because it's more specific than yours. The solution is to add even more specificity to your rule.

a.ui-link-inherit.clicked {
    color: #000000;
    text-decoration: line-through !important;
}

Demo: http://jsfiddle.net/wryE5/

Upvotes: 5

Related Questions