Create a unique look by applying styling to a nested class without affecting the outer class with the same name

Question

Create a unique look by applying styling to a nested class without affecting the outer class with the same name

I have two divs with the same class, .body, but one is nested inside another div with the class .box. Here's an example:

<div class="box">
   <div class="body">
   </div>
</div>

<div class="body">
</div>

I'm trying to style only the .body that is inside .box, but my current CSS isn't working and it's affecting both .body elements.

.box .body {
   background-color: red;
}

I don't want to change .box to #box because "box" might appear more than once in the same document.

Please check out the issue here: http://jsfiddle.net/H2cmE/

html css

Answer 1

Answer №1

It seems that the CSS is correctly written to style elements with class .body inside an element with class .box. To better assist you, could you provide us with your complete HTML structure so we can determine why it might not be working in your specific case?

Answer 2

It seems that the CSS is correctly written to style elements with class .body inside an element with class .box. To better assist you, could you provide us with your complete HTML structure so we can determine why it might not be working in your specific case?

Answer 3

Answer №2

Web Development Example:

<div class="container">
    main container
   <div class="content">
        inside .container (it will have a red background)
   </div>
</div>

<div class="content">
    not inside .container (it will have a blue background)
</div>

CSS Styling:

.container .content {
   background-color: red;
}

.container {
    width: 400px;
    height: 400px;
    background-color: green;
}

.content {
    width: 400px;
    height: 50px;
    background-color: blue;    
}

View Demo Here

Answer 4

Web Development Example:

<div class="container">
    main container
   <div class="content">
        inside .container (it will have a red background)
   </div>
</div>

<div class="content">
    not inside .container (it will have a blue background)
</div>

CSS Styling:

.container .content {
   background-color: red;
}

.container {
    width: 400px;
    height: 400px;
    background-color: green;
}

.content {
    width: 400px;
    height: 50px;
    background-color: blue;    
}

View Demo Here

Answer 5

Answer №3

.container>div.content
.container:first-child
.container div.content

If you're looking for more information on CSS selectors, check out this useful website: http://www.w3schools.com/cssref/css_selectors.asp

I trust that this resource will assist you in resolving your issue.

Answer 6

.container>div.content
.container:first-child
.container div.content

If you're looking for more information on CSS selectors, check out this useful website: http://www.w3schools.com/cssref/css_selectors.asp

I trust that this resource will assist you in resolving your issue.

Create a unique look by applying styling to a nested class without affecting the outer class with the same name

Answer №1

Answer №2

Answer №3

Similar questions

Ways to prevent a timeout when the score exceeds 1000

The styles for the React calendar are not being properly applied to the calendar component due to CSS overriding

Issue with ng-repeat causing HTML table data to not appear

How can I customize the color of the border/background on my jquery menu?

There was a type error that occurred because the property 'addEventListener' could not be read from an undefined value

Creating visually stunning full-width sections with graphic backgrounds using Bootstrap

Creating a Vertical Stack of Divs Using HTML and CSS

How can I delete a date value from a td if it matches the current date value?

JavaScript/DOM - What sets apart a "CSS Selector" from an attribute?

I am having an issue with a mobile JQuery collapsible div that is not properly displaying the internal div within the item

Issues persisting with the fixed header functionality in Bootstrap table

Drift above a pair of elements

What is the best method for extracting specific information from an HTML webpage?

Adaptable Bootstrap navigation bar

How to import a template from a different webpage in AngularJS

Adjust the color of additional SVG paths upon hovering

What are some ways to streamline inline styling without having to create numerous variables?

Using Python for text-to-speech with iSpeech

"Experience the power of Angular.js through seamless animations created by blending the capabilities

AngularJS File Input element triggering only once when selecting the same file