CODEWITHSUNDEEP
htmlcss
Adam Scot
Adam Scot

Reputation: 1409

Attributing CSS class to element

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

Upvotes: 6

Views: 601

Answers (6)

user164226
user164226

Reputation: 

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

http://jsfiddle.net/YjGhw/

Upvotes: 3

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

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

the markup

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

demo: http://jsfiddle.net/cQcbp/

enter image description here

Upvotes: 0

iConnor
iConnor

Reputation: 20189

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

Upvotes: 3

itiel
itiel

Reputation: 17

It's simple. Just use the following:

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

This means every h2 element inside an element with these classes will have the text-shadow:green propperty no matter if the h2 element is inside a div or not.

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

or

<div class="dark ux-banner">
    <h2>
        TARGET THIS ELEMENT
    </h2>
</div>

will work the same ;)

Upvotes: 0

Gourav
Gourav

Reputation: 1774

Here is the demo http://jsfiddle.net/tFScD/2/

      <div class="demo">
        <div class="the attributed classes of this element will vary">
         <h2>TARGET THIS ELEMENT
           </h2>
          </div>
      </div>


  .demo div h2{
         text-shadow:2px 2px green;
     }

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074238

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.

Upvotes: 12

Related Questions