nth-child does not work

Question

nth-child does not work

Navigation

#1 by (4 votes)
#2 by (4 votes)
#3 by (1 votes)

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 it to color in red and leave the teste1, teste4 e teste7 in bold, is there something wrong with the code?

link

html css

asked by anonymous 04.04.2016 / 05:13

3 answers

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, just simplify it further, and only 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>

04.04.2016 / 05:38

1

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

div
    h1
div
    h1
div
    h1

and we use the div h1:nth-child(2) selector none of these div will be selected because all are isolated. Just like div h1:nth-child(1) will select all.

Example: link

04.04.2016 / 05:29

Error: the right syntax to use near 'add What is the best method for exceptions?

score 4 · Accepted Answer

Let's understand what happens here

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

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

Be an element h1
Be the fourth child of a parent .

You're imagining that parent is .intro-frases , but CSS selectors ignore any previous selectors. The parent used in nth-child is the first parent , that is, it is the next higher element in the DOM tree. This is why you are having an inconsistent result: since your h1 s does not belong to the same parent element, their order varies, and some assume a position relative to their parent equal to that of others.

The best thing here is to add a class to the elements you want to highlight.