CODEWITHSUNDEEP
htmlcss
user1765862
user1765862

Reputation: 14145

Accessing next element (not child) using css

I have following html structure

<div class="col-sm-12">
    <input id="my_id">
    <div class="col-sm-1 col-3-box" style="position:absolute; margin-left:340px;">
    </div>
</div>

how can I using css target this second div 

<div class="col-sm-1 col-3-box" style="position:absolute; margin-left:340px;">

in order to change its margin-left value.

I tried with 

#my_id + .col-sm-1 .col-3-box{
    margin-left:370px!important;
}

this doesnt work. What I'm doing wrong here?

Upvotes: 0

Views: 56

Answers (1)

Arpit Goyal
Arpit Goyal

Reputation: 1005

If you have markup:

<div>
    <div class="col-sm-12">
        <input id="my_id">
    </div>
    <div class="col-sm-1 col-3-box" style="position:absolute; margin-left:340px;">
    </div>
</div>

than this css:

.col-sm-12 + .col-sm-1.col-3-box{
    margin-left:370px!important;
}

If this markup:

<div class="col-sm-12">
    <input id="my_id">
    <div class="col-sm-1 col-3-box" style="position:absolute; margin-left:340px;">
    </div>
</div>

than this css:

#my_id + .col-sm-1.col-3-box{
    margin-left:370px!important;
}

Note: there's no space between .col-sm-1.col-3-box.

Upvotes: 1

Related Questions