title: How to apply a CSS style to a specific row in an HTML table?
body: <p>I have an HTML page that looks something like this:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;style type="text/css"&gt;
         tbody, th, td {padding:0px;margin:0px;border:0px;}
         tr.foo { border: 1px solid blue; }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;table&gt;
        &lt;tbody&gt;
          &lt;tr&gt;&lt;td&gt;Nothing
          &lt;tr class="foo"&gt;&lt;td&gt;Bordered
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Note: the style to tbody, th and td MUST NOT be changed, since (in my real use case), these styles are applied to other pages.</p>
  
  <p>What CSS pattern selector can I use to highlight (create border around) the row with class foo ?</p>