Div and position
I have five dynamically generated Divs. In my CSS I have named them .boxes
The first box that is generated I want to have an additional attribute of top:-100px;
How do I apply that to the very first div and not all of the rest?
<style>
.boxes {
width:100px;
height:100px;
float:left;
position:relative;
}
</style>The first box that is generated I want to have an additional attribute of top:-100px;
How do I apply that to the very first div and not all of the rest?
ASKER
I tried that but it does not seem to work.
First-child will only work if that first .boxes div is the first child element of the parent.
You could also try another selector like first-of-type. This will catch the first .boxes div inside the parent element.
You could also try another selector like first-of-type. This will catch the first .boxes div inside the parent element.
.boxes:first-of-type {
top: -100px;
}ASKER
I tried that and it does not work in IE.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
See this...
http://selectivizr.com/
It is a good plugin you can add .... Just add the plugin... and then see... your css3 selectors will work.... and your code will run fine...
http://selectivizr.com/
It is a good plugin you can add .... Just add the plugin... and then see... your css3 selectors will work.... and your code will run fine...
or you could just add it via javascript when you are generating them dynamically. Put a counter in the loop and if it is 1 then add the top margin.
Whenever I'm generating elements dynamically like this, it can often be useful to add some classes to help with the styling, such as first/last or odd/even:
<div class="boxes first odd">A nicely styled box!</div>
<div class="boxes even">A nicely styled box!</div>
<div class="boxes odd">A nicely styled box!</div>
<div class="boxes even">A nicely styled box!</div>
<div class="boxes last odd">A nicely styled box!</div>
<style>
.boxes { width:100px; height:100px; float:left; position:relative; }
.boxes.first { top: -100px; }
.boxes.last { margin-right: 20px; }
.boxes.odd { background-color: green; }
.boxes.even { background-color: red; }
</style>
For example,
Open in new window