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

T.J. Crowder · Accepted Answer · 2013-09-13 17:17:19Z

12

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.

answered Sep 13, 2013 at 17:17

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Adam Scot Over a year ago

would it not be .dark.ux-banner div h2 if I wanted to target the h2 element?

Gourav Over a year ago

@T.J.Crowder may I know why have you written .dark.ux-banner I mean to ask why two periods in class name?

MirroredFate Over a year ago

This is an excellent explanation of css selectors. I could have used this when I was trying to learn how all of this works....

Geek Over a year ago

@T.J.Crowder Great answer. Just one follow-up question. If a space is given between .dark and .ux-banner example being .dark .ux-banner h2{text-shadow:green;} then how would I interpret this CSS?

T.J. Crowder Over a year ago

@Geek: The space would change the compound class selector into a descendant combinator. (I didn't make that word up, that's what the spec calls them -- ugh!) The meaning would become: ""Set text-shadow: green on all h2 elements that are descendants of an element with the ux-banner class which is, in turn, a descendant of an element with the dark class. E.g., an h2 in a .ux-banner in a .dark, rather than an h2 in a .ux-banner.dark.

iConnor · Accepted Answer · 2013-09-13 19:16:47Z

3

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

edited Sep 13, 2013 at 19:16

answered Sep 13, 2013 at 17:18

iConnor

20.2k14 gold badges66 silver badges98 bronze badges

Comments

score 3 · Accepted Answer · 2013-09-17 12:55:21Z

3

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

http://jsfiddle.net/YjGhw/

edited Sep 17, 2013 at 12:55

answered Sep 13, 2013 at 17:18

user164226

Comments

Gourav · Accepted Answer · 2013-09-13 17:22:29Z

0

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;
     }

answered Sep 13, 2013 at 17:22

Gourav

1,7842 gold badges15 silver badges18 bronze badges

Comments

itiel · Accepted Answer · 2013-09-13 17:27:35Z

0

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 ;)

answered Sep 13, 2013 at 17:27

itiel

174 bronze badges

Comments

Gildas.Tambo · Accepted Answer · 2013-09-13 20:36:44Z

0

.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

answered Sep 13, 2013 at 20:36

Gildas.Tambo

22.7k7 gold badges53 silver badges79 bronze badges

Collectives™ on Stack Overflow

Attributing CSS class to element

6 Answers 6

5 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related