select a className that is in div className CSS

April 11, 2022

Hi i have two different html divs that contain the same price class ="uvp uvp-price".

 <div class="product-detail-price-container">
    <meta itemprop="price" content="119.8">                                                             
    <p class="uvp uvp-price">UVP: 50,00&nbsp;€</p>
    <p class="twp-product-detail-price" style="margin-top: -52px;">EK: 29.95 €</p>
 </div>

and

<div class="product-price-info">
    <div class="tw-price-unit"></div>
    <p class="uvp uvp-price">UVP: 50,00&nbsp;€</p>
 </div>

now i only want to give the first uvp uvp-price class that is inside the div class product-detail-price-container a padding-top: 15px;

i tried this but doesnt work.

.product-detail-price-container:has(.uvp-price) {
  padding-top: 15px;
}

what am i doing wrong ? thanks

>Solution :

You can use > selector to get a class inside something:

.product-detail-price-container > .uvp.uvp-price

.product-detail-price-container > .uvp.uvp-price {
  border: 1px solid red;
}

<div class="product-detail-price-container">
    <meta itemprop="price" content="119.8">                                                             
    <p class="uvp uvp-price">UVP: 50,00&nbsp;€</p>
    <p class="twp-product-detail-price" style="margin-top: -52px;">EK: 29.95 €</p>
 </div>


<div class="product-price-info">
    <div class="tw-price-unit"></div>
    <p class="uvp uvp-price">UVP: 50,00&nbsp;€</p>
 </div>