Target a general container of an specific element

Question

Is there anyway we can target the container of an element? I seems can't find a way, here is an example:

The HTML:

<div class="wrapper">
   <div class="content" id="TopSection">
      <span>Box A</span>
   </div>
</div>

<div class="wrapper">
   <div class="content" id="BottomSection">
      <span>Box B</span>
   </div>
</div>

The wrapper and the content are both has styling class, for example:

.wrapper {
    background-color: black;
 }

 .content {
    padding: 10px 20px;
 }

How to change the background color of the wrapper on the BottomSection only, without adding anther wrapper class, i.e wrapperB? so can we target the wrapper that contains that ID only?

Same problem: http://stackoverflow.com/questions/6754735/using-css-target-to-highlight-parent-div — Hless, Aug 19 '13 at 18:41
http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — j08691, Aug 19 '13 at 18:53

score 1 · Answer 1 · answered Aug 19 '13 at 19:03

1

Try this-

.wrapper {
background-color: black;
}

.wrapper:nth-child(2) {
background-color: orange;
}

.content {
padding: 10px 20px;
}

answered Aug 19 '13 at 19:03

Arif Khan

67
1
12

score 1 · Answer 2 · answered Aug 19 '13 at 19:15

1

You can target parents with jQuery, to add a class that you could then target with CSS:

$('#BottomSection').closest('.wrapper').addClass('changeMe');

answered Aug 19 '13 at 19:15

Steve Ray

158
8

Target a general container of an specific element

2 Answers2