html - Make Even Divs Switch Floats -

html - Make Even Divs Switch Floats -

the issue having have div id "#flights" main container, have divs class ".flight" beingness container of each option, , within of .flight have 2 divs, 1 img , 1 information, , clear after each so:

<div class="flight"> <div class="flight-img"></div> <div class="flight-heading"> <h2>shared flights</h2> <p>the shared flight alternative available 1 5 people. our economical flight. fly other passengers booked day.</p> <button>book now</button> </div> </div> <div class="clear"></div>

my css these is:

.flight-img { background: url(../img/flights.jpg) top left no-repeat; background-size: cover; width: 40%; height: 400px; float: left; } .flight-heading { width: 60%; float: left; position: relative; top: 50%; transform: translatey(-50%); }

everything working except want have them switch sides (ie .flight-img floated right , .flight-heading floated left) on children.

i have tried:

.flight-img:nth-of-type(2n){ float: right; }

and doesn't seem working. i've tried putting :nth-child(2n) along :nth-of-type/child (even).

i sure messing unsure of how search i'm trying in order find out what.

edit: adding

$(document).ready(function(){ $(".flight-img:even").css("float","right"); });

works perfectly, cannot seem css ::pseudo classes work , hoping not utilize jquery/js or little possible.

i think problem clear divs. nth-of-type based on element type, not class selector used, clear <div>s count siblings of .flights , children of #flights <div>. ah! took me min figure out, 4n-1 should work you. although should mention there other ways clear floats. 1 way utilize overflow:hidden on .flight <div>s. way can utilize 2n taking out clear <div>s.

html css css-float css-selectors