CSS selector based on table border value

Question

I want to access a table in a page through a CSS selector.

The structure of the table is as follow:

<table border="1" width="560" cellspacing="0">
   <tr>
     <td height="28" colspan="3" bgcolor="#FFFFF...>
 </tr>
</table>

basically I need a jquery or css selector in one line to access the table with border=1

there is no class or id associated with the table and parent child mapping for nth access also not possible

basically a selector for table where table border=1 (border = 1 is not inside style="" ), it is just HTML markup

<table border=1"> ....</table>

Answer 1

You can use attribute selectors

[attr=value]

Represents an element with an attribute name of attr and whose value is exactly "value".

table {
  width: 100%;
  height: 50px
}
table[border="1"] {
  background: red
}

<table border="1">
  <tr>
    <td></td>
  </tr>
</table>
<hr />
<table>
  <tr>
    <td></td>
  </tr>
</table>

---

Note: I would advise however to not use the border HTML tag, since it is deprecated. To style the table with a border you can use the property border in CSS.

Answer 2

Do you mean something like this?

table[border="1"]{
  background: red;
}

And if you only want to check if there is a border attribute:

table[border]{
  background: blue;
}

You can find more info about this here: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors