Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS '+' selector not working

Tags:

css

I am trying to create some margin between 2 divs when the both of them have a common parent, so the code as it follows:

   <div class="parent">
      <div class="child">hello</div>
      <div class="child">hello</div>
   </div>

and css

 .child{background:#ccc; padding:20px}
 .parent .child + .parent .child{ margin-top:520px; }

you can see in this link: http://jsfiddle.net/hjcY7/

And also in the link there is another example that it works but when the div dont have a parent.

Any ideas?

Thanks!

like image 393
MariaZ Avatar asked Oct 31 '13 08:10

MariaZ


People also ask

Why is my CSS style not working?

Make sure the link tag is at the right place If you put the <link> tag inside another valid header tag like <title> or <script> tag, then the CSS won't work. The external style CAN be put inside the <body> tag, although it's recommended to put it in the <head> tag to load the style before the page content.

How do I use CSS selector?

The CSS id Selector The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Can I use CSS not selector?

The :not() property in CSS is a negation pseudo class and accepts a simple selector or a selector list as an argument. It matches an element that is not represented by the argument. The passed argument may not contain additional selectors or any pseudo-element selectors.


1 Answers

You have to set the rule this way:

.parent .child + .child {
   margin-top: 520px;
}

You can see it in action here http://jsfiddle.net/hjcY7/1/.

Take a look at the Adjacent sibling selectors on W3.

like image 115
jacoz Avatar answered Oct 29 '22 01:10

jacoz