Selecting a class underneath a class with CSS

Question

I am trying to select a class underneath a class, say I have a class named "A" on an element, and under it, I've got another element with a class name of "B".

There are other instances of "B" in the DOM, but none of them but one is under "A".

To select ONLY the "B" under the "A", would I use:

.A B {

CSS HERE

}

Or am I doing it wrong?

Here's the structure:

<h2 class="A">
<span>TITLECONTENT</span>
</h2>
<p>CONTENT</p>
<div class="B" addthis:title="TITLECONTENT " addthis:url="URL">

Answer 1

The most general form is

.A .B { ... }

This will target any element with class B which has a parent with class A, whether it is a direct parent or not:

<span class="B">
    <span class="A" >
    </span>
</span>

as well as

<span class="B">
    <div>
        <span class="A" >
        </span>
    <div>
</span>

---

If .B is a direct children of .A you can target it with this:

.A > .B { ... }

CSS Child selector