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!
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With