CSS attribute selector for CSS height style

Question

Would the selector for

  <tr style="height:64px">

the same as normal CSS attribute selector, i.e., tr[style="height:64px"] or tr[style=height:64px] or tr[style="height\3a 64px"]?

I may have not tried them correctly but none of above worked for me.

UPDATE:

@torazaburo I accepted @balapa's answer not because the semicolon, but because none of my attempts worked but @balapa showed me a working code. I believe without semicolon it would still work, but that's far less important to me, than to have a working code.

BTW, FTR, it turns out that my testing tool was the source of the problem, and I've just written a better tool to test CSS selection from command line after that. With it, the (Go) selector should be specified as tr[style=height\:64px].

score 2 · Accepted Answer · edited May 23 '17 at 11:52

In spec-compliant browsers, tr[style=height:64px] throws a DOM error, saying this is an invalid selector. The version with double quotes works. This is because the spec says that the value in an attribute selector must be a CSS identifier or a string. height:64px is not an identifier, so it fails. Enclosing it in quotation marks (either single or double) makes it into a string, which works.

If you don't want to quote it, then you need to escape the colon using the escape mechanism for CSS identifiers. That is why [style=height\:64px] works (second example below). For details, see this question, of which this question is essentially a duplicate.

[style="height\:64px"] works because escaping the colon is essentially a no-op.

[style="height\3a 64px"] works as expected, with or without surrounding quotes. \3a is the CSS escape for colon, and the following space terminates the escape sequence. I don't know why this didn't work for you. If you were specifying this selector as a JavaScript string, perhaps you forgot to escape the backslash.

[style="height:64px"] does not work because character references only have meaning in HTML. They don't have any meaning in CSS selectors.

None of this has anything to do with whether the style attribute value ends in a semicolon or not. So the description provided by the accepted answer is wrong. It only works because of the quotes.

Bottom line: just wrap your attribute values in quotes and stop worrying about it.

function test(sel) {
  try {
    console.log(sel, "yields", document.querySelector(sel));
  } catch (e) {
    console.log(sel, "fails with error", e.name);
  }
}

test('tr[style=height:64px]');
test('tr[style=height\\:64px]');
test('tr[style="height:64px"]');
test('tr[style="height\\:64px"]');
test('tr[style="height\\3a 64px"]');    
test('tr[style=height\\3a 64px]');
test('tr[style="height&#58;64px"]');

<table>
  <tr style="height:64px"></tr>
</table>

Character references only have meaning in HTML. They don't have any meaning in CSS. So the selector is looking for an attribute whose value is, literally, `height:64px`, except what's reflected in the HTML is `height:64px`. For it to match, the HTML has to be `` (notice the encoded & - without it, you have `` which is equivalent to ``, a transformation that's again only applicable in HTML). — BoltClock, Dec 14 '16 at 06:39
I tried with a command line tool called `xidel`, with every possible solution I could fine, but apparently it is the limitation of `xidel` that it just couldn't handle it. That's why I've written [a better tool to test CSS selection from command line](https://github.com/suntong/cascadia) afterwords. Thanks for the comprehensive explanation! — xpt, Dec 14 '16 at 13:46

score 1 · Answer 2 · edited May 23 '17 at 12:09

1

do this:

.trHeight { height: 64px}

and code :

<tr class='trHeight"></tr>

and grab it by

".trHeight"

using a style attribute is a dangerous practice CSS selector by inline style attribute

edited May 23 '17 at 12:09

Community

1
1

answered Dec 11 '16 at 05:39

Bindrid

3,655
2
17
18

Sorry @Bindrid that I didn't make it clear -- I need to come up with a CSS selector for `` for selection / scrapping purpose. I.e., the html string `` is from a site I am scrapping that I have no control of. – xpt Dec 11 '16 at 05:53

balapa · Answer 3 · 2016-12-11T06:00:43.160

0

You need to add semicolon at the end code on your HTML and CSS codes. Check out the example below

tr[style="height:64px;"] {
background: red;
}

<table>
  <tr>
    <td>Regular TR</td>
  </tr>
  <tr style="height:64px;">
    <td>TR with inline style</td>
  </tr>

edited Dec 11 '16 at 06:00

answered Dec 11 '16 at 05:51

balapa

240
2
8

CSS attribute selector for CSS height style

3 Answers3

Linked