CSS subclasses, am I doing this right?

Question

.popUp { width: 300px; height: 300px; position: fixed; top: 0px; left: 0px; background-color: white; } .question .popUp { width: 300px; height: 20px; border: 1px solid black; background-color: black; } 

As you can see, I am trying to make the question class a subclass of the popUp class. From what I googled, this should work, but it is not. If I do this instead:

 .question { width: 300px; height: 20px; border: 1px solid black; background-color: black; } 

It works, but it does not match the point.

Answer 1

popup class is a parent container, then you should select it as shown below.

 .popUp .question 

so the syntax will be parent space child

Answer 2

Keep common styles in the base class, then add specific / overridden properties to the subclass.

 .popUp { width: 300px; height: 300px; position: fixed; top: 0px; left: 0px; background-color: white; } .popUp-question { /*width: 300px; This can move to parent */ height: 20px; border: 1px solid black; background-color: black; } 

Using

 <div class="popUp popUp-question"></div> 

Take a look at the boot documentation , which demonstrates the use of subclasses in many components. Their conventions seem to include the name of the base class in the subclass. For example, the base class alert and the subclass alert-success .

Answer 3

This is the opposite. The container must be in front of the contained element in the definition:

 .popUp .question { width: 300px; height: 20px; border: 1px solid black; background-color: black; } 

Answer 4

Try:

 .popUp .question { ... }