Sheet Input CSS overridden by built-in CSS?

I've got the following code in a sheet I'm trying to get ready for submission: .sheet-long-number {     width: 5em; } When I inspect the CSS for the element it's on, I see that the width is being overridden by " .ui-dialog .charsheet input[type=number]", so the width of the input doesn't change. In order to understand how to fix this, I inspected the 13th Age official character sheet, and found that the number fields on that also had the same ".ui-dialog .charsheet input[type=number]" CSS style, but in their case it was below  the CSS specified in the sheet itself, allowing the sheet's styles to change the width of the number field. The only way I've been able to get the width to update correctly was to use the !important tag, but I want to avoid that if at all possible. Is there another way to get this to work?

You need to increase the specificity of your css here. Maybe try .sheet-long-number input [ type = number ] {     width: 5em; } The rule that has the most specific css descriptors is the rule that gets followed. You can add more css that matches the element till you beat the default css.

Aha! I tried that before and it didn't work, but replacing <input type="number" class="long-number" name="attr_exp" value="0"> with <div class="long-number">      <input type="number" name="attr_exp" value="0"> </div> along with your change did the trick. Not sure why, but it looks like it's working now, so thanks for the tip.

ah, mine should probably have been  input [ type = number ] .sheet-long-number{     width: 5em; } In your newest version, the two elements are separated by a space, which means the first element is the parent of the last element. You could construct something like .sheet-another-parent .sheet-long-number input [ type = number ].sheet-the-input {     width: 5em; } which would represent a structure like this <div class="another-parent">     <div class="long-number">          <input type="number" class="the-input" name="attr_exp" value="0">     </div> </div> Likewise, you could link multiple classes in the same element, like <input type="number" class="the-input long-number not-really-needed" name="attr_exp" value="0">     and grab just that specific input with .sheet-long-number .sheet-the-input.sheet-not-really-needed {     width: 5em; } Note: no spaces between the periods, to show the element has to have all three styles. And to be even more specific and precise: input[type=number].sheet-long-number .sheet-the-input.sheet-not-really-needed {     width: 5em; }