How to differentiate between two class of same name in different css on same page.

Question

on my asp.net page i am linking 2 css files which are used by 2 different controls but the main problem is that one class name is same in both so they are conflicting with each other, please tell me how can i distinguish between them.

Both are of jquery, 1 is slider control and another one is time picker control. and they are conflicting on their background image as i want to change background image of slider control's scroller. Please give me solution..

code for using slider :

    <div id="time1" style="float: left; width: 100px" >
                             <code>$('#time1 input').ptTimeSelect({ popupImage: 
  '<img  alt="Select" src="../images/icon_clock_2.gif"
                                style="border-right: 0px; border-top: 0px;    border-left: 0px; border-bottom: 0px" />'
                                }); </code>
                            <div >
                                <input id="s2Time1" runat="server" name="s2Time1" readonly="readonly" style="width: 60px" />
                            </div>
                        </div>

below code is for time picker :

 <div id="time2" style="float: left; width: 100px">
                            <code>$('#time2 input').ptTimeSelect({ popupImage: '<img alt="Select" src="../images/icon_clock_2.gif"
                                style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" />'
                                }); </code>
                            <div>
                                <input id="s2Time2" runat="server" name="s2Time2" readonly="readonly" style="width: 60px" /></div>
                        </div>

Answer 1

You could add a second class to one of the controls.

<div class = "first_class second_class">
<div class = "first_class">

Then do something like:

first_class {
   attributes
}

second_class {
   more attributes that may or may not write over first_class attributes
}

Make sense?

Answer 2

Put a <div> around the slider part, give it a class (class='myslider') and prefix the slider css with .myname.

Do the same with the date picker part, <div class='myDatePicker'> , and prefix the css of de date picker jQuery with .mYDatePicker

That should solve the problem.

Answer 3

NOTE: This answer is a combination of my comments to formulate a solution that coincides with and contributes to another solution posted here.

First of all, quick question: why do you have <code> instead of <script> around the javascript/jquery in your sample?

Edelcom's answer is following the right approach, but he didn't provide a code sample. Here's how I would approach it, using a method that is basically identical to his:

---

Slider Code

<div id="slider"><div id="time1" style="float: left; width: 100px">
<script type="text/javascript">$('#slider #time1 input').ptTimeSelect({ popupImage: '<img alt="Select" src="../images/icon_clock_2.gif" style="border-right: 0px; border-top: 0px;    border-left: 0px; border-bottom: 0px" />'
}); </script>
<input id="s2Time1" runat="server" name="s2Time1" readonly="readonly" style="width: 60px" />
</div></div>

Here, I've surrounded this whole element with another div (id = "slider"). Thus, my jQuery code is: $('#slider #time1 input') ...

---

Date Picker Code

<div id="datepick"><div id="time2" style="float: left; width: 100px">
<script type="text/javascript">$('#datepick #time2 input').ptTimeSelect({ popupImage: '<img alt="Select" src="../images/icon_clock_2.gif" style="border-right: 0px; border-top: 0px;    border-left: 0px; border-bottom: 0px" />'
}); </script>
<input id="s2Time2" runat="server" name="s2Time2" readonly="readonly" style="width: 60px" />
</div></div>

I've done the same thing here, except the big div is now called "datepick".

That's basically how this can be done. You can, of course, select those datepickers directly by id through the selector without having to create other divs or whatnot, as you've given them distinct names.