Why aren't these CSS nth-child selectors working as expected?

Question

Why aren't the 1st, 2nd,3rd, 4th items being styled with background-color s as expected?

Please see code snippet:

 .list-container.animated .ui.button.bubble:nth-child(1) { background: red; } .list-container.animated .ui.button.bubble:nth-child(2) { background: green; } .list-container.animated .ui.button.bubble:nth-child(3) { background: yellow; } .list-container.animated .ui.button.bubble:nth-child(4) { background: pink; } button { outline: none; border:none; } 

 <div class="list-container animated"> <form> <label> <div class="ui button bubble medium">Item 1</div> </label> <label> <div class="ui button bubble medium">Item 2</div> </label> <label> <div class="ui button bubble medium">Item 3</div> </label> <button class="ui button bubble">Item 4</button> </form> </div> 

Answer 1

nth-child is for immediate children of their parent element - in your case all of the <div class="ui button bubble medium"> elements are only-child elements of their parent <label> element.

The final <button> element can be selected with just button as it is the only element of that type in the fragment:

Change your rule to this:

.list-container.animated label:nth-child(1) .ui.button.bubble {
    background: red;
}

.list-container.animated label:nth-child(2) .ui.button.bubble {
    background: green;
}

.list-container.animated label:nth-child(3) .ui.button.bubble {
    background: yellow;
}

.list-container.animated button {
    background: pink;
}

The rules might be easier to follow if you use an explicit heirarchy with the > child selector rather than the descendant combinator ' ' (a space):

.list-container.animated > form > label:nth-child(1) > .ui.button.bubble {
    background: red;
}

.list-container.animated > form > label:nth-child(2) > .ui.button.bubble {
    background: green;
}

.list-container.animated > form > label:nth-child(3) > .ui.button.bubble {
    background: yellow;
}

.list-container.animated > form > button {
    background: pink;
}

Answer 2

Because the DIVs you are selecting are children of their label tag containers/parents, and each of them is a first-child therefore (except for the pink button at the end, which, as a sibling of the label s, is the 4th child of the common parent .list-container ).

You have to use the n-th-child selectors on the labels instead, lie this:

 .list-container.animated label:nth-child(1) .ui.button.bubble { background: red; } .list-container.animated label:nth-child(2) .ui.button.bubble { background: green; } .list-container.animated label:nth-child(3) .ui.button.bubble { background: yellow; } .list-container.animated :nth-child(4) { outline: none; border: none; background: pink; } 

 <div class="list-container animated"> <form> <label> <div class="ui button bubble medium">Item 1</div> </label> <label> <div class="ui button bubble medium">Item 2</div> </label> <label> <div class="ui button bubble medium">Item 3</div> </label> <button class="ui button bubble">Item 4</button> </form> </div> 

Answer 3

Look, you are trying to set style on first, second, third (etc.) div with .bubble class. But in every block there is only one child. So, you need too count labels instead of divs with .bubble.

I advice you to wrap button in a div and give class to this div and give the same class to labels

<div class="list-container animated">
       <form>
          <label class="some-class">
             <div class="ui button bubble medium">Item 1</div>
          </label>
          <label class="some-class">
             <div class="ui button bubble medium">Item 2</div>
          </label>
          <label class="some-class">
             <div class="ui button bubble medium">Item 3</div>
          </label>
          <div class="some-class"><button class="ui button bubble">Item 4</button></div>
       </form>
    </div>


.list-container.animated form .some-class:first-child  .ui.button.bubble {
  background: red;
}

.list-container.animated form .some-class:nth-child(2) .ui.button.bubble {
  background: green;
}

.list-container.animated form .some-class:nth-child(3) .ui.button.bubble {
  background: yellow;
}

.list-container.animated form .some-class:last-child .ui.button.bubble {
  background: pink;
}

button {
  outline: none;
  border:none;
}