I am seeking a selector that can target an element with the parent element of 'elementWrapper'. Depending on whether the parent element is even or odd, I want the child element to float right or left respectively.
Here is the expected result:
<body>
<style>
.elementWrapper
{
width:100%;
height:100px;
}
header, nav, div div, footer
{
width:50%;
height:100px;
background:#000;
}
</style>
<div class="elementWrapper">
<header style="float:left;"></header>
</div>
<div class="elementWrapper">
<nav style="float:right;"></nav>
</div>
<div class="elementWrapper">
<div style="float:left;"></div>
</div>
<div class="elementWrapper">
<footer style="float:right;"></footer>
</div>
</body>
Can this be achieved using CSS selectors alone, or would JavaScript be necessary? JSFiddle