How to select div with id nested in another div with class in css

Question

I have two nested div elements. The outer one has a clas and the nested one has an id. How can I select the nested div using its parent?

example:

<div class="parent-class">
  <div id="body">
  </div>
</div>

so, I was wondering how to select #body using its parent .parent-class ?

Answer 1

As simple as:

.parent-class #body{
    /* styles here */
}

However, as has been pointed out in a comment to this answer: you don't necessarily need to use inheritance in this way as an ID should be unique on each page, so this would be just as relevant at targeting that second element:

#body{
    /* styles here */
}

Answer 2

Other equally valid options include:

.parent-class #body {ruleset here}
div.parent-class #body {ruleset here}
.parent-class div#body {ruleset here}
div.parent-class div#body {ruleset here}
.parent-class > div {ruleset here}

The possibilities go on and on frankly.

Answer 3

Use .parent-class > div {}

OR

Since IDs must be unique, you only need: #body{}

Answer 4

Simple: .parent-class div {ruleset here}