Add a style to every div except for the final one

I've attempted to add a unique style to all divs with the same class within a parent div, except for the last one. Strangely, my code doesn't seem to work as expected for this particular case. Can anyone spot what I might be overlooking? Right now, it is simply applying a 24px bottom margin to all instances of StyledDiv

const StyledDiv = styled.div`
  width: 100%;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;

&:last-child {
  margin-bottom: 0;
}
`;

<div>
   <StyledDiv className='childDiv'>
       <p>Hello World 1</p>
   </StyledDiv>
   <StyledDiv className='childDiv'>
       <p>Hello World 2</p>
   </StyledDiv>
   <div>
       <p>Some other text and not a styled div</p>
   </div>
</div>
javascriptcssreactjs

Answer №1

Given that the <StyledDiv> is not positioned as the final child, it becomes necessary to adjust the selector in order to verify if the element possesses a succeeding <SyledDiv> sibling

Important Reminder: this condition hinges on all <StyledDiv> elements having the shared class childDiv

const StyledDiv = styled.div`
  width: 100%;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;

&:not(:has(~ .childDiv)) {
  margin-bottom: 0;
}
`;

<div>
   <StyledDiv className='childDiv'>
       <p>Hello World 1</p>
   </StyledDiv>
   <StyledDiv className='childDiv'>
       <p>Hello World 2</p>
   </StyledDiv>
   <div>
       <p>Some other text and not a styled div</p>
   </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React SelectionMenu

For the language selection feature on my website, I initially used Select which worked in changing the language. However, I faced an issue with image placement within Select, prompting me to try DropdownButton instead. But now I am facing a challenge in re ...

reactjsreact-bootstrap

The menu will expand to full width, with each list item evenly sharing the width to achieve full coverage

I am currently facing an issue with my horizontal menu on my website. I want the menu to stretch across the full width of the site, but I can't seem to get it right. Here is the code for my menu: <nav> <ul id="menu" class="menu"> &l ...

htmllistcssresponsive-design

Can a variable containing HTML code be iterated through with a loop?

I am currently working on setting up a select button that will receive options from an ajax call. The ajax call is functioning properly. However, I am facing a challenge when trying to create a variable containing the HTML. I am unsure of how to iterate a ...

javascripthtmlajax

Adjustable textarea with automatic height based on content and line breaks

Imagine you have a textarea with text that includes line breaks. If you style it like this: textarea { height: auto; overflow: hidden; resize: none; } Upon loading the page, the textarea will only adjust its height based on the content until it enc ...

javascripthtmlcss

Using jQuery, you can easily update the value of the nth-child(n) for a cloned element

Looking to duplicate an HTML element and assign new values to its child elements? Here's my current HTML structure: <div id="avator" class="avator" style="display:none"> <label><a href="/cdn-cgi/l/email-protection" class="__cf_email ...

htmljquerycss

Struggling with identifying errors in the Javascript code for my assignment

My code is giving me trouble and I could really use some assistance You can find my code in this GitHub folder: link. To see the project in action, visit this page on GitHub Pages: link. The task involves iterating over an array of names and printing eit ...

javascripthtmldebuggingweb

Encountered an issue while trying to add images and text simultaneously in asp.net

I am trying to modify my code by adding an image along with the text. Here is the updated code: $(".ChatSend").click(function () { strChatText = $('.ChatText', $(this).parent()).val(); var recievertext= $('.ausern ...

javascriptjqueryasp.netjquery-uisignalr

Connecting the input[date] and Moment.js in AngularJS

For the purpose of formulating a question, I have prepared a simplified example: ... <input type="date" ng-model="selectedMoment" /> ... <script> angular.module('dateInputExample', []) .controller('DateController', [& ...

javascriptangularjsmomentjs

Creating a Dynamic Form with jQuery, AJAX, PHP, and MySQL for Multiple Input Fields

Success! The code is now functional. <form name="registration" id="registration" action="" method="post"> <div id="reg_names"> <div class="control-group"> <label>Name</label> <div class= ...

javascriptphpjquerymysqlajax

Unable to load page redirection

I am experiencing an issue with this page not redirecting to the appropriate mobile or desktop page when accessed. Below is the code snippet in question: <html> <head> <title>Loading...</title> </head> < ...

javascripthttp-redirect

Begin the React counter with a starting value of two

Recently, I set up a new React application using the create-react-app command and ran a test with a render counter. Here is the code snippet: import React, { useState } from "react"; let render = 0; export default function App() { const [cou ...

javascriptreactjs

What is the best way to iterate through an Object.entry and multiply one value by another key value within a loop?

I am looking to enhance the functionality of my Vue.js composition API web application by calculating the total number of employed workers in different sectors. However, I want to multiply the number of workers by another key:value property instead of ju ...

javascriptfunctionloopsvue.jsvue-composition-api

SASS causing conflicts with CSS breakpoints selector overrides

I am working with a partial file named _display.scss. It includes various @mixin and styling classes related to the display CSS property. _display.scss @mixin d-block{ display: block; } @mixin d-none{ display: none; } .d-block{ @include d- ...

csssassscss-mixins

Execute a JavaScript function prior to initiating an AJAX request

To streamline the process of making AJAX calls in my .NET project, I have developed a function called checkConnection that checks for internet connectivity before each call. However, currently, I am manually calling this function on every button click that ...

javascriptjqueryasp.netajax

The JSON output is not displaying correctly

I've been attempting to utilize JSON.stringify in order to format my json object for better readability. However, it doesn't seem to be working as expected. Can someone please offer assistance in identifying what I might have done incorrectly? ...

javascriptjsonnode.js

Tips for configuring page-specific variables in Adobe DTM

Although I have integrated Adobe Analytics for tracking on my website, I am facing difficulty in properly defining the variables. This is how I attempted to define the variable: var z = new Object(); z.abc = true; z.def.ghi = true Despite following the ...

javascriptadobe-analytics

Incorporating Socket.io with Express.js for real-time communication

I am currently working on developing an application where users can request services and receive notifications once a service provider accepts their request. The technology stack I am using includes Node.js, Express.js, Socket.io, and React.js. Below is t ...

node.jsreactjsexpresssocket.io

Toggle the visibility of a dropdown menu based on the checkbox being checked or unchecked

One challenge I am facing involves displaying and hiding DropDown/Select fields based on the state of a Checkbox. When the checkbox is checked, the Dropdown should be visible, and when unchecked, it should hide. Below is the code snippet for this component ...

reactjstypescriptcheckboxmaterial-uishow-hide

Having trouble accessing array elements in react components

When retrieving JSON data for a single student from the server in my React application, I am able to access this.state.info.Firstname but encountering difficulty accessing this.state.info.Father.Firstname. How can I access this information? This is my Rea ...

javascriptjsonreactjs

Transforming a JSON object property value from an array into a string using JavaScript

I am facing an issue with an API call I am using, as it is sending objects with a single property that contains an array value (seen in the keys property in the response below). However, I need to work with nested arrays in order to utilize the outputted v ...

javascriptjson