0

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;
}
desertnaut
  • 57,590
  • 26
  • 140
  • 166
user2786773
  • 13
  • 4
  • `sister or brother` == `parent and child` – Deepak Ingole Sep 17 '13 at 08:55
  • 2
    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

3 Answers3

0

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

E.g.

div + div { padding: 10px; }
CaribouCode
  • 13,998
  • 28
  • 102
  • 174
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/

user1812741
  • 311
  • 2
  • 6
  • 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
0

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

desertnaut
  • 57,590
  • 26
  • 140
  • 166
avrahamcool
  • 13,888
  • 5
  • 47
  • 58