<style>
  /* تعتمد الأنماط على السمة غير المعيارية 'order-state' */
  .order[order-state="new"] {
    color: green;
  }
  .order[order-state="pending"] {
    color: blue;
  }
  .order[order-state="canceled"] {
    color: red;
  }
</style>
<div class="order" order-state="new">
  A new order.
</div>
<div class="order" order-state="pending">
  A pending order.
</div>
<div class="order" order-state="canceled">
  A canceled order.
</div>