Apply Css to the Last Parent Div

Question

I want to apply Css on class fancybox-inner which is the last parent of class main-content. I dont want to directly define the class and apply properties. Because I have multiple classes with the same name i.e fancybox-inner. So I want to target fancybox-inner on behalf of main-content.

HTML:

<div class="fancybox">

 <div class="fancybox-inner">

    <div class="main-content">

      <!--- Some Content ------>

    </div>

 </div>

<div>

What I have tried so far :

  .main-content < .fancybox-inner {
      width:1000px !important;
  }

You have to choose jQuery/JavaScript to achieve this – Dipak Mar 19 '14 at 06:31 — Dipak, Mar 19 '14 at 06:31

Naren · Answer 1 · 2014-03-19T07:20:56.197

4

Use : nth-last-child() Selector

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_nth-last-child

updated Answer

.main-content:parent {//specify properties for fancybox-inner here}

edited Mar 19 '14 at 07:20

answered Mar 19 '14 at 06:53

Naren

135
1
8

Can you tell me how will this work with my code ? – Hassan Sardar Mar 19 '14 at 06:59
**I want to apply Css on class fancybox-inner which is the last parent of class main-content.** are you right saying this ? – Naren Mar 19 '14 at 07:05
the css should be applied to fancybox-inner. Simple is that. But using class main-content – Hassan Sardar Mar 19 '14 at 07:06
1

all i mean in last comment is you can't say `main-content` being parent of `fancybox-inner`. – Naren Mar 19 '14 at 07:12
main-content is the first child of fancybox-inner. We must use these two classes to apply css on fancybox-inner – Hassan Sardar Mar 19 '14 at 07:15
.main-content:parent {//specify properties} – Naren Mar 19 '14 at 07:18

score 1 · Answer 2 · edited May 23 '17 at 12:05

1

Is there a CSS parent selector?

Sorry to say but there is no way to do this the way you asked.

A possible solution is the go the other way.

.fancybox .fancybox-inner {
    // CODE HERE
}

This will target the fancybox class, then target the fancybox-inner (Which will ONLY target the one that is inside the fancybox class)

Hope this helps.

edited May 23 '17 at 12:05

Community

1
1

answered Mar 19 '14 at 06:35

Hamedar

149
1
2
11

Note though, if you have multiple .fancybox-inner in .fancybox, it'll target all of them. – Hamedar Mar 19 '14 at 06:38
1

to last comment of Hamedar, you could use '.fancybox > .fancybox-inner' to be more specific. As it will only target the div with class name '.fancybox-inner' which is directly inside or at first place in a div with class name '.fancybox'. Still it will target to all similar divs in relation but not beyond of that. – ravk Mar 19 '14 at 06:43

prady00 · Answer 3 · 2014-03-19T06:47:48.873

0

You can add one extra class to that element

<div id="mywrapper">
<div class="fancybox">

 <div class="fancybox-inner extra-class">

    <div class="main-content">

      <!--- Some Content ------>

    </div>

 </div>

</div>
</div>

Then your css will be :

 #mywrapper > fancybox >fancybox-inner {
      width:1000px !important;
  }

edited Mar 19 '14 at 06:47

answered Mar 19 '14 at 06:31

prady00

721
1
6
17

I cannot add class to that div. Cz its being generted from fancybox – Hassan Sardar Mar 19 '14 at 06:32
What about doing .fancybox > .fancybox-inner {} – prady00 Mar 19 '14 at 06:35
Nope cant do this either. I have too many classes with same names – Hassan Sardar Mar 19 '14 at 06:38
Can you cover main fancybox with a div with id="my-cover", after that do #my-cover > .fancybox > .fancybox-inner {} – prady00 Mar 19 '14 at 06:39
I cant made changes on those upper divs, they are generting from Fancybox – Hassan Sardar Mar 19 '14 at 06:40
Did edit in my answer, what about doing so, just wrap whole of the Fancybox in your own div – prady00 Mar 19 '14 at 06:44

score 0 · Answer 4 · answered Mar 19 '14 at 06:32

0

You might want to use jquery to access parent node and apply css to that. Possibly like,

$(".main-content").parent().css({'width':'1000px !important'});

answered Mar 19 '14 at 06:32

dhunju

71
3

score 0 · Answer 5 · answered Mar 19 '14 at 07:27

0

You could use wrapCSS property to set your custom class

$(".selector").fancybox({
    wrapCSS : 'my-custom-css-class'
});

answered Mar 19 '14 at 07:27

Andrejs

1

Apply Css to the Last Parent Div

5 Answers5