selecting previous div which contains specific id

Question

I'm using joomla and I have as the following html

<div id="ja-footerwrap">
    <div class="moduletable">
        <div id="bottom-slider">
            <!--some contents-->
        </div>
    </div>
    <div class="moduletable">
        <div id="bottom-slider">
            <!--some contents-->
        </div>
    </div>
    <div class="moduletable">

            <!--some contents-->

    </div>
<!--and other divs with classes moduletable------>
</div>

I have to select the moduletable and have to apply display: inline-block; only to that div which contains with an id of bottom-slider. How can I do that?

are you using jQuery? BTW is not correct to assign the same ID to multiple objects use classes instead — Mangiucugna, Jul 26 '13 at 06:52
Since you have the id why not select it directly ? $('#bottom-slider') or document.getElementById()? — Patsy Issa, Jul 26 '13 at 06:52
If you are using jQuery you can directly do $('#bottom-slider').css({'display':'inline-block'}); — aBhijit, Jul 26 '13 at 06:53

score 4 · Accepted Answer · answered Jul 26 '13 at 06:58

4

First of all you cannot have multiple DOM objects with the same ID then the first thing is change the markup and transform the id="bottom-slider" to class="bottom-slider"

Then you can change the parent divs with class moduletable and bottom-slider childrens using jQuery:

$('.bottom-slider').parent('.moduletable').css({'display':'inline-block'});

Here the fiddle: http://jsfiddle.net/9tvcf/

Hope this helps

answered Jul 26 '13 at 06:58

Mangiucugna

1,732
1
14
23

thanks. but If I was able to select that with css would be too good but still in css3 this feature is not submitted – Bhojendra Rauniyar Jul 26 '13 at 07:02
Unfortunately there is no way to select the parent div in CSS3 http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector – Mangiucugna Jul 26 '13 at 07:03

score 1 · Answer 2 · answered Jul 26 '13 at 06:56

1

If you are using jQuery you can directly do

$('.bottom-slider').css({'display':'inline-block'});

PS: Change id to class.

answered Jul 26 '13 at 06:56

aBhijit

5,261
10
36
56

but this will not select the moduletable. – Bhojendra Rauniyar Jul 26 '13 at 06:58
This will apply the display style on his .bottom-slider, not on the parent div (moduletable) – Maxime Lorant Jul 26 '13 at 07:25
huh! after editing your answer, you reply me comment of old answer. That's not good. – Bhojendra Rauniyar Jul 26 '13 at 07:29

user1721135 · Answer 3 · 2013-07-26T07:34:53.087

0

Using css4 you will be able to do it with pure css too.

.module-table! > #bottom-slider {
display:inline-block;
}

edited Jul 26 '13 at 07:34

answered Jul 26 '13 at 07:06

user1721135

6,864
8
34
63

unfortunately there is no browser support now, neither chrome support this CSS4 selector that BTW would be .module-table! > .bottom-slider – Mangiucugna Jul 26 '13 at 07:07

score 0 · Answer 4 · answered Jul 26 '13 at 07:15

0

I hope in future like this selector would be selected as this

.bottom-slider - .moduletable{/*css here*/}

This method would be the best because there is + symbol for children selection.

Like as ~ we would hope to be placed ^

answered Jul 26 '13 at 07:15

Bhojendra Rauniyar

83,432
35
168
231

+ is not a child selector it means "next" or "together with" – user1721135 Jul 26 '13 at 16:47

selecting previous div which contains specific id

4 Answers4