Trouble Styling Grandchild DIVs With Multiple Classes

[Planet13]

Hi all:

Can you help me understand how to style a DIV that has multiple classes assigned that is the Great Grandchild of a DIV with an ID?

The DIV I want to style has the following classes assigned:

<div class="et_pb_text et_pb_bg_layout_light et_pb_text_align_left">

It is the great-grandchild of a DIV with the ID of #service_areas

<div id="service_areas" class="et_pb_section et_section_regular">
<div class="et_pb_row">
<div class="et_pb_column et_pb_column_4_4">
<div class="et_pb_text et_pb_bg_layout_light et_pb_text_align_left">
- - - This is the Div I want to change the margin-bottom: to 0px - - -
</div> <!-- .et_pb_text -->
</div> <!-- .et_pb_column -->
</div> <!-- .et_pb_row -->
</div>

I am trying to change the margin-bottom to 0

When I look in the Firebug inspector, it says:

.et_pb_text {
 margin-bottom: 30px;
}

So I tried to target it with:

#service_areas.et_pb_text {
 margin-bottom: 0;
}

But it doesn't affect that div. When I look in Firebug, it still says the same thing:

.et_pb_text {
 margin-bottom: 30px;
}

On the other hand, I CAN style it by using the > child / grandchild selector. Meaning that:

#service_areas > div > div > div {
margin-bottom: 0;
}

Works fine.

So what do I need to do if I want to select it without using #service_areas > div > div > div selector?

Thanks in advance.

[Fotiman]

So I tried to target it with:

#service_areas.et_pb_text {
margin-bottom: 0;
}

This goes back to what I was talking about in that other thread [webmasterworld.com]. In that code you are targeting and element that has an id of service_areas AND a class of et_pb_text. What you really want is the element with class et_pb_text that is a descendant of the element with id service_areas, so put a space between the id and the class:

#service_areas .et_pb_text {
  margin-bottom: 0;
} 

[Planet13]

Thanks Fotiman:

I have to learn to read or something.

I thought that doing this:

#service_areas .et_pb_text {
 margin-bottom: 0;
} 

Would only style a CHILD of #service_areas but wouldn't style a GRAND-child (or great-grandchild) of #service_areas.

I just tried what you posted, and - Surprise, Surprise! - you were right.

Sigh... I would just like to say that when coding CSS, there is a fine line between having not enough caffeine, and having WAY TOO MUCH caffeine...

Thanks again for the help. It is truly appreciated.

[Fotiman]

I would just like to say that when coding CSS, there is a fine line between having not enough caffeine, and having WAY TOO MUCH caffeine...

Literally laughed out loud! :)

#service_areas .et_pb_text
Selects all Descendants with class .et_pb_text.

#service_areas > .et_pb_text
Selects all direct Children with class .et_pb_text.

[Planet13]

#service_areas .et_pb_text
Selects all Descendants with class .et_pb_text.

#service_areas > .et_pb_text
Selects all direct Children with class .et_pb_text

Got it! Thanks! The confusion was from some tutorial I read where they wrote children instead of descendants, so I thought it would only affect the first descendant.

I was seriously about to rage-quit. I was like, "I hate computers! I'm becoming a topiarist!"