Prevent the last child from having styled be applied
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>
:last-child
2 Answers
2
You should just use the :last element selector on your query.
:last
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');
);
You should use :last instead. The :last-child CSS selector consider elements inside the same container:
:last
:last-child
The :last-child CSS pseudo-class represents the last element among a
group of sibling elements.ref
:last-child
$(".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>
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
The question is not about how to not select the
:last-childbecause here it's not about sibling elements and it's not about CSS selector but jQuery selector– Temani Afif
Sep 2 at 8:51