0

I am in the document Inspector window, and have selected the element and checked the "Computed" tab on the side. But that only shows me what values were available for the property and which one was chosen, not why that was chosen.

Basically, I am trying to set a property (width) using a Stylish script, but the site's own setting keeps overriding mine, even though I believe mine has higher specificity - the chosen selector is .class1, whereas my selector is tr td.class1.class2.class3[style] (which I have confirmed is applicable to the element, since it does appear, though crossed out, in the "Computed" pane). Both the site's CSS sheet and my Stylish script use the !important suffix on this property. So, I would like to know why exactly the site's property setting is being chosen over mine.

Sundar R
  • 13,776
  • 6
  • 49
  • 76
  • 2
    @caeth — Not true. Specificity will still apply normally. http://jsbin.com/jiqagulale/1/edit?css,output – Quentin Aug 09 '15 at 20:02
  • I'm pretty sure that Firefox has no such tool. The most likely reasons for it being crossed out are that the name or valid given is invalid. – Quentin Aug 09 '15 at 20:34
  • 1
    Ehm, `[style]` you say? The style attribute itself is pretty specific; are you sure the td doesn't get its styles from in there? – Mr Lister Aug 09 '15 at 20:52
  • @Quentin The value given (`12em`) works for the other selectors that I've added to the same definition. And by 'name' do you mean the property name? Since the selector appears in the Computed pane under `width`, that too is clearly not the case. – Sundar R Aug 09 '15 at 21:13
  • @MrLister Heh, actually, the chosen selector is from an included .css file, the `style` attribute in the tag itself is just empty (but present, for whatever reason). It's ``. I included that bit in the selector just to improve the specificity a bit more. – Sundar R Aug 09 '15 at 21:14

1 Answers1

1

It's a browser related thing. If you say style="", with the empty string, one can ask "Am I actually setting a style, or am I not?". The W3C spec doesn't clarify this point. So I tried the following code in Firefox and IE11:

<div style="">
xx
</div>

and the CSS: 

div[style] { border: 1px solid black; }

Firefox clearly thinks this is setting an inline style, and so recognises the selector and shows the border specified, whereas IE11 says no it isn't an inline style and shows no border.

GuyH
  • 786
  • 1
  • 4
  • 8
  • That's interesting. IE is fine with `td[nowrap]` if you have `` or ``. I didn't know. – Mr Lister Aug 10 '15 at 05:28
  • It probably comes down to the behaviour not being defined by the W3C spec, so the browser creators can just do what they feel is right at the time - and we might even have the situation where one designer or programmer (coding up the HTML style attribute) might come to a different decision than the one on the desk opposite who is coding up the nowrap one! – GuyH Aug 10 '15 at 11:10
  • To avoid relying on unspecified behaviour it would be safer to put something in the quotes even if it is meaningless to the CSS. When I put style="abc" in the above code snippet, IE behaved the same as Firefox because now it was covered by the spec. – GuyH Aug 10 '15 at 11:19