why pseudo class selector works wrong

Question

$(function() {
  $('#a').click(function(e) {
    if ($(e.currentTarget).hasClass('dis')) {
      return;
    }
    $(e.currentTarget).next('div').children('.slider.show:first').removeClass('show').addClass('hide');
    $(e.currentTarget).next('div').children('.slider.show:last').next('.slider.hide').removeClass('hide').addClass('show');
    $('#b').removeClass('dis');
    if ($('.slider.show:last').next().length == 0) {
      $(e.currentTarget).addClass('dis');
    }
  });
  $('#b').click(function(e) {
    if ($(e.currentTarget).hasClass('dis')) {
      return;
    }
    $(e.currentTarget).prev('div').children('.slider.show:last').removeClass('show').addClass('hide');
    $(e.currentTarget).prev('div').children('.slider.show:first').prev('.slider.hide').removeClass('hide').addClass('show');
    $('#a').removeClass('dis');
    if ($('.slider.show:first').prev().length == 0) {
      $(e.currentTarget).addClass('dis');
    }
  });
});

.center-content {
  width: 1045px;
  margin: 100px auto;
  background-color: #DDD;
}

.slider {
  margin-right: 15px;
  width: 250px;
  height: 100px;
  border: 1px solid black;
}

.slider.show {
  display: block;
}

.show.slider:first-child {
  background-color: green;
}

.show.slider:last-child {
  background-color: red;
}

.slider.hide {
  display: none;
}

#a {
  float: left;
  height: 50px;
  width: 50px;
  margin: 25px 0px 0px -60px;
}

#b {
  float: right;
  height: 50px;
  width: 50px;
  margin: -75px -60px 0px 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center-content">
  <button id="a"> [<] </button>
  <div style="display:flex;">
    <div class="slider hide">0</div>
    <div class="slider show">1</div>
    <div class="slider show">2</div>
    <div class="slider show">3</div>
    <div class="slider show">4</div>
    <div class="slider hide">5</div>
  </div>
  <button id="b">[>]</button>
</div>

I thought div(1) will be green and div(4) will be red when first loaded. but it is not. After click button, div(0) is green and div(5) is red, which means the pseudo class selector works.

does anyone know why pseudo class selector not work?

hi Lister, div1 is not the first, but my css selector is : ".show.slider:first-child", and div0 is ".hide.slider", which means div0 will not be matched with css rule, right? — frnd0707, Jul 07 '17 at 08:05
You have different classes for div 0, yes, but that does not change the fact that is is the first div! Or, to look at it another way: if it was _not_ the first div, what number would it be? The zeroth? — Mr Lister, Jul 07 '17 at 08:26
thanks for help,I misunderstand how ":first-child" works,this link explains how "first-child" works: https://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class — frnd0707, Jul 07 '17 at 08:54

why pseudo class selector works wrong

0 Answers0