CODEWITHSUNDEEP
htmlcsscss-selectors
Dipak
Dipak

Reputation: 939

applying nth-child is not working

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>

Upvotes: 0

Views: 205

Answers (1)

Leo K
Leo K

Reputation: 5354

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; }

Upvotes: 1

Related Questions