css - Issue with nth-of-type. I must be misunderstanding how it works -
here codepen problem trying resolve (or understand): http://codepen.io/jhogue/pen/wtlid
basically, have set of columns floating. want use nth-of-type clear column starts new row. in case, every third .column starting @ fourth. how understand (3n+4) work.
i need header in there well, first div element. though thought nth-of-type apply elements apply – in case, elements class .column – counting first element in container.
so, nth-of-type not work way? understanding of how works incorrect?
a clear picture of nth-of-type supposed do, vs. nth-child: http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/
you need more creative. may not need heading , paragraph inside div; if need wrapper, use <header> instead:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <style> div:nth-of-type(3n+4) { color: red; } </style> </head> <body> <div class="container"> <header> <h1>testing nth-of-type.</h1> <p>thought skip div element.</p> </header> <div class="column">column 1</div> <div class="column">column 2</div> <div class="column">column 3</div> <div class="column">column 4. want one. </div> <div class="column">column 5</div> <div class="column">column 6</div> <div class="column">column 7. want one. </div> <div class="column">column 8</div> </div> </body> </html>
Comments
Post a Comment