0

CSS3 selectors can get pretty in-depth and I'm having a problem that chaining a couple together using SASS.

CODE

SASS:

$greymd: #a7aaac;
$blue: #405daa;
$orange: #cabc18;

#C05 {
    .tab:nth-child(2) {
        .num:nth-child(1) {
            position: absolute;
            top:200px;
            left:800px;
            color:$greymd;
         }
        .num:nth-child(2) {
            position: absolute;
            top:300px;
            left:800px;
            color:$blue;
        }
        .num:nth-child(3) {
            position: absolute;
            top:400px;
            left:800px;
            color:$orange;
        }
    }
}

HTML:

<body id="C05">
    <div class="tab-wrapper">

        <div class="tab active" data-slide="1">
            <div class="chart-wrapper">
                <div class="chart">
                  <div class="overflow">
                        <div class="arrow"></div>
                        <div class="lines"></div>
                        <div class="num">1</div>
                        <div class="num">2</div>
                        <div class="num">3</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab" data-slide="2">
            <div class="chart-wrapper">
                <div class="chart">
                    <div class="overflow">
                        <div class="arrow"></div>
                        <div class="lines"></div>
                        <div class="num">10</div>
                        <div class="num">20</div>
                        <div class="num">30</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab" data-slide="3">
            <div class="chart-wrapper">
                <div class="chart">
                    <div class="overflow">
                        <div class="arrow"></div>
                        <div class="lines"></div>
                        <div class="num">100</div>
                        <div class="num">200</div>
                        <div class="num">300</div>
                    </div>
                </div>
            </div>
        </div>     
    </div><!--/.tab-wrapper-->
</body>

The thing is, if I removed <div class='arrow'></div> and <div class='lines'></div> it works as expected. Clearly there's something about nth selectors that I don't know.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
itsclarke
  • 8,622
  • 6
  • 33
  • 50
  • `nth` selects elements with the same parent....it does not select element by class. the nth-child(1) is **always** the first element in the parent **regardless** of class. – Paulie_D Jul 30 '14 at 15:12

1 Answers1

2

The error is indeed with your expected use of nth-child. Take the following CSS code:

.num:nth-child(1)

This code looks for a class .num that is the first child of its parent element. However, the first .num in your code is the third child of its parent element.

TylerH
  • 20,799
  • 66
  • 75
  • 101