Question

I have some html that looks like the following:

<div id="main" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
  <div id="main-top">
    <select id="entity" name="entity" class="monospace" >
    <input id="client" type="text" name="client" class="monospace">
  </div>
  <!-- Rest of the page content -->
  ...
</div>

And I have some css that looks like this:

.ui-widget input { font-family:Lucida Sans Unicode,Verdana,Arial,sans-serif; }
.monospace{ font-family: Lucida Console, Courier New, monospace; }

When I run this, the two html input elements pickup the first style despite having the .monospace class applied to them. I want the first style to apply to all the inputs on the page unless the .monospace class is applied (as in the first two input items in the html example), in that case I want the second style to apply. I realize I am not going about this correctly and the solution probably requires structuring my css differently, any advice on how to achieve this?

Answer 1

You need to use a selector that is more specific, such as:

.ui-widget input.monospace