html - Why does nth-of-type() and nth-child() break with unrelated element -


i missing fundamental have following html

<div class="test-cont">      <div class="md-margin"></div>     <div class="row">         <div class="col-md-12">test2</div>     </div>     <div class="md-margin"></div>     <div class="row">         <div class="col-md-12">hello world</div>     </div>     <div class="md-margin"></div>     <div class="row">         <div class="col-md-12">test2</div>     </div>     <div class="md-margin"></div>     <div class="row">         <div class="col-md-12">hello world</div>     </div> </div>

and using following selectors

 .test-cont .row:nth-of-type(odd) {      background: purple;  }  .test-cont .row:nth-of-type(even) {      background: red;  }

which believe expresses 'select nth child items of .text-cont class contains .row , either odd or even'.

yet <div class="md-margin"></div> break these selectors.

so end

enter image description here

instead of alternating pattern expect. problem resolved when remove md-margin divs. missing?

it because have md-margin divs in between, making them even ones.

(althought :nth-of-type show result want when using classes - depending on markup -, refers element type, that's why div md-margin "counting" here.

snippet md-margin

.test-cont .row:nth-of-type(4n+2) {       background: purple;   }   .test-cont .row:nth-of-type(4n+4) {       background: red;   }
<div class="test-cont">        <div class="md-margin"></div>      <div class="row">          <div class="col-md-12">test2</div>      </div>      <div class="md-margin"></div>      <div class="row">          <div class="col-md-12">hello world</div>      </div>      <div class="md-margin"></div>      <div class="row">          <div class="col-md-12">test2</div>      </div>      <div class="md-margin"></div>      <div class="row">          <div class="col-md-12">hello world</div>      </div>  </div>

snippet without md-margin

.test-cont .row:nth-of-type(odd)  {    background: purple;  }  .test-cont .row:nth-of-type(even) {    background: red;  }
<div class="test-cont">    <div class="row">      <div class="col-md-12">test2</div>    </div>    <div class="row">      <div class="col-md-12">hello world</div>    </div>    <div class="row">      <div class="col-md-12">test2</div>    </div>    <div class="row">      <div class="col-md-12">hello world</div>    </div>  </div>


-

Comments

Post a Comment

Popular posts from this blog

php - isset function not working properly -

the page unable see login form code written under isset function statement. have written code correctly , have executed many times , code written inside isset statement not works. here code:- <?php session_start(); echo "<p style=\"font-color: #ff0000;\"> catogoies </p>"; echo '<link href="var/www/html/sample.css" rel="stylesheet">'; require_once('../html/conn.php'); $query = "select * catogories"; mysqli_select_db($dbc, 'odit'); $retrieve = mysqli_query($dbc, $query); if(!$retrieve) { die(mysqli_error($query)); } while($row=mysqli_fetch_array($retrieve, mysql_assoc)){ echo "<p style=\"font-color: #ff0000;\">".'<a href="cats.php? catogory='.urldecode($row["name"]).'">'.$row["name"].'</a>'."</p>"; $_session['cat']=$row["name"]; } if(!($_session)) ...
Read more

javascript - Thinglink image not visible until browser resize -

Image
i trying repurpose pre-existing theme, includes drop down menu displays image. trying embed thinglink drop down menu's content section, not visible until resize browser window. here menu looks like: then when clicked, can see empty space image should show: then when browser resized, image appears: this code content of menu: <div class="ajax_accordion_content" style="display: none;"> <div class="report-detail"> <table border="0" cellpadding="0" cellspacing="0" width="100%" class="table_basic"> <tbody> <!-- thinglink image embedded --> <img style="max-width: 100%;" src="http://cdn.thinglink.me/api/image/832705713204625409/1024/10/scaletowidth#tl-832705713204625409;1043138249'" class="alwaysthinglink"/> <script async charset="utf-8" src="http://cdn.thinglink.me/jse/embed.j...
Read more

firebird - Error "invalid transaction handle (expecting explicit transaction start)" executing script from Delphi -

i'm developing update app delphi 10. i'm running windows 7 64x, firebird 2.5.1.26351 32x. execution order: checks current version(select statement firebird database) downloads update(via ftp) apply it(.exe files, , execute .sql) error code -901 pops out when try execute .sql files. know there incompatibility issue w7 64x , fdb 32x, but, can everything: backup , restore(gbak), db commands(all). tried fdb 64x instead, , not working. code: //components fdwaitcursor: tfdguixwaitcursor; fddriverlink: tfdphysfbdriverlink; fdconnection:tfdconnection; fdscript: tfdscript; function tthr_script.createcomponents:boolean; begin try fddriverlink := tfdphysfbdriverlink.create(fddriverlink); fdwaitcursor := tfdguixwaitcursor.create(fdwaitcursor); fdconnection := tfdconnection.create(fdconnection); fdconnection begin drivername := 'fb'; params.username := thrbanco.bduser; params.password := thrbanco.bdpass; params.database := ...
Read more