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].

Answer 1

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:64px"]');

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

Answer 2

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

Answer 3

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>