Using logical operators in querySelector CSS-CodePudding

I am trying to select all table cells that have colSpan or rowSpan bigger than 1. I know that you can do querySelectorAll('td[colspan="3"]') to select cells that meet a narrower condition.

But I need something like querySelectorAll('td[colspan>"1"]').

CodePudding user response：

It is not possible to put conditional operator inside the querySelector. In your case, if you want to achieve it using only CSS selector then you can ignore the particular colspan condition and select the remaining using :not operator.

 td[colspan]:not(td[colspan = "1"]) {
   background : red;
 }

table, th, td {
  border: 1px solid black;
}
td[colspan]:not(td[colspan = "1"]) {
background : red;
}

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td colspan="1">January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <td colspan="2">Sum: $180</td>
  </tr>
</table>

CodePudding user response：

According to this link : https://bobbyhadz.com/blog/javascript-get-all-elements-by-data-attribute#get-all-dom-elements-by-partial-match-of-a-data-attribute

you can get elements with data-attribute starts with, ends with or contains with something like below:

// ✅ Get all where value of data-id starts with `bo`
const elements1 = document.querySelectorAll('[data-id^="bo"]');
console.log(elements1); //