HTML_Extract: How to do css selector to get Row1 & Highlighted Row X

Questions
1

I’ve below HTML sample

<!DOCTYPE html>
<html>
<style>
table, th, td {
  border:1px solid black;
}
</style>
<body>

<h2>A basic HTML table</h2>

<table style="width:100%">
  <tr>
    <td>Priority</td>
    <td><span style="background:#ffd700">Medium</span></td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Risk</td>
    <td><span style="color:#808080">Low</span></td>
    <td><span style="color:#808080">Medium</span></td>
    <td><span style="color:#ff0000">High</span></td>
  </tr>
  <tr>
    <td>Hostname</td>
    <td>aws-12345</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>Team</td>
    <td><span style="color:#0000ff">Management</span></td>
    <td>Windows</td>
    <td>Linux</td>
    <td>DevOps</td>
    <td>Security</td>
  </tr>
</table>

</body>
</html>

The Leftmost Column is the “Key” and any highlighted/differently-coloured is the “Value”.
Any chance on how to pair them key & value?

Screenshot 2022-01-07 at 15.13.32
Screenshot 2022-01-07 at 15.13.321608×272 51.6 KB

For example the final output needed is

  • Priority=Medium
  • Risk=High
  • Hostname=aws-12345
  • Team=Management

Thanks in advance

2

Hey @getk, CSS selectors aren’t a concept specific to n8n, so you might want to take a look for example at W3Schools for more information on this:

A very simple approach of getting the right selector for a given value would be to open the HTML page in a browser, right click the value you’re interested in and select Inspect. Most browsers will then allow you to copy the CSS selector from the source code by right clicking it, like Firefox for example:

image

So a valid selector for “Medium” would be body > table:nth-child(2) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(2) > span:nth-child(1)

You can then use this selector in the HTML Extract node like so:

image
image683×578 21.5 KB

Hope this helps!

2 Likes
3

thank you as Always. Very helpful

1 Like