Is it possible to apply varying CSS styles depending on the parent element's class?

Question

Is it possible to apply varying CSS styles depending on the parent element's class?

Apologies for the poorly worded question, but I am struggling to find the right terms to convey my query. Let me attempt to explain...

Is it feasible to apply different css styles based on the classes assigned to the containing element?

For example:

<div class="blue">
    <a class="text">Hello</a>
</div>

<div class="red">
    <a class="text">Hello</a>
</div>

In the scenario above, the "Hello"s are intended to be blue and red respectively, with their color being determined by the "text" class rather than the "red" or "blue" class they are nested in. Essentially, I am looking to have two distinct "text" classes, with the choice between them contingent on the class of the container element. Is this achievable? Thank you!

html css

Answer 1

Answer №1

Here is an example:

.navy .text {
     color:#0000FF;
}

.crimson .text {
     color:#FF0000;
}

Check out the Fiddle

Answer 2

Here is an example:

.navy .text {
     color:#0000FF;
}

.crimson .text {
     color:#FF0000;
}

Check out the Fiddle

Answer 3

Answer №2

After Joren provided a response to your initial inquiry, I would like to suggest that in addition to the classes ".blue .text" and ".red .text", you could also utilize a ".text" class to specify the common styles for both colors (such as font size and family).

.blue .text {
   color:#00F;
}
.red .text {
   color:#F00;
}
.text {
    // Define the styles you want both the blue and red sections to share
}

In regards to your subsequent query about having multiple classes within a parent class, for example "text_a text_b"....

// Unique styles for subclasses under "blue"
.blue .text_a {}
.blue .text_b {}
.blue .text_c {}

// Custom styles for subclasses under "red"
.red .text_a {}
.red .text_b {}
.red .text_c {}

// Specify the styles for each subclass regardless of their color association
.text_a {}
.text_b {}
.text_c {}

Has this addressed your question satisfactorily?

Answer 4

After Joren provided a response to your initial inquiry, I would like to suggest that in addition to the classes ".blue .text" and ".red .text", you could also utilize a ".text" class to specify the common styles for both colors (such as font size and family).

.blue .text {
   color:#00F;
}
.red .text {
   color:#F00;
}
.text {
    // Define the styles you want both the blue and red sections to share
}

In regards to your subsequent query about having multiple classes within a parent class, for example "text_a text_b"....

// Unique styles for subclasses under "blue"
.blue .text_a {}
.blue .text_b {}
.blue .text_c {}

// Custom styles for subclasses under "red"
.red .text_a {}
.red .text_b {}
.red .text_c {}

// Specify the styles for each subclass regardless of their color association
.text_a {}
.text_b {}
.text_c {}

Has this addressed your question satisfactorily?

Is it possible to apply varying CSS styles depending on the parent element's class?

Answer №1

Answer №2

Similar questions

linking ng-style through live html

Transferring the link value to an AJAX function when the onclick event is triggered

Is the Piecemaker flash slider being obstructed by its container?

Ways to verify if the CSS background-color is set to white?

Strangely compressed HTML image

Is there a way to enable scrolling on a page without editing the HTML? I have a table inside a div that is overflowing, and I want the page to scroll,

Tips for preventing extra whitespaces and line breaks from being added to the render tree in Blazor applications

Learn how to create a visually stunning CSS menu by centering a background image from the website cssmenumaker

I'm struggling to activate the eventListener on several elements with the same className or ID. Unfortunately, only the initial child is being triggered in my current code implementation

"Encountering a form submission error - requested resource not located

Modify the color of a unique word within a cell in a gridview

Is it possible to update table cell content depending on selected option?

Require a selection from the menu on the right side needed

Obtain the title of the text generated by clicking the button using a script function

Tips for updating the background color of a specific row

Bringing in CSS variables to a Typescript document

A step-by-step guide on how to exclusively print items that have been selected using a checkbox in AngularJS

Can the font size of a container be adjusted proportionally to its width or height using only CSS?

"Create a div element with resizable capabilities, similar to a

Issue with implementing styles on Navbar React component