CODEWITHSUNDEEP
htmlcsscss-selectors
timpone
timpone

Reputation: 19969

how to select a class wrapped in a specific container

I'd like to add a margin-top:5px to a subset of classes in the following:

This part is wrong: 

.af-mh-container-1011.af-row{
    margin-top: 5px;
}

with this html:

<div class='af-mh-container-1011'>
    <!-- add to this one -->
    <div class='af-row'>
      here i am
   </div>
</div>

<div class='af-mh-container-not-1011'>
   <div class='af-row'>
      here i am
   </div>
</div>

Upvotes: 1

Views: 87

Answers (3)

Trevor
Trevor

Reputation: 81

What you have written is applying a margin to an element with both those classes.

You want to target child elements.

Here are a few options:

.af-mh-container-1011 > .af-row {
    margin-top: 5px;
}

.af-mh-container-1011 .af-row {
    margin-top: 5px;
}

.af-mh-container-1011 div {
    margin-top: 5px;
}

All three options will affect your af-row class. The first option is a child selector. This will only affect the direct child. Other divs nested within the .af-row won't be affected. The second option will affect your af-row and any element nested within .af-row with the same class. The last option will affect all divs within af-mh-container-1011. See the example below for further clarification.

<div class='af-mh-container-1011'>
    <div class='af-row'>
        <div class='af-row'>
            This nested element is unaffected by a child selector (first option) but is affected by a decendant selector (second option). It is also affected by the 3rd option.
        </div>
   </div>
</div>

Upvotes: 0

Hashem Qolami
Hashem Qolami

Reputation: 99484

.af-mh-container-1011.af-row selector tries to match an element having both af-mh-container-1011 and af-row classes.

In order to select the nested child <div> having af-row class, you could use direct descendant combinator A > B as follows:

.af-mh-container-1011 > af-row {
    margin-top: 5px;
}

Also A B would match the nested B which is a descendant of A element - and not necessarily a direct descendant or a child.

Upvotes: 2

Sujit Agarwal
Sujit Agarwal

Reputation: 12508

Probably you missed a space between the dot -

.af-mh-container-1011 .af-row{
    margin-top: 5px;
}

JSFIDDLE - http://jsfiddle.net/zgf0v0tn/

Upvotes: 2

Related Questions