jQuery Forum

1. Your selectors don't make any sense. For example:

  #my_id .ui-page .ui-content .ui-btn .ui-btn-inner

looks for a .ui-btn-inner that is a child of a .ui-btn that is is child of .ui-content that is a child of a .ui-page that is a child of #my_id. You don't have that in your HTML.

I don't know what you had in mind here.

It's important to learn CSS selectors throughly in order to successfully override JQM CSS. I suggest MDN as a learning resource:

    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

2. Use of !important is almost never necessary, and almost always demonstrates a misunderstanding or lack of knowledge of how to override CSS. I suggest learning the CSS Cascade throughly:

    https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade

3. Many jQuery Mobile widgets add additional HTML structure to the document. You need to understand what HTML was added and how it is styled by the JQM CSS in order to figure out how to override it. The built-in debug and inspection tools in your desktop browser are invaluable for doing so.

4. Most/all jQuery Mobile widgets are styled as children of the page theme. That's how page themes are able to affect all of the widgets on a page. Thus, a successful override will always need to include a theme selector.

5. If you post a link to a page on your site, or make a jsFiddle or Plunkr, we can help you more easily. In fact, I helped somebody with almost exactly the same problem yesterday. This will probably help you. See the Fiddle posted in my last response.

    https://forum.jquery.com/topic/jquery-mobile-1-4-5-min-css-overides-my-style

You probably need to use a selector like:

    .ui-page-theme-b .ui-btn#my_id

6. Irrelevant to this problem, but your line loading icons CSS is redundant and unnecessary. The icons CSS is already included in the main CSS file. The icons CSS file is for use when you are loading icons, theme, and structure CSS files separately. You usually do this when you want to use a theme you downloaded from ThemeRoller, and/or prefer a different format default for icons.

7. The JQM CSS doesn't "override" anything. Your CSS follows it, and needs to override the JQM CSS. If your CSS fails to override, then nodes are styled by the JQM CSS.

Thanks for your help.  I spent another 1/2 day for something that just isn't worth the effort, especially since we're moving away from jquery anyway.

BTW, your fiddle has the !important tag... just sayin.

Regardless of using jQuery or not, it is important to learn CSS selectors and cascade. You will need to know them in order to override ANY CSS framework.