0

I have a many divs with one more inputs and I am trying to style them. The divs are popups and are classed from general to specific as popups, the type of popup, dropdownlist in this case, then the dropdown type, MS (marital status) in this case. Each level of distinction requires specific additional styling. 

<div id="ea-MSPopup" class="ea-popup ea-dropdownlist ea-MSPopup" style="display:none;">
    <input type="text"/>
    <input type="text"/>
</div>

I have this CSS:

.ea-popup {border: 0; background-color: Yellow;}
.ea-dropdownlist input { border: 0; background: Yellow;}
.ea-MSPopup  /* not applied */ { width:65px; height: 40px; }
.ea-MSPopup input  /* not applied */ { width:65px; }

The .ea-MSPopup and .ea-MSPopup input are not being applied. If I add an id like this it works but I don't want to use id's:

#ea-MSPopup  /* applied */ { width:65px; height: 40px; }
#ea-MSPopup input  /* applied */ { width:65px; }

I tried also this:

.ea-popup.ea-dropdonlist.ea-MSPopup  /* not applied */ { width:65px; height: 40px; }
.ea-popup.ea-dropdownlist.ea-MSPopup input  /* not applied */ { width:65px; }

Which I had thought should brute force it but it does not.

While I would like to know how to do this specific case more so could someone provide an explanation or point me to a readable resource that clears up what I'm sure you know I'm am not seeing...

kpg
  • 589
  • 6
  • 28
  • 1
    We can only guess at what's wrong with just this, we need a demo that reproduces it. – Jacob G Mar 23 '17 at 15:54
  • this might help you, it's about inline css: http://stackoverflow.com/questions/31369919/does-embedded-css-always-override-external-css – UzendayoNE Mar 23 '17 at 15:55
  • Actually your code works ... https://jsfiddle.net/pfud27d2/ – DaniP Mar 23 '17 at 15:55
  • 2
    I'm guessing there's other CSS on the page that is either applied after these styles or has a higher specificity and is overwriting those styles. A [Minimal, Complete and Verifiable Example](http://stackoverflow.com/help/mcve) would be greatly appreciated. – hungerstar Mar 23 '17 at 15:57
  • @Mr-Swaggalicious Can you explain why that might help, since this question is not about inline styles vs – Mr Lister Mar 23 '17 at 19:30
  • huh, yes it does work...that's good I suppose...I am in a highly css'ed environment with bootstrap, kendo, and the last programmer's numerous styles...I'll have to try and find the conflicts..I've been using chrome's F12 to inspect but in some cases it is oddly uninformative as to why a style is not being applied. – kpg Mar 24 '17 at 00:58
  • After further review - it works in my page, I can only think that when I had to copy it over here I fixed some glitch, a missing dash or period, who knows...thanks for the moral support and sorry to take up your time... – kpg Mar 24 '17 at 02:27

0 Answers0