CODEWITHSUNDEEP
javascriptjqueryhtmlcss
SD_DEV123
SD_DEV123

Reputation: 113

Prevent the last child from having styled be applied

I need to prevent the last child from having backgroundColor added. The reset box needs to stay white. I don't want to give the reset box a different class just to prevent it from changing color. I need to have the styles not be added. Any help or push in the right direction would be much appreciated. I tried using :not(:last-child) but that didn't seem to work.

$(".btn").click(function () {
  boxColor = $(this).val();
$(".box:not(:last-child)").css('background-color', boxColor);
});

Heres my code: 

$(".btn").click(function () {
  boxColor = $(this).val();
  $(".box").css('background-color', boxColor);
});

$(".reset").click(function () {
  $(".box").removeAttr('style');
});
body {
  background: lightgrey;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: row;
  max-width: 980px;
  margin: 0 auto;
}

.col-3 {
  flex: 0 0 24.999%;
}

.box {
  height: 200px;
  max-width: 230px;
  margin: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.box.red {
  background: #E53A40;
}
.box.green {
  background: #285943;
}
.box.blue {
  background: #6AAFE6;
}
.box.white {
  background: white;
}

@media (max-width: 768px) {
  .col-3 {
    flex: 0 0 100%;
  }

  .box {
    max-width: 100%;
    margin-bottom: 1em;
  }
}
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Test</title>
</head>
<body>
  <div class="container">
    <div class="col-3">
      <div class="box red">
        <button class="btn" value="#E53A40">Red</button>
      </div>
    </div>
    <div class="col-3">
      <div class="box green">
        <button class="btn" value="#285943">Green</button>
      </div>
    </div>
    <div class="col-3">
      <div class="box blue">
        <button class="btn" value="#6AAFE6">Blue</button>
      </div>
    </div>
    <div class="col-3">
      <div class="box white">
        <button class="reset" id="reset">Reset</button>
      </div>
    </div>
  </div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 3

Views: 189

Answers (2)

Temani Afif
Temani Afif

Reputation: 273626

You should use :last instead. The :last-child CSS selector consider elements inside the same container:

The :last-child CSS pseudo-class represents the last element among a group of sibling elements.ref

$(".btn").click(function () {
  boxColor = $(this).val();
$(".box:not(:last)").css('background-color', boxColor);
});

$(".reset").click(function () {
  $(".box").removeAttr('style');
});
body {
  background: lightgrey;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: row;
  max-width: 980px;
  margin: 0 auto;
}

.col-3 {
  flex: 0 0 24.999%;
}

.box {
  height: 200px;
  max-width: 230px;
  margin: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.box.red {
  background: #E53A40;
}
.box.green {
  background: #285943;
}
.box.blue {
  background: #6AAFE6;
}
.box.white {
  background: white;
}

@media (max-width: 768px) {
  .col-3 {
    flex: 0 0 100%;
  }

  .box {
    max-width: 100%;
    margin-bottom: 1em;
  }
}
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Test</title>
</head>
<body>
  <div class="container">
    <div class="col-3">
      <div class="box red">
        <button class="btn" value="#E53A40">Red</button>
      </div>
    </div>
    <div class="col-3">
      <div class="box green">
        <button class="btn" value="#285943">Green</button>
      </div>
    </div>
    <div class="col-3">
      <div class="box blue">
        <button class="btn" value="#6AAFE6">Blue</button>
      </div>
    </div>
    <div class="col-3">
      <div class="box white">
        <button class="reset" id="reset">Reset</button>
      </div>
    </div>
  </div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 1

Uli
Uli

Reputation: 311

You should just use the :last element selector on your query.

I think you also might want to just set background color to none instead of removing the whole style attribute, just in case you want to add more css styles to the elements in the future that shouldn't be reset.

$(".btn").click(function () {
  boxColor = $(this).val();
$(".box:not(:last)").css('background-color', boxColor);
});

$(".reset").click(function () {
  $(".box").css('background-color', 'none');
});

Upvotes: 1

Related Questions