My goal is to include additional text following each numerical weight measurement. Here's the structure of the HTML:
<table class="shop_attributes">
<div class="field" data-field-id="product_size">
<strong class="field__label field__label--above">product_size</strong>
<div class="field__content">
<p>66 x 81 x 61</p>
</div>
</div>
<div class="field" data-field-id="product_weight">
<strong class="field__label field__label--above">product_weight</strong>
<div class="field__content">
<p>128</p>
</div>
</div>
</table>
The desired output should be:
product_size
66 x 81 x 61 in
product_weight
128 lbs
To target the specific data fields, I can use
div[data-field-id=product_size]
div[data-field-id=product_weight]
Using > p allows me to select only the paragraph elements within the data fields. This is the code I've attempted
div[data-field-id="product_weight"] > p{
white-space: nowrap;
content: " lbs";
}
Unfortunately, this approach is not working as expected. What could be the issue?