如何 select html 元素在 css 中似乎是另一个元素

Question

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>

Answer 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)

eg 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;}

Answer 2

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>