How to add Id or class to last meta in wc_display_order_meta

Question

I want to add id or class to only the last item meta in the array in wc_display_item_meta.

Example:

<ul class="wc_item_meta">'
<li> <Strong class="wc_item_meta_label">Weight</strong> </li>
<li> <p> 24kg </p></li>
<li> <Strong class="wc_item_meta_label">Height</strong> </li>
<li> <p> 6 feet </p></li>
<li> <Strong class="wc_item_meta_label">Length</strong> </li>
<li> <p> 5 Meter </p></li>
</ul>

Here in this example i want the last item in array ie length in this example in bigger font than the other items in array.

Please Help!!

Answer 1

You can just add to it another class with !important inside to override the previous class.

Also change the location of class, strong tag wont allow you to use width like li tag.

 .wc_item_meta_label{ width: 100px; height: 20px; background-color: blue; } .longer{ width: 200px !important; height: 20px; background-color: red; }

 <ul class="wc_item_meta">' <li class="wc_item_meta_label"> <Strong>Weight</strong> </li> <li> <p> 24kg </p></li> <li class="wc_item_meta_label"> <Strong>Height</strong> </li> <li> <p> 6 feet </p></li> <li class="wc_item_meta_label longer"> <Strong>Length</strong> </li> <li> <p> 5 Meter </p></li> </ul>

Answer 2

You can select the last item ie 5 meter in the ul by using :last-child selector and increase it's font or to select the second last child ie Length label you can use :nth-last-child(2) selector. Below IS the sample snippet.

 .wc_item_meta li:last-child { font-size:25px; }

 <ul class="wc_item_meta">' <li> <Strong class="wc_item_meta_label">Weight</strong> </li> <li> <p> 24kg </p></li> <li> <Strong class="wc_item_meta_label">Height</strong> </li> <li> <p> 6 feet </p></li> <li> <Strong class="wc_item_meta_label strong">Length</strong> </li> <li> <p> 5 Meter </p></li> </ul>