choose a CSS class within a div element's class name

Hey there, I'm dealing with two HTML divs that both have the same price class of "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 add a padding-top of 15px to the first uvp uvp-price class that is inside the product-detail-price-container div.

I attempted the following CSS but it's not working:

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

Can someone assist me in figuring out what I am doing wrong? Thank you!

htmlcss

Answer №1

If you need to target a specific class within an element, you can utilize the > selector:

.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>

Answer №2

If you want to achieve this easily, you can utilize the css direct child selector. All you need to do is update your class from 

.product-detail-price-container:has(.uvp-price)
to 
.product-detail-price-container > .uvp.uvp-price

Here is the final css code:

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

Answer №3

To target the first child of a parent element, you can utilize the :first-child selector like so:

.example-class .child-element:first-child {
    margin-top: 10px;
}

Alternatively, you can achieve the same effect using the :nth-child(1) selector:

.example-class .child-element:nth-child(1) {
    margin-top: 10px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating an animated Gif using HTML and CSS styling

I am trying to create an effect where a .gif animation plays once when the mouse hovers over a specific image. I have one static image in PNG format and one animated gif. The goal is for the gif to play every time the mouse is hovered over the png image. ...

htmlcssanimation

Placing a horizontal line or Material UI Divider at the bottom of a webpage

Working with react and material ui, I am facing an issue in positioning a divider close to the bottom of the webpage along with a logo. In my jsx file, I have a functional component utilizing material UI drawer on the left side of the browser, where I have ...

cssreactjsmaterial-ui

Is there a way to automatically hide divs with the style "visibility:hidden" if they are not visible within the viewport?

Currently, I am working on developing a mobile web app. Unfortunately, Safari in iOS 5.1 or earlier has limited memory capabilities. In order to reduce memory usage while using css3 transitions, I have discovered that utilizing the css styles "display:none ...

javascriptjqueryioscssweb

Issues with the animation of the navbar menu button are preventing it from functioning

I have been attempting to incorporate animation when the navbar-button is toggled on smaller screen sizes. Inspired by the design of .navbar-toggle.larr in this particular template, I tried to implement a similar effect. /* ANIMATED LEFT ARROW */ .navbar- ...

jqueryhtmlcsstwitter-bootstrapanimation

What happens when browsers encounter unfamiliar at-rules?

CSS at-rules have been part of CSS since the days of CSS2. As CSS evolves with new specifications like @supports, it's interesting to see how different browsers handle unsupported rules. Do major browsers simply ignore unrecognized rules, or do they f ...

csscross-browser

Manipulating the location where a dropdown menu intersects with a button

Is there a way to adjust the drop-down menu positioning so that it aligns with the button on the top right side of the menu pop-up, rather than the top left as it currently does? Below is the code I have borrowed from an example on W3Schools. .dropbtn ...

htmlcss

Is it possible to utilize a contenteditable div in place of a textarea?

Is it possible to replace a textarea with a content editable div? Will the behavior be the same? Can data processing be done in the same way as with textarea data? ...

jquerycsshtml

What is the best way to format the JQGrid table for better

Is there a way to indent the table in this example and create white space on the side of the rows and header? I want a white margin on the left of everything below "Stackoverflow example". I'm hoping to achieve this using only CSS. Below is the code ...

cssjqgrid

Looking to incorporate Bootstrap Icons within Semantic UI?

I'm in need of assistance. My current project involves using Semantic UI, but there's a requirement to incorporate Bootstrap icons from . However, I'm facing difficulty copying the svg information directly into the code for the sake of reada ...

cssbootstrap-4iconssemantic-ui-css

Guide to activating the timer specifically on select pages with jQuery Mobile

I've developed a quiz application using jQuery Mobile and I am working on implementing a timer feature. The timer should run from 0 seconds up to 1 hour but only when the user is viewing specific pages, specifically the question pages. The timer is di ...

javascriptjqueryhtmljquery-mobiletimer

How can I execute a Python script on an HTML webpage by clicking a button?

Below is the HTML code I have written: <script> function goPython(){ $.ajax({ url: "MYSCRIPT.py", context: document.body }).done(function() { alert('finished python script');; ...

javascriptpythonhtmlajaxcgi

The HTML Bootstrap collapse feature is not functioning correctly upon the initial button press

Could you assist me with implementing a bootstrap and javascript collapse feature? I have two collapsible cards. The first card should be visible initially, but then switch to the second card when clicked on a link. However, upon the first click, both card ...

javascripthtmltwitter-bootstrap

What is the best way to remove this .click function?

My goal is to create a switch function where clicking the "on" button changes its CSS, and if the user then clicks on the "off" button, the CSS returns to normal. I also need the switch to default to the "on" position, but my attempts so far have been unsu ...

javascriptjqueryhtmlcss

Top align a flexbox layout with three columns

I am facing a challenge in aligning my 3 columns at the top with multiple "rows". When I apply the CSS property align-items: flex-end;, I achieve the desired layout, but the elements are aligned at the bottom. However, if I attempt to use align-items: flex ...

cssflexbox

Centering text in a D3 donut chart

Struggling with centering text inside a d3 donut chart for a project. While trying to modify a piece of code, I find myself lost in the complexity of it. Despite my efforts, the text added to the center is not perfectly centered. I have attempted various ...

javascriptcssd3.jsdonut-chart

Identify and track colored dots within an image using tracking.js

I'm working on creating a program that can tally the number of dots on dominoes in an image, such as the one shown here: https://i.sstatic.net/NKHXl.jpg My goal is to develop this functionality using JavaScript. I've attempted to learn how to u ...

javascripthtml

Combination of words & design having "background-image:url"

Currently utilizing Thymeleaf within a Spring Boot project, the following code initializes an image in the center of the screen (sourced from this .html ): <div class="col-lg-9 image_col order-lg-2 order-1"> <div class="single_product_image"& ...

htmlurlstylesbackground-imageel

Tips for concealing the currently playing track title on a media player

I'm looking for a way to conceal the track title displayed in the media player on Internet Explorer. Here's the code I currently have: <object id="mediaPlayer" width="320" height="240" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type ...

html

Having difficulty adding spacing between the border and the content of a label

I've designed labels to function as buttons for radio buttons. I'm struggling to figure out why I can't add padding between the border and the background color content. Should I reconsider the structure of the radio/label elements, or is th ...

htmlcss

Concealing certain options in a dropdown list with jQuery Chosen

My app has a unique feature where it displays different dropdown lists based on previous selections. Specifically, I have two lists - one for vehicle Makes and the other for Models. When a specific Make is chosen, like BMW or Audi, the next list will only ...

javascriptjqueryhtmljquery-chosen