applying nth-child is not working

Question

Why nth-child(n) is not working here? More children can be added in HTML , but I think it is not a good way to add same rules (same code) using nth-of-type(1), nth-of-type(2)......, nth-of-type(10) in CSS . All children contain same rules, so why not to mention those in one selector, instead of adding the same rules multiple times?

I have changed

nth-of-type(1), nth-of-type(2)...... , nth-of-type(10)

to

nth-child(n)

In the following example, if I use one rule with nth-child(n) then tab content would be messed, tab doesn't work:

 .col100{ width:100%; } .left{ float:left; } .tab-wrap { transition: 0.3s box-shadow ease; border-radius: 6px; max-width: 100%; display: flex; flex-wrap: wrap; position: relative; list-style: none; background-color: #fff; margin: 40px 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } .tab-wrap:hover { box-shadow: 0 12px 23px rgba(0, 0, 0, 0.23), 0 10px 10px rgba(0, 0, 0, 0.19); } .tab { display: none; } /*child can be more than 10, but code and rule is same.*/ .tab:checked:nth-of-type(1) ~ article .tab_content:nth-of-type(1) { opacity: 1; transition: 0.5s opacity ease-in, 0.8s transform ease; position: relative; top: 0; z-index: 100; transform: translateY(0px); text-shadow: 0 0 0; } /*child can be more than 10, but code and the rule is same.*/ .tab:checked:nth-of-type(2) ~ article .tab_content:nth-of-type(2) { opacity: 1; transition: 0.5s opacity ease-in, 0.8s transform ease; position: relative; top: 0; z-index: 100; transform: translateY(0px); text-shadow: 0 0 0; } /*child can be more than 10, but code and rule is same.*/ .tab:checked:nth-of-type(3) ~ article .tab_content:nth-of-type(3) { opacity: 1; transition: 0.5s opacity ease-in, 0.8s transform ease; position: relative; top: 0; z-index: 100; transform: translateY(0px); text-shadow: 0 0 0; } .tab:first-of-type:not(:last-of-type) + label { border-top-right-radius: 0; border-bottom-right-radius: 0; } .tab:not(:first-of-type):not(:last-of-type) + label { border-radius: 0; } .tab:last-of-type:not(:first-of-type) + label { border-top-left-radius: 0; border-bottom-left-radius: 0; } .tab:checked + label { background-color: #fff; box-shadow: 0 -1px 0 #fff inset; cursor: default; } .tab:checked + label:hover { box-shadow: 0 -1px 0 #fff inset; background-color: #fff; } .tab + label { box-shadow: 0 -1px 0 #eee inset; border-radius: 6px 6px 0 0; cursor: pointer; display: block; text-decoration: none; color: #333; flex-grow: 3; text-align: center; background-color: #f2f2f2; user-select: none; text-align: center; transition: 0.3s background-color ease, 0.3s box-shadow ease; height: 50px; box-sizing: border-box; padding: 15px; } .tab + label:hover { background-color: #f9f9f9; box-shadow: 0 1px 0 #f4f4f4 inset; } .tab_content { padding: 10px 25px; background-color: transparent; position: absolute; width: 97%; z-index: -1; opacity: 0; left: 0; transform: translateY(-3px); border-radius: 6px; } 

 <div class="clearfix"></div> <div class="tab-wrap"> <input type="radio" id="tab1" name="tabGroup1" class="tab" checked> <label for="tab1"><span class="font16">Menu</span></label> <input type="radio" id="tab2" name="tabGroup1" class="tab"> <label for="tab2"><span class="font16">Sub-Menu</span></label> <input type="radio" id="tab3" name="tabGroup1" class="tab"> <label for="tab3"><span class="font16">Sub-Menu-Sub</span></label> <article class="left col100"> <div class="tab_content"> <article>Text 1</article> </div> <div class="tab_content"> <article>Text 2</article> </div> <div class="tab_content"> <article>Text 3</article> </div> </article> </div> 

Answer 1

OK, nth-child(n) cannot work, (nor the syntactically correct nth-child(1n+0) , nor nth-of-type(1n+0) ). The ( An+B ) thing means 'every n-th sibling', however your code is trying to match 1st sibling of kind input.tab to 1st sibling of kind div.tab_content exactly or 2nd input.tab to 2nd div.tab_content exactly , etc. - it isn't any-to-any as would be the case if you use An+B (the latter syntax selects multiple siblings, not one - and the fact that the expression appears twice in your selector doesn't mean that it would apply ONLY if n is the same in both appearances).

I don't see a 'clean' solution to what you're trying to do. You might need to rethink the strategy altogether and use a different document structure to get what you want with just one selector, however a significant simplification is still possible if you use one rule with multiple comma-separated selectors, like this:

.tab:checked:nth-of-type(1) ~ article .tab_content:nth-of-type(1),
.tab:checked:nth-of-type(2) ~ article .tab_content:nth-of-type(2),
.tab:checked:nth-of-type(3) ~ article .tab_content:nth-of-type(3)  {
    opacity: 1;
    transition: 0.5s opacity ease-in, 0.8s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    transform: translateY(0px);
    text-shadow: 0 0 0; }