Nth-Child does not work

Asked

Viewed 553 times

2

    <div class="intro-frases" >
        <div class="row">
            <div class="col-md-6">
                <h1 data-segundos="4" class="frases pull-right" >TESTE 1</h1>
            </div>
            <div class="col-md-6">
                <h1 data-segundos="5" class="frases">TESTE 2</h1>
            </div>
        </div>

        <h1 data-segundos="0" class="frases">TESTE 3</h1>
        <h1 data-segundos="11" class="frases">TESTE4</h1>
        <h1 data-segundos="14" class="frases" style="font-size: 200px;">TESTE5</h1>
        <div class="row">
            <div class="col-md-6">
                <h1 data-segundos="5.5" class="frases">TESTE 6</h1>
            </div>
            <div class="col-md-6">
                <h1 data-segundos="6" class="frases">TESTE 7</h1>
            </div>
        </div>
    </div>

CSS

.intro-frases h1:nth-child(1),
.intro-frases h1:nth-child(4) ,
.intro-frases h1:nth-child(7)

{
  color: red;
  font-weight: 600;
}

was to color in red and leave in bold the teste1, teste4 e teste7, there’s something wrong with the code?

https://jsfiddle.net/5j2erz59/

html css

  • Works for me... https://jsfiddle.net/5j2erz59/1/ What browser are you using?

  • Chrome, here is coloring: TEST 1, TEST 2, TESTE5, TEST 6, TEST 7 and not only Test 1, Test 4 and Test 7 (it was to color and bold only these)

  • This is wrong. Try coloring 1, 4 and 7 with different colors that you will understand. see separately for understanding: https://jsfiddle.net/5j2erz59/5/

3 answers

4


Let’s understand what happens here

.intro-frases h1:nth-child(4)
{
  color: red;
  font-weight: 600;
}

The selector :nth-child means "select the element that":

  • Be an element h1
  • Be the fourth Child of a Parent.

Are you imagining that the Parent is the .intro-frases, but CSS selectors do not take into account any previous selector. The Parent used in the nth-child is the first Parent, that is, it is the immediately superior element in the DOM tree. That is why you are having an inconsistent result: like your h1s do not belong to the same parent element, their order varies, and some assume a position relative to their parent same as others.

The best in this case is to add a class to the elements you want to highlight.

4

As the answers already explain the problem, see a possible solution, adding an auxiliary class with sequential numbering:

.intro-frases .t1,
.intro-frases .t4,
.intro-frases .t7 {
  color: red;
  font-weight: 600;
}
    <div class="intro-frases" >
        <div class="row">
            <div class="col-md-6">
                <h1 data-segundos="4" class="frases pull-right t1" >TESTE 1</h1>
            </div>
            <div class="col-md-6">
                <h1 data-segundos="5" class="frases t2">TESTE 2</h1>
            </div>
        </div>
    
        <h1 data-segundos="0" class="frases t3">TESTE 3</h1>
        <h1 data-segundos="11" class="frases t4">TESTE4</h1>
        <h1 data-segundos="14" class="frases t5" style="font-size: 200px;">TESTE5</h1>
        <div class="row">
            <div class="col-md-6">
                <h1 data-segundos="5.5" class="frases t6">TESTE 6</h1>
            </div>
            <div class="col-md-6">
                <h1 data-segundos="6" class="frases t7">TESTE 7</h1>
            </div>
        </div>
    </div>

Of course, if the conditions are fixed, simply simplify further, and just add an extra class only in items 1, 4 and 7:

.intro-frases .red600 {
  color: red;
  font-weight: 600;
}
<div class="intro-frases" >
        <div class="row">
            <div class="col-md-6">
                <h1 data-segundos="4" class="frases pull-right red600" >TESTE 1</h1>
            </div>
            <div class="col-md-6">
                <h1 data-segundos="5" class="frases">TESTE 2</h1>
            </div>
        </div>
    
        <h1 data-segundos="0" class="frases">TESTE 3</h1>
        <h1 data-segundos="11" class="frases red600">TESTE4</h1>
        <h1 data-segundos="14" class="frases" style="font-size: 200px;">TESTE5</h1>
        <div class="row">
            <div class="col-md-6">
                <h1 data-segundos="5.5" class="frases">TESTE 6</h1>
            </div>
            <div class="col-md-6">
                <h1 data-segundos="6" class="frases red600">TESTE 7</h1>
            </div>
        </div>
    </div>

1

The selector :nth-child(x) selects elements with the position x relative to your siblings, not relative to the output of a selector. That is if we have HTML

div
    h1
div
    h1
div
    h1

and use the selector div h1:nth-child(2) none of these div will be selected because all are isolated. In the same way that div h1:nth-child(1) will select all.

Example: https://jsfiddle.net/dyfsku1j/

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.