select a className that is in div className CSS-CodePudding

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

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

and

<div >
    <div ></div>
    <p >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

CodePudding user response：

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 >
    <meta itemprop="price" content="119.8">                                                             
    <p >UVP: 50,00&nbsp;€</p>
    <p  style="margin-top: -52px;">EK: 29.95 €</p>
 </div>


<div >
    <div ></div>
    <p >UVP: 50,00&nbsp;€</p>
 </div>

CodePudding user response：

You can use css direct child selector to do this easily. Just replace your class from .product-detail-price-container:has(.uvp-price) to .product-detail-price-container > .uvp.uvp-price

Final css:

.product-detail-price-container > .uvp.uvp-price {padding-top: 15px;}

CodePudding user response：

You can use :first-child for select the first child of parent so:

.product-detail-price-container .uvp.uvp-price:first-child {
    padding-top: 15px;
}

and you can also use :nth-child(1) for this :

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