jQuery UI widget CSS inhertiance issues - css

Question

I have a couple different types of UI widgets on my page. There is a class that is common between all of them .ui-widget-content. I need to style this class differently for each one, so I have assigned unique ids or classes to the HTML elements. This worked ok for one type of widget (dialog where I can use the dialogClass option in the JS to assign classes), but the other type of widget (slider) will still only inherit styles from .ui-widget-content even when I specify a style for #id .ui-widget-content to get at the specific element of interest. I'm kind of at a loss on how to override the original style at this point.
HTML:
<div id="opacitySlide" class="slider">
<div id="opacityVal" class="ui-slider-handle"></div>
</div>
<div id="habClassify-dialog" title="Habitat Classification">
<div id="HabClassifyGPService">
//whole bunch of stuff
</div>
</div>
<div id="error-dialog" title="ERROR"></div>
<div id="success-dialog" title="SUCCESS">
<p>Habitat classification completed successfully! Your results will be viewable in 10 minutes.</p>
</div>
CSS:
//This one doesn't work and get overridden by the default style .ui-widget-content
#opacitySlide .ui-widget-content {
border: 1px solid black;
}
//This one does work, these classes are assigned in the JS, NOT the HTML
.habClassify-dialog .ui-widget-content,
.error-dialog .ui-widget-content,
.success-dialog .ui-widget-content {
border: none;
}
I've also attempted to use the custom class I assigned in the HTML instead of the id for the non-working CSS as well, but no luck.
.slider .ui-widget-content {
border: 1px solid black;
}
Here's the JS code:
//Creates the popup dialog for the habitat classification button
var habClassifyDialog = $("#habClassify-dialog").dialog({
autoOpen: false,
height: "auto",
width: 400,
modal: true,
dialogClass: 'habClassify-dialog',
buttons: [{
id: "classify",
text: "Classify habitat",
click: upload
}],
close: function () {
$('#uploadForm')[0].reset();
$('#validation-text').empty();
}
});
$('#classifyHab').click(function() {
habClassifyDialog.dialog("open");
});
//Creates the popup dialog that contains error messages
var errorDialog = $("#error-dialog").dialog({
autoOpen: false,
height: "auto",
width: 1000,
modal: true,
dialogClass: 'error-dialog',
buttons: [{
id: "error-ok",
text: "Ok",
click: function () {
errorDialog.dialog("close");
}
}]
});
//Creates the popup dialog that shows the success message
var successDialog = $('#success-dialog').dialog({
autoOpen: false,
height: "auto",
width: 400,
modal: true,
dialogClass: 'success-dialog',
buttons: [{
id: "success-ok",
text: "Ok",
click: function () {
successDialog.dialog("close");
if (habClassifyDialog.dialog('isOpen')) {
habClassifyDialog.dialog("close");
}
}
}],
close: function () {
if (habClassifyDialog.dialog('isOpen')) {
habClassifyDialog.dialog("close");
}
}
});
//Create the opacity slider
var handle = $("#opacityVal");
$("#opacitySlide").slider({
range: "min",
value: 100,
min: 0,
max: 100,
create: function () {
handle.text($(this).slider("value") + "%");
},
slide: changeOpacity,
change: changeOpacity
});
If you haven't used jQuery UI before, it automatically adds a whole bunch of default styles to the widgets upon load, that's why you don't see class="ui-widget-content" in my HTML anywhere, it's not necessary to declare it.

Answer 1

Alright, I have officially made the stupidest mistake ever. Considering the HTML was generating with the correct custom ID I assigned, I figured there had to be a way to access the ui-widget-content class using that ID. It was as simple as chaining them together, before when I was testing this I had left a space in between.
Problem CSS (won't work):
#opacitySlide .ui-widget-content {
border: 1px solid black;
}
Simple fix (remove space between id and class):
#opacitySlide.ui-widget-content{
border: 1px solid black;
}
For the sake of completeness, the explanation is that if you leave a space between these items, it thinks the HTML is structured like this:
<div id="opacitySlide">
<div class="ui-widget-content"></div>
</div>
when really my HTML was structured like this:
<div id="opacitySlide" class="ui-widget-content"></div>