How to style sister or brother div

Question

thanks for taking your time to help me!

I am trying to style sister div but not by using this id #rooms-booking-manager-change-search-form

Example

div + #rooms-booking-manager-change-search-form { padding:10px; font-size:18px; }

<div>Arrival Date: 19/09/2013</div>
<div>Departure Date: 21/09/2013</div>
<div>Nights: 2</div>
<form id="rooms-booking-manager-change-search-form"></form>

enter image description here

Solution:

div ~ #rooms-booking-manager-change-search-form {
    background: red;
}

Can you be more specific please? You say you are trying to style the `div`s that are next to each other, but which ones do you want to style and how? There are selectors that can probably help you here (such as `+`) but it's difficult to give specific help without knowing exactly what you want to achieve. — Sean, Sep 17 '13 at 09:01
if you're trying to target the `div`s, its not working. http://jsfiddle.net/avrahamcool/yWXuu/2/ — avrahamcool, Sep 17 '13 at 09:35
possible duplicate of [CSS previous sibling selector](http://stackoverflow.com/q/1817792). — Mr_Green, Sep 17 '13 at 09:48
just a comment on your "solution" section in your post. `id's` are meant to be unique. — Mr_Green, Sep 17 '13 at 09:57

score 0 · Answer 1 · answered Sep 17 '13 at 08:53

0

You can select the an element next to another element using the plus sign.

E.g.

div + div { padding: 10px; }

answered Sep 17 '13 at 08:53

CaribouCode

13,156
22
91
166

Thanks for your help, i figure out – user2786773 Sep 17 '13 at 09:29

score 0 · Answer 2 · answered Sep 17 '13 at 08:55

0

take a look at this Article it ist a Good Description of sibling and Child Selectors http://css-tricks.com/child-and-sibling-selectors/

answered Sep 17 '13 at 08:55

Jan Wiemers

341
1
6

score 0 · Answer 3 · answered Sep 17 '13 at 09:04

0

You could create a wrapper for all the form items as follows

<div class="form-item-wrapper>
    <div class="form-item form-type-item">
    <div class="form-item form-type-item">
</div>

and then the CSS is :

<style>
    .form-item-wrapper > div{
        padding: 10px  
    }
</style>

Here is a good article http://css-tricks.com/child-and-sibling-selectors/

answered Sep 17 '13 at 09:04

user1812741

301
2
5
14

Hi, thanks for your help I can't create any wrapper, the only way i have using css, where i want to style pre div by using this id #rooms-booking-manager-change-search-form – user2786773 Sep 17 '13 at 09:09

score 0 · Answer 4 · edited May 23 '17 at 12:19

I hope I understood you correctly (edit your question and explain yourself more clearly)

Do you try to select all the divs that come prior to your form (#rooms-booking-manager-change-search-form)?

If you are not allowed to change the DOM, you can't achieve that via pure CSS selectors, but if you're allowed to use JQuery, then its pretty simple.

$("#rooms-booking-manager-change-search-form").prevAll('div').css('background-color','red');

Working Fiddle

How to style sister or brother div

4 Answers4