Making CSS Specific to One Div

So I've been editing the CSS from the selectMenu UI plugin for jQuery.

I have a separate file with all my CSS in it. I'd like to always include it on each page request but have it ONLY apply to my select menus, not my other jquery UI elements.

How do I accomplish this?

I've put a class called "myClass" on the container for the link and the wrapper span that contains the UL. Here's an example.

  .ui-state-default,
  .ui-widget-content .ui-state-default,
  .ui-widget-header .ui-state-default {
    border: 1px solid #DDDDDD;
    color: #a8a8a8;
    font-weight: bold;
}
开发者_运维知识库

What do I add to this class so it only applies to elements underneath the "myClass" div?

You can specify hierarchy by either listing it in order of presence or using the arrow for direct inheritance. e.g.

.myClass .foo {
}

<div class="foo">          <!-- WILL NOT apply to this "foo" -->
  <div class="myClass">
    <div class="foo">      <!-- WILL apply to this class, it's beneath .myClass -->

Says it will only apply to elements with class "foo" that fall below elements with class "myClass".

.myClass > .foo {
}

<div class="myClass">
  <div class="foo">      <!-- WILL apply to this class, it's DIRECTLY beneath .myClass -->
  <div class="bar">
    <div class="foo">      <!-- WILL NOT apply to this class (not directly beneath .myClass) -->

(Note the >) Means it will only apply to an element classed "Foo" DIRECTLY below an element classed "myClass".

For further reading, see the w3 spec. on CSS selectors

.myClass .ui-state-default, .myClass .ui-widget-content,
.myClass .ui-state-default, .myClass .ui-widget-header,
.myClass .ui-state-default {
    border: 1px solid #DDDDDD;
    color: #a8a8a8;
    font-weight: bold;
}

Chain them like:

.myclass .ui-state-default,
  .myclass .ui-widget-content .ui-state-default,
  .myclass .ui-widget-header .ui-state-default {
     border: 1px solid #DDDDDD;
     color: #a8a8a8;
     font-weight: bold;
}

If you want to chain them by id of the div:

#myDiv .ui-state-default,
  #myDiv .ui-widget-content .ui-state-default,
  #myDiv .ui-widget-header .ui-state-default {
     border: 1px solid #DDDDDD;
     color: #a8a8a8;
     font-weight: bold;
}

You can use the following CSS selector to select elements under your myClass class...

.myClass .childClassName { }

I'm a little unclear exactly what you're asking, but hopefully that will help.