CSS - Customizing the appearance of consecutive child divs

I'm struggling with adjusting the margin between two child divs when they follow each other. The current margin is set at 3rem, but I want it to be 1rem if both child containers have the class "narrow":

Is there a way to achieve this without changing the code for field_item? I'm open to using jQuery as a last resort.

For example:

<body>
    <div class="field_item">
        <div class="narrow video-block">narrow video-block</div>
    </div>
    <div class="field_item">
        <div class="narrow video-block">narrow video-block</div>
    </div>
<body>

Here's some pseudo code to illustrate my question:

IF field_item.narrow is followed by .field_item.wide 
THEN margin-bottom is 5rem.

ELSE IF field_item.narrow is followed by .field_item.narrow
THEN margin-bottom is 1rem.

Any suggestions or solutions would be greatly appreciated!

https://i.stack.imgur.com/QnIao.png

jquerycsssassdrupalcss-selectors

Answer №1

To add margin to all elements with the class .field_item except the last one in a group, you can utilize the CSS selector :not(:last-of-type).

.field_item:not(:last-of-type) {
  margin-bottom: 1em;
}

Upon reviewing additional details:

Considering the updates, it might be beneficial to reconsider your approach. Without sufficient context provided in your question, it is hard to grasp the scenario fully. One option could involve restructuring your DOM.

If restructuring is not viable, you can employ jQuery similar to the following code snippet. This script will identify instances where two consecutive items with the classes .field_item.narrow appear and apply an additional class to them for styling purposes.

$(".field_item").each(function(index) {
  var thisItem = $(this).children(".video-block").first();
  var nextItem = $(this).next(".field_item").children(".video-block").first();
    
  if (thisItem.hasClass("narrow") && nextItem.hasClass("narrow")) {
    $(this).addClass("marginSmall");
  }
});

.marginSmall {
  margin-bottom: 1em;
}

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

"Troubleshooting Problems with Scaling in the jQuery Mouse Wheel Plugin

I am currently utilizing this code in conjunction with the following plugin: mouse wheel $('#painter').on('mousewheel', function(e) { cp.scale(2, 2); var e0 = e.originalEvent, delta = e0.wheelDelta || -e0.de ...

javascriptjquerycanvas

Issue with Angular controller failing to load when link is clicked

I am currently developing a webpage that incorporates Angular and responds to ajax requests by populating data into a table. When I manually enter the address, everything works as expected. However, if I navigate to the page using a link ( <a href="/pro ...

javascriptjqueryhtmlangularjsajax

Having trouble getting the jquery ui datetimepicker to function properly in my node.js application using ejs and express

I am currently trying to implement the functionality found at this link: Below is an excerpt of my code: <html> <head> <script src="http://trentrichardson.com/examples/timepicker/js/jquery-1.7.1.min.js"> </script> < ...

jquerynode.jsexpressdatetimepickerejs

limit stop choice

I'm working on modifying a script to limit the number of selections that can be made. Specifically, I want it to stop allowing selections once the total selected items reach or exceed 4. http://jsfiddle.net/dw6Hf/51/ $(function() { $(".selectabl ...

javascriptjqueryjquery-ui

Utilizing Bootstrap Classes in ReactJS: A Comprehensive Guide

Is it possible to incorporate Bootstrap classes in a React application without actually installing the framework? If so, how can this be achieved and utilized effectively? I would greatly appreciate your assistance with this matter. ...

cssreactjstwitter-bootstrapnpm

How can I achieve a stylish alternating bottom-border effect for my website navigation menu?

Is there a way for me to achieve this navigation style? Here is the code I am working with currently. https://gist.github.com/anonymous/9c239f1b541aa26d461b I'm facing difficulty replicating the line style. Any suggestions on how to accomplish that? ...

cssnavigationlinealternating

Is it possible for the ajax url option to accept an array of URLs rather than just one?

Is there a way to retrieve and store data from multiple JSON URLs in an array? <script type="text/javascript"> urls = ["https://spreadsheets.google.com/feeds/list/1RsiDuydBBHyu4OBjlxq1YH6yT3qcJDMB6-YKU-xxd_k/od6/public/basic?hl=en_US&alt=jso ...

javascriptjqueryajaxarraysjson

Javascript menu toggle malfunctioning with sub-menus

I am in the process of creating a responsive menu for a complex website. The horizontal menu transitions into a vertical layout on smaller screens, with javascript used to toggle the sub-menu items open and closed when clicked. One issue I am facing is wit ...

javascriptjqueryhtmlcssmenu

What is the reason that styled() does not apply styles to the Material-UI <TextField /> component?

I've managed to figure out a solution, but I'm curious about why this code is working: <TextField label='Zip Code' size='small' InputProps={{ style: { borderRadius: '.4rem' }, }} sx={{ width: & ...

cssreactjsmaterial-uistyled-components

Centering Vertical Tabs Using HTML and CSS

I followed a vertical tab tutorial on W3Schools and would like to implement it on my website. However, I am having trouble centering the tabs after reducing their width sizes. I have attempted adding div tags to the code and aligning them to the center wit ...

htmlcss

String iteration with Stylus

Is there a way to remove the brackets and the quotation marks when putting media queries into an object and looping over them? The code works well, but the stylus is causing the output to have unwanted characters. Here's my code: $maxBreakpoints = { ...

cssstringiterationstylus

Combining jQuery methods and selectors within a loop

Can a sequence of selectors and methods be generated within a loop? For instance, assuming an array of elements is given: array[0] = '.type1value1, .type1value2, .type1value3'; array[1] = '.type2value1, .type2value2, .type2value3'; ar ...

javascriptjquery

Mastering the art of maximizing efficiency with the Jquery Chosen Plugin

Currently, I'm facing an issue with the jQuery chosen plugin due to my large datasets causing the select box to hang and slow down. Below is my implementation of the plugin: var request = $.ajax({ method: "POST", url: "ajaxRequest.php", d ...

javascriptjqueryajax

Issue with Domsanitizer bypasssecuritytruststyle functionality on Internet Explorer 11 not resolving

CSS:- Implementing the style property from modalStyle in TypeScript <div class="modal" tabindex="1000" [style]="modalStyle" > Angular Component:- Using DomSanitizer to adjust height, display, and min-height properties. While this configuration work ...

cssangularinternet-explorerangular-dom-sanitizer

Trigger a fire event upon entering a page containing an anchor

My query is similar to this particular one, with slight differences. I am working on a page that includes an anchor, such as page.html#video1. Within this page, there are multiple sections identified by ids like #video1, #video2. Each section comprises of ...

javascriptjqueryhtmleventsanchor

What is the best way to send extra parameters to an ajax callback function?

Currently, I am implementing an ajax call in the following manner: util.AjaxCall(url, successCallbackFunction, errorCallbackFunction); function successCallbackFunction(result) { // Result returned from Ajax } Although everything is functioning correc ...

javascriptjqueryajax

Exploring the Power of JQuery and Partial Views within the MVC Framework

This article discusses the topic of Jquery Partial View. You can find more information about it here. I am looking for guidance on how to submit user input values and send them to an ActionResult controller that returns a partial view. -- Below is the co ...

jqueryasp.netasp.net-mvc

Using Wordpress and JavaScript to dynamically hide a button if a product in the online store does not have an SKU

I'm encountering an issue on my Wordpress site where products with variations are not displaying the inner text on a certain element, despite the fact that the text is present when I inspect the element. Here's the code: const makerBtn = document ...

javascriptcsswordpresshidegetelementsbyclassname

I am experiencing an issue where the jquery sleep function is not being executed during

I currently have an Ajax request that is awaiting a response from another process. function checkProcess() { var flag = 0; while (flag === 0) { $.ajax({ url: "cs/CheckForProcess", async: false, success: ...

javascriptjqueryajaxsleep

Transforming Exposed components (jQuery Tools)

I need to toggle between two elements, exposing one while hiding the other with a single onClick event. Can this be achieved? My current JavaScript code does not seem to work as intended. Here is my existing script: function tutStep1(){ jQuery(' ...

javascriptjqueryjquery-tools