Attributing CSS class to element

Question

Assuming I wanted to attribute the text-shadow: green; attribute to every <h2> element occouring inside an element with the classes .dark and ux-bannerwhat CSS code would achieve this?

 <div class="dark ux-banner">
      <div class="the attributed classes of this element will vary">
           <h2>TARGET THIS ELEMENT
           </h2>
      </div>
 </div>

As in the above example <h2> element will be wrapped in a <div> with varying classes attributed to it.

What would be the best way to apply the text-shadow: green; property to the <h2> element when occouring within elements that have the .dark and ux-banner classes attributed without making reference to the <div> immediately surrounding the <h2> element

Answer 1

I believe you're looking for:

.dark.ux-banner h2 {
    text-shadow: green;
}

That means: "Set text-shadow: green on all h2 elements that are descendants of an element with both the classes dark and ux-banner.

Alternately, if you want to be somewhat specific:

.dark.ux-banner div h2 {
    text-shadow: green;
}

(Only applies to h2 elements within div elements within .dark.ux-banner elements.)

Or hyper-specific:

.dark.ux-banner > div > h2 {
    text-shadow: green;
}

(Only applies to h2 elements that are direct children of div elements that are direct children of .dark.ux-banner elements.)

The key bit above is really that .dark.ux-banner (with no spaces) means "an element with both of these classes." The rest is just descendant or child combinators.

Answer 2

You will need

.dark.ux-banner h2{
     text-shadow:green;
}

What this does is selects the elements that have the class .dark then checks if it has the class .ux-banner then selects all h2 inside that