How can I implement a CSS property on a child class when the parent class is toggled on and off?

Looking to style a child div within a parent div that toggles classes based on a flag. The parent div can have either the .pricing-section or .new-pricing-section class. Here's the structure of the parent div:

const togglePriceSection = isPricingDetailsFeatureEnabled ? "new-pricing-section" : "pricing-section";
<div className={togglePriceSection}>
    <div className="btn btn-link btn-icon show-more-link" onClick={() => setExpanded(!expanded )}>
                        {pricesList.length > 6 && !expanded ? "Show More" : expanded ? "Show Less" :null}
                    </div>
</div>

The goal is to apply CSS to the div with the btn class. Attempted styling like this:

.pricing-section, .new-pricing-section .btn.btn-link.show-more-link {
    text-transform: none;
    margin-left: auto;
}

However, these styles are only being applied when the parent div has the 

className=".new-pricing-section"
, not with 
className=".pricing-section"
. How can this be resolved?

javascriptcssreactjs

Answer №1

The usage of a comma here signifies a new selector. There appears to be an issue that needs addressing.

This styling will affect elements with the classes .pricing-section and 

.new-pricing-section .btn.btn-link.show-more-link

.pricing-section, 
.new-pricing-section .btn.btn-link.show-more-link {
    text-transform: none;
    margin-left: auto;
}

To target specifically 

.pricing-section .btn.btn-link.show-more-link
and 
.new-pricing-section .btn.btn-link.show-more-link
, it is recommended to revise the CSS as shown below:

.pricing-section .btn.btn-link.show-more-link, 
.new-pricing-section .btn.btn-link.show-more-link {
    text-transform: none;
    margin-left: auto;
}

Consider separating the new into its own class for better organization. For example, style the button as follows:

.pricing-section .btn.btn-link.show-more-link {
    text-transform: none;
    margin-left: auto;
}

For elements specific to a new pricing section, use the classes pricing-section new in your markup. This can then be targeted using .pricing-section.new.

Answer №2

.pricing-section .btn.btn-link.show-more-link {
    // apply CSS styles if the element is a child of pricing-section
}
.new-pricing-section .btn.btn-link.show-more-link {
    // apply CSS styles if the element is a child of new-pricing-section
}

Answer №3

In order to make the correct selection, you will need to adjust your code slightly. The current code is selecting the parent element when it has a class of `pricing-section`, and the child element when the parent has the class `new-pricing-section`:

.pricing-section .btn.btn-link.show-more-link, .new-pricing-section .btn.btn-link.show-more-link {
    text-transform: none;
    margin-left: auto;
}

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

Adding plain HTML using jQuery can be done using the `.after()` and `.before()` methods

I have encountered a situation where I need to insert closing tags before an HTML element and then reopen it with the proper tags. The code snippet I am using is as follows: tag.before("</div></div>"); and then re-open it by adding proper tag ...

javascriptjqueryhtml

Is there a way to verify the presence of a service worker on a specific URL?

Is there a way for me to determine if external websites have a 'service-worker' or not? Here is what I think could work: Extract all the JavaScript files from the given URL Look for the string 'sw.js' (I am not entirely sure how to ...

javascriptnode.jsmeteorservice-worker

Unexpected behavior of Bootstrap columns within nested rows, occurring between the small and extra-small breakpoints

Currently, I am in the process of developing a small website using Bootstrap 5. My goal is to have 6 elements displayed on two lines for breakpoints greater than or equal to md and on a single line for smaller breakpoints. It all seems to be working fine f ...

htmlcssbootstrap-5

What is the most efficient method for designing this jQuery code to be reusable?

I am currently using dynamic Bootstrap popovers that are populated with content from my database. In PHP, it generates unique classes for each popover. My question is, when using jQuery, do I need to trigger the popovers individually? This is how I am cur ...

javascriptjquerytwitter-bootstrap

Changing scope is ineffective unless $scope.$apply is used

When a button is clicked, I have a directive that displays a loading screen. angular.module('randomButton', ['Data']) .directive('randomButton', function(Data) { return { scope: '=', restrict: ...

javascriptangularjs

Using `reduce` in TypeScript, you can organize an array of objects based on a shared property

Here is an example of an array: [ { id: '1', task: 'Grocery shopping', isImportant: true }, { id: '2', task: 'Meeting', isImportant: false }, { id: '3', task: &apos ...

javascripttypescript

Error: React-redux-firebase: The prop/s "dispatch" provided is reserved for internal usage by firebaseConnect()

Currently, I am implementing a Routing recipe in my project to allow users to navigate between pages based on whether they are logged in or not. The routing setup can be found at this link. After logging out, the application redirects to the Login page bu ...

reactjsfirebasereact-reduxfirebase-authenticationreact-redux-firebase

JavaScript Function to Convert JSON Data into an Excel File Download

I am looking for help with converting JSON data received from an AJAX POST Request into an Excel file (not CSV) for download on a button click. The JSON Data may contain blank values and missing fields for each JSON row. I have attempted to achieve this o ...

javascriptjsonajaxexceltype-conversion

Tips for creating a side by side layout in Bootstrap modal content

I recently ventured into using Bootstrap and decided to create a simple modal based on the Bootstrap 4 documentation. You can check out the Bootstrap 4 modal for reference. The modal I created consists of two parts - Part 1 and Part 2, with a <hr> t ...

htmlcssbootstrap-4modal-dialogbootstrap-modal

Ways to retrieve information from a intricate JSON structure?

Can anyone help me understand why I am unable to access the data in the detail option of the JSON? My goal is to load the firstName, lastName, and age into a list for each object. var data = { "events": [{ "date": "one", "event": "", "info ...

javascriptjqueryjson

Overriding the w-4xl with sm:text-2xl in Tailwind CSS

Struggling to achieve responsive design on my Pages, especially with changing text size when the screen is small. I've been following all the correct steps and maintaining the right order. However, whenever I set 'sm', it seems to override a ...

javascriptcssreactjsnode.jstailwind-css

Discover the best way to enable lint support for MUI `sx` prop values

Despite attempting the method below, I am still unable to receive lint support to identify incorrect style properties and values. import { SxProps, Theme } from "@mui/material"; export const navBarStyles: Record<string, SxProps<Theme> | ...

cssreactjsmaterial-uilint

What benefits come from dynamically loading and unloading JavaScript and CSS stylesheets?

Introduction: Currently, I am in the process of developing a website that will utilize ajax to change content without refreshing the main frame and images every time. The main frame has its own site.css stylesheet. Query 1: Considering the use of a sing ...

javascripthtmlcssajax

Why isn't Freichat displaying the name of the user who logged in?

After creating my own small social networking site, I decided to add a chat script called freichat. However, I am facing an issue where when a user logs in, their name appears as "Guest102" instead of their actual name. I am quite confused by this problem ...

javascriptphpjqueryhtmlmysql

The correct way to update component state when handling an onChange event in React using Typescript

How can I update the state for 'selectedValues' in a React component called CheckboxWindow when the onChange() function is triggered by clicking on a checkbox? export const CheckboxWindow: React.FC<Props> = props => { const [selected ...

javascriptreactjstypescriptcomponentssetstate

What could be causing the React state to not function properly when using data from an external class?

Recently diving into the world of Javascript and React, I decided to challenge myself by creating a basic calculator. My strategy was to separate the calculator logic into its own class. As I am currently testing it out, I encountered a peculiar issue. It ...

javascriptreactjs

What is the best way for me to make sure the element overflows properly?

How can I make the contents of the <div class="tags> element cause overflow so that one can scroll its contents instead of the element simply extending in height? I've experimented with different combinations of overflow-y: scroll and min- ...

htmlcss

Utilize different JSON files to load numerous JSON objects

I'm currently working on developing a quiz website where the quiz content is stored in JSON files. While the functionality works fine, I'm looking to enhance it by adding a unique image to each question stored in the JSON file. To achieve this, I ...

javascriptarraysangularjsjsonobject

Creating the CSS styles for input fields

Here is an example of a form: <form class="mystyle" ...> <input name="test1" type="text"> <input name="test2" type="text"> ... </form> I want to apply CSS styling to all the input elements in this form: .mystyle input[type="text" ...

htmlcss

AngularJS - Ensuring the <script> tag is included only after all directives have been rendered

Forgive me if this question has been asked before. I've spent quite some time looking for a solution to no avail. I'm in the process of converting an existing application, which relies heavily on jQuery, to utilize AngularJS. However, I've ...

javascriptangularjs