1

I have two elements that are very seems to each other.

<td class="order_table_cell" data-title="status">Processing</td>

And I have another one element has same class and data title name:

<td class="order_table_cell" data-title="status">Complete</td>

I have no access on HTML. and I want to add css on only "Complete" cell.

I tried to use this css code but it changes both on my page.

.order_table_cell[data-title="status"]{color: green;}

Is there anyway to implement that?

My full html code:

    <table class="woocommerce-orders-table woocommerce-MyAccount-orders shop_table shop_table_responsive my_account_orders account-orders-table">
<thead>
<tr>
<th class="woocommerce-orders-table__header woocommerce-orders-table__header-order-number"><span class="nobr">الطلب</span></th>
<th class="woocommerce-orders-table__header woocommerce-orders-table__header-order-date"><span class="nobr">التاريخ</span></th>
<th class="woocommerce-orders-table__header woocommerce-orders-table__header-order-status"><span class="nobr">الحالة</span></th>
<th class="woocommerce-orders-table__header woocommerce-orders-table__header-order-total"><span class="nobr">الإجمالي</span></th>
<th class="woocommerce-orders-table__header woocommerce-orders-table__header-order-actions"><span class="nobr">إجراءات</span></th>
</tr>
</thead>
<tbody>
<tr class="woocommerce-orders-table__row woocommerce-orders-table__row--status-completed order">
<td class="woocommerce-orders-table__cell woocommerce-orders-table__cell-order-number" data-title="الطلب">
<a href="https://tasawwq.com/my-account/view-order/7468/">
#7468 </a>
</td>
<td class="woocommerce-orders-table__cell woocommerce-orders-table__cell-order-date" data-title="التاريخ">
<time datetime="2020-12-10T17:09:15+00:00">2020-12-10</time>
</td>
<td class="woocommerce-orders-table__cell woocommerce-orders-table__cell-order-status" data-title="الحالة">
مُكتمل
</td>
<td class="woocommerce-orders-table__cell woocommerce-orders-table__cell-order-total" data-title="الإجمالي">
<span class="woocommerce-Price-amount amount">3,299.0&nbsp;<span class="woocommerce-Price-currencySymbol">ج.م</span></span> لـ 3 عناصر
</td>
<td class="woocommerce-orders-table__cell woocommerce-orders-table__cell-order-actions" data-title="إجراءات">
<a href="https://tasawwq.com/my-account/view-order/7468/" class="woocommerce-button button view">عرض</a> </td>
</tr>
</tbody>
</table>
  • if **Complete** td next to **Processing** td than you can used this css: `.order_table_cell + .order_table_cell {color: green;}` – Minal Chauhan Mar 13 '21 at 12:47
  • no the table has 5 columns filled with order details, (num, name, status, date, see more). each one of them is reapeated for each row as each row is presented a single order. so "Processing" and "Complete" are in the same column but different rows. –  Mar 13 '21 at 12:50
  • Please share your table html code – Minal Chauhan Mar 13 '21 at 12:51
  • I couldn't reply in a comment with the code, so I edited my post. please check the code. –  Mar 13 '21 at 12:57
  • look it (css) - https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text and it (js) - https://stackoverflow.com/questions/9627289/javascript-check-if-div-contains-a-word/42930535 – s.kuznetsov Mar 13 '21 at 13:17

2 Answers2

1

There isn't CSS selector for text content

You can't do it with pure CSS

You can do it if you can change HTML (server or client side)

e.g. with JavaScript like this to change the HTML

Array.from(document.querySelectorAll('.order_table_cell[data-title="status"]'))
    .filter(element => element.textContent === "Complete")
    .forEach(element => element.classList.add("completed"))

.completed{color: green;}
pinage404
  • 33
  • 1
  • 6
0

you can see in the code when order completed then .woocommerce-orders-table__row--status-completed class added in <tr> so you can use this class to change color for order status td

tr.woocommerce-orders-table__row--status-completed td.woocommerce-orders-table__cell-order-status{
    color:green;
}


tr.woocommerce-orders-table__row--status-completed td.woocommerce-orders-table__cell-order-status{
    color:green;
}
<table class="woocommerce-orders-table woocommerce-MyAccount-orders shop_table shop_table_responsive my_account_orders account-orders-table">
  <thead>
    <tr>
    <th class="woocommerce-orders-table__header woocommerce-orders-table__header-order-number"><span class="nobr">الطلب</span></th>
    <th class="woocommerce-orders-table__header woocommerce-orders-table__header-order-date"><span class="nobr">التاريخ</span></th>
    <th class="woocommerce-orders-table__header woocommerce-orders-table__header-order-status"><span class="nobr">الحالة</span></th>
    <th class="woocommerce-orders-table__header woocommerce-orders-table__header-order-total"><span class="nobr">الإجمالي</span></th>
    <th class="woocommerce-orders-table__header woocommerce-orders-table__header-order-actions"><span class="nobr">إجراءات</span></th>
    </tr>
  </thead>
  <tbody>
    <tr class="woocommerce-orders-table__row woocommerce-orders-table__row--status-completed order">
      <td class="woocommerce-orders-table__cell woocommerce-orders-table__cell-order-number" data-title="الطلب">
      <a href="https://tasawwq.com/my-account/view-order/7468/">
      #7468 </a>
      </td>
      <td class="woocommerce-orders-table__cell woocommerce-orders-table__cell-order-date" data-title="التاريخ">
      <time datetime="2020-12-10T17:09:15+00:00">2020-12-10</time>
      </td>
      <td class="woocommerce-orders-table__cell woocommerce-orders-table__cell-order-status" data-title="الحالة">
      مُكتمل
      </td>
      <td class="woocommerce-orders-table__cell woocommerce-orders-table__cell-order-total" data-title="الإجمالي">
      <span class="woocommerce-Price-amount amount">3,299.0&nbsp;<span class="woocommerce-Price-currencySymbol">ج.م</span></span> لـ 3 عناصر
      </td>
      <td class="woocommerce-orders-table__cell woocommerce-orders-table__cell-order-actions" data-title="إجراءات">
      <a href="https://tasawwq.com/my-account/view-order/7468/" class="woocommerce-button button view">عرض</a> </td>
    </tr>
    <tr class="woocommerce-orders-table__row woocommerce-orders-table__row--status-processing order">
      <td class="woocommerce-orders-table__cell woocommerce-orders-table__cell-order-number" data-title="الطلب">
      <a href="https://tasawwq.com/my-account/view-order/7468/">
      #7468 </a>
      </td>
      <td class="woocommerce-orders-table__cell woocommerce-orders-table__cell-order-date" data-title="التاريخ">
      <time datetime="2020-12-10T17:09:15+00:00">2020-12-10</time>
      </td>
      <td class="woocommerce-orders-table__cell woocommerce-orders-table__cell-order-status" data-title="الحالة">
      مُكتمل
      </td>
      <td class="woocommerce-orders-table__cell woocommerce-orders-table__cell-order-total" data-title="الإجمالي">
      <span class="woocommerce-Price-amount amount">3,299.0&nbsp;<span class="woocommerce-Price-currencySymbol">ج.م</span></span> لـ 3 عناصر
      </td>
      <td class="woocommerce-orders-table__cell woocommerce-orders-table__cell-order-actions" data-title="إجراءات">
      <a href="https://tasawwq.com/my-account/view-order/7468/" class="woocommerce-button button view">عرض</a> </td>
    </tr>
  </tbody>
</table>
Minal Chauhan
  • 6,025
  • 8
  • 21
  • 41