Customizing jQuery theme, but some CSS is not being applied

Question

I am customizing a jQuery theme to add custom icons for some buttons. Here is a jsfiddle - http://jsfiddle.net/Apeksha82/nctPc/2 (My custom CSS definitions are at the bottom)

What I have done is taken some CSS definitions which were already there, and made them more specific like so:

.black-tie .lnkHeader .ui-state-hover .ui-icon, .black-tie .lnkHeader .ui-state-focus .ui-icon {
background-image: url("http://jqueryui.com/resources/images/themeroller/st-stephens.jpg");

}

"lnkHeader" is a class defined by me. Some of my custom styles are not being applied and I cannot figure out why. e.g.

.black-tie .lnkHeader .ui-icon .menu-home { background-position: 50px 50px; }

I have made sure the button has all these classes either assigned to itself or to its parents. I have tried switching around the order of the classes in the CSS definition file. If I remove "lnkHeader" from the above definitions, the CSS for hover image works, but background-position and margin still does not.

.black-tie .lnkHeader .ui-icon .menu-newPage { background-position: 10px 10px; } .black-tie .lnkHeader .ui-button-text-icon-primary .ui-icon, .black-tie .lnkHeader .ui-button-text-icons .ui-icon { margin-top: -14px; }

I need lnkHeader to be part of the definition so that my customizations do not affect other buttons.

I believe I have considered the two factors that affect CSS - inheritance & specificity, in the way I have defined my custom CSS. But obviously I am missing something. Please help. TIA!

blgt · Accepted Answer · 2014-07-11 20:31:19Z

2

In your html, you have this item:

<div class="black-tie"><a class="lnkHeader">
<span class="ui-button-icon-primary ui-icon menu-home"></span>
</a></div>

What it looks like you need to select this <span> is

.black-tie .lnkHeader .ui-icon.menu-home { ... }

(with no space between .ui-icon and .menu-home)

And then similarly for the other elements:

.black-tie .lnkHeader .ui-icon.menu-newPage { ... }
.black-tie .lnkHeader.ui-button-text-icon-primary .ui-icon { ... }

I don't see anything with the class .ui-button-text-icons in the fiddle, so can't say what the last selector's supposed to match.

Whitespace between selectors means children; eg. .ui-icon .menu-home means all tags with class=menu-home that are children (direct or descended) of tags with class=ui-icon
No whitespace means same DOM element and is equivalent to a logic AND; e.g. .ui-icon.menu-home means all tags which have both classes: class="ui-icon menu-home";

You can also combine different types of selectors this way. For example, the following selector: div.my-class[data=my-data] would only match <div class=my-class data=my-data>
Direct children are selected with the greater than sign -- and with this, whitespace doesn't matter; eg. .lnkHeader > .ui-icon means all tags with class=ui-icon which are one level below tags with class=lnkHeader

You can find a full reference here: http://www.w3schools.com/cssref/css_selectors.asp

edited Jul 11, 2014 at 20:31

answered Jul 11, 2014 at 17:21

blgt

8,2151 gold badge27 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mahogany Over a year ago

Thanks! That helped me get the background-position applied. Still trying to get the other attributes to work. The class .ui-button-text-icons is automatically applied as a result of the call to jQuery button widget.

Mahogany Over a year ago

Update: I have been able to resolve all issues using the same technique, of removing the space between two CSS class names. Thanks a bunch for that! Does removing the space imply "direct child"? I would appreciate it if you could elaborate on why it works the way it does.

blgt Over a year ago

@Apeksha Edited into answer; also included a link to the w3schools page

Collectives™ on Stack Overflow

Customizing jQuery theme, but some CSS is not being applied

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related