css selector: a class inside another class is not working

Question

I read somewhere a class inside another class is written in this way: .class1 .class2 { style}. But I found it counld not work.

For example:

<style>
h1 p {
    background-color: yellow;
}
.a1 .a2{
     background-color: green;
}
</style>

<h1><p>Welcome to My Homepage</p></h1>

 <p class="a1">
   <p class="a2"> My name is Donald  </p> 
   <p class="a3"> I live in Duckburg.</p>
 </p>

As you can see, the following is supposed to be green. But it actually not.

<p class="a1"><p class="a2"> My name is Mike  </p> </p>

Am I missing anything here?

I do not believe it is a duplicate because this specific question was never being asked before. This question itself can benefit other people who may have the same doubt as mine. — derek, Feb 28 '17 at 07:07

score 1 · Accepted Answer · answered Feb 28 '17 at 03:04

You can't nest  elements. Paragraphs can only contain phrasing content.

Change the outer paragraph to a <div/> and the styles will be applied correctly:

h1 p {
  background-color: yellow;
}

.a1 .a2 {
  background-color: green;
}

<h1>
  <p>Welcome to My Homepage</p>
</h1>

<div class="a1">
  <p class="a2"> My name is Donald </p>
  <p class="a3"> I live in Duckburg.</p>
</div>

score 1 · Answer 2 · edited May 23 '17 at 11:46

1

It's not an issue with the CSS, but rather the HTML: You're nesting a  tag inside of another  tag.

See https://stackoverflow.com/a/12015809/7024837

Maybe you can try changing  into ?

edited May 23 '17 at 11:46

Community

1
1

answered Feb 28 '17 at 03:07

Leigh M Aucoin

21
1
5

css selector: a class inside another class is not working

2 Answers2