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

Incorporate New Material into DIV Using a Specific Class Identifier

I need to customize the default output of Wordpress menu using <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>. My goal is to change the appearance of pages with submenus. Currently, pages with a submenu are fo ...

phpjqueryhtmlcsswordpress

A step-by-step guide on toggling between light mode and dark mode using water.css

Implementing the water.css on my website, I have this JavaScript code: function setTheme(themeName) { localStorage.setItem('theme', themeName); document.documentElement.className = themeName; } // function to toggle between light and dark ...

javascripthtmlcss

"Implementing a form submission feature in React.js that dynamically applies a class to the result element

I recently developed a basic BMI calculator using React.js. I am now attempting to implement a feature where if the calculated BMI result falls outside the range of a healthy BMI, the result text will be displayed in red color (I am utilizing styled-compon ...

cssreactjsstyled-componentsclassnameclass-names

Is there a way to identify a change in the URL using JQuery?

My goal is to clear the localStorage when a user navigates to a different page. For instance, if I am currently on . When the user goes to the URL, , I want to clear the localStorage. This is my script using JQuery. $(window).unload(function(){ if ...

javascriptjquery

conceal specific language options within the dropdown selection box

In my user interface, I have implemented a drop-down menu that allows users to select their preferred language. I want the selected language option to disappear from the drop-down menu once chosen. Here is the HTML code snippet: <li> < ...

javascriptjquerydrop-down-menu

Adding the active class in Bootstrap can be easily achieved in CodeIgniter by using the

I am seeking guidance on how to add an active class in CodeIgniter when dividing the view into three separate files. These files include: header.php page1.php ... page10.php footer.php According to this thread, there seems to be no clear solution prov ...

phpjquerycsscodeigniter

Display a text over a full-screen HTML5 video

Is there a way to display text on a fullscreen video in HTML? I have tried using absolute positioning for the text and relative/fixed/none positioning for the video, but it does not work when the video is in fullscreen mode. I also attempted to call the ...

javascripthtmlcssvideo

Ways to convert a jQuery object into HTML that can be utilized?

When running the code below, an alert message of "object Object" is displayed: var shipImgs = $("#div").children(); alert(shipImgs); The container with id "div" includes a total of 4 children (image tags). <div id="div"> <img src="/imgs/spa ...

javascriptjquery

Is it feasible to place an image on top of a box?

Hello everyone, I have been trying to figure out how to achieve a specific layout in React. I am using MUI so there is no need for any hard-coded CSS. However, my attempts have not been successful so far. The layout I am aiming for consists of an image on ...

cssreactjsmaterial-ui

Glitch discovered in jquery toggle leads to severe display problems

Take a look at this example to better understand: http://jsfiddle.net/3PVsy/ Do you have any suggestions for how to address this issue? ...

jquerytoggleshadowslidedownartifacts

What could be causing the issue with .html() not functioning properly on Internet Explorer 7?

My asp.net-mvc website is experiencing strange behavior in Internet Explorer 7 on a particular page. The HTML result of an AJAX call is not displaying on the screen, although it works perfectly fine in Firefox, Chrome, and IE8. Initially, I suspected that ...

jqueryajaxinternet-explorer-7asp.net-mvc-partialview

experiencing difficulty with a background image that is failing to display

I'm having a hard time getting my background-image to show, even though I know it should be an easy fix. Here's the code for the div class where I want the background to display: .sun-face{ background-image: url("./images/Sun_face.svg"); } ...

javascripthtmlcss

jQuery blueimp File Uploader: Transferring multiple files to the server on Internet Explorer

After customizing the demo for my Rails application, I encountered an issue with the plugin in Internet Explorer. While it works smoothly on Chrome and Firefox, in IE (all versions) it fails to upload all but one file when multiple files are selected, and ...

javascriptjqueryruby-on-railsruby-on-rails-3file-upload

The div is struggling to contain the image, can anyone assist with this issue?

Greetings all! I am a beginner with CSS and currently working on my website. You can check it out at this link. I am facing an issue where the image on my site is not fitting properly and it keeps repeating. Can anyone guide me on how to fix this using CS ...

css

Modifying the Vue.js Vue3-slider component for custom color schemes

Currently, I am using the vue-slider component and would like to customize the color of the slider itself. The specific class that needs to be styled is "vue-slider-dot-tooltip-inner". Below is a screenshot displaying the original CSS styling for vue-slid ...

javascripthtmlcssvue.jssass

The Art of Div Switching: Unveiling the Strategies

I have a question regarding my website. I have been working on it for some time now, but I have encountered a challenge that I am struggling to overcome. After much consideration, I am unsure of the best approach to take. The issue at hand is that I have ...

javascriptcsshtmldom

Utilizing Angular's ngShow and ngHide directives to hide spinner when no data is retrieved

I'm having an issue with the HTML code below. It currently displays a spinner until a list of tags is loaded for an application. However, the spinner continues even if no events exist. I want to make the spinner disappear and show either a blank inpu ...

javascriptjqueryhtmlangularjs

Achieving uniform distribution of items within a flex container

I have been struggling since yesterday to make this work. I just can't seem to get these flex items to fill the container equally in width and height. No matter what I try, it's not cooperating. <html> <meta charset="utf-8"> ...

htmlcssflexbox

Managing an iframes website using buttons and links: Tips and tricks

I am trying to create a website that includes an iframe for navigating through external websites using previous and next buttons. I also want to display the links on a sidebar so that users can click on them to automatically load the site in the iframe. I ...

javascriptphpjqueryhtmliframe

The JQUERY Uncaught Error: Syntax error message popped up when trying to access an unrecognized expression on the javascript: void(0)

I've encountered an issue after upgrading to jQuery 3.4.1 while using bootstrap 3. The console keeps showing this error: Uncaught Error: Syntax error, unrecognized expression: # Here is the section of code causing the error: <div class="btn-grou ...

javascripthtmljquerytwitter-bootstrap-3