Applying different styling to the same class within a different element using the + selector

Have you ever come across a website with code similar to what I've shared on this jsfiddle: https://jsfiddle.net/roa8k7js/

This particular site boasts an elaborate CSS styling sheet, exceeding 10,000 lines in length. When transitioning this website to WordPress, all the styling was successfully preserved and integrated into a theme.

However, after placing each <section> within a wrapper, some issues arose as the styling started behaving unexpectedly.

One of the pivotal rules determining the padding for <section> elements involves a major rule utilizing the + selector:

#layout1 .option-b:not(.custom-bg-image) + .option-b:not(.custom-bg-img)
{
  padding-top: 0;
}

The addition of wrappers has now complicated things as the + selector no longer accurately detects the pattern:

<div class="wrapper1">
  <section class="option-b">This is some text</section>
</div>
<div class="wrapper1">
  <section class="option-b">This is some more text - there shouldn't be any padding on top of this one</section>
</div>


section {
  border: 1px solid black;
}

#layout1 .container1>section {
  padding-top: 2em;
  padding-bottom: 2em;
}

#layout1 .option-b:not(.custom-bg-image)+.option-b:not(.custom-bg-img) {
  padding-top: 0;
}

#layout1 .container1>.wrapper1>section {
  padding-top: 2em;
  padding-bottom: 2em;
}
<div id="layout1">
  <div class="container1">
    <section class="option-b">This is some text</section>
    <section class="option-b">This is some more text - notice how there isn't a padding top on this one</section>
  </div>
</div>

<div id="layout1">
  <div class="container1">
    <div class="wrapper1">
      <section class="option-b">This is some text</section>
    </div>
    <div class="wrapper1">
      <section class="option-b">This is some more text - there shouldn't be any padding on top of this one</section>
    </div>
  </div>
</div>

I am currently exploring potential solutions to adjust the CSS in order to accurately identify a <section> within the subsequent wrapper and define the top-padding value accordingly.

It's important to note that removing the wrappers is not an option, and all sections have already been styled correctly with them included.

htmlcsscss-selectors

Answer №1

Utilizing the sibling selector is limited to elements that share the same hierarchy. Find more information here:

The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.

Below are some alternatives (considering there are only 2 <section> per wrapper as shown in your example):

  • Assign an additional class to override the padding (simplest approach)
  • Target specific nth element
  • Use JavaScript

1 ) Add a "no padding" class to elements where padding is not desired:

section {
  border: 1px solid black;
}

.wrapper1 > section {
  padding-top: 2em;
  padding-bottom: 2em;
}

.wrapper1 > section.pt-0 {
  padding-top: 0;
}
<div id="layout1">
  <div class="container1">
    <div class="wrapper1">
      <section class="option-b">This is some text</section>
    </div>
    <div class="wrapper1">
      <section class="option-b pt-0">This is some more text - no padding on top here</section>
    </div>    
    <div class="wrapper1">
      <section class="option-b pt-0">This is some more text - no padding on top here</section>
    </div>    
    <div class="wrapper1">
      <section class="option-b">This is some text</section>
    </div>
  </div>
</div>

2 ) Target the nth element

section {
  border: 1px solid black;
}

.wrapper1 > section {
  padding-top: 2em;
  padding-bottom: 2em;
}

.wrapper1:not(:first-child) > section {
  padding-top: 0;
}
<div id="layout1">
  <div class="container1">
    <div class="wrapper1">
      <section class="option-b">This is some text</section>
    </div>
    <div class="wrapper1">
      <section class="option-b">This is some more text - no padding on top here</section>
    </div>
  </div>
</div>

3) alternatively, utilize javascript:

const elems = document.querySelectorAll('#layout1 .wrapper1 > .option-b:not(.custom-bg-image)');

if (elems.length > 1) elems[1].style.paddingTop = 0;
section {
  border: 1px solid black;
}

.wrapper1 > section {
  padding-top: 2em;
  padding-bottom: 2em;
}
<div id="layout1">
  <div class="container1">
    <div class="wrapper1">
      <section class="option-b">This is some text</section>
    </div>
    <div class="wrapper1">
      <section class="option-b">This is some more text - no padding on top here</section>
    </div>
  </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

Adding an information panel to each column in jqgrid allows the grid to display a scrolling feature

We have implemented a jQuery grid where the last column contains a link. When this link is clicked, a new panel should appear providing additional information. To achieve this, we utilized a formatter that generates a hidden div along with the link. Howev ...

javascriptjqueryhtmlcssjqgrid

Using webapp2 to serve a stylesheet in a non-Google App Engine environment

After successfully deploying an app using webapp2/jinja2 and a Paste server, I encountered difficulties serving static stylesheets. I managed to access static files by following this method. Additionally, I implemented a StaticFileHandler that I discovere ...

pythoncssgoogle-app-enginestaticwebapp2

Tips for effectively closing div elements

How can I modify this accordion to close when a user clicks on another link, and also change the image of the open "p" tag? Currently, clicking on a link toggles the content and changes the image. However, what I am struggling with is closing the previousl ...

javascriptjqueryhtmlcss

Retrieving elements from the DOM based on their class name

Currently utilizing PHP DOM for my project and facing the challenge of retrieving an element within a DOM node with a specific class name. What would be the most effective method to accomplish this? Update: Ultimately decided to switch to using Mechanize ...

phpcssdom

Is there a way to create a scroll down and scroll up button that is located outside of the scroll box

A game designer challenged me to create a custom scrollbar with unique up and down button styles, as well as a custom-looking scrollbar. I wanted to achieve this without using the native browser scrollbar on Windows in Google Chrome. I attempted the follo ...

javascriptjquerycsshtmlgoogle-chrome

Having trouble with Javascript? Your page unexpectedly resets

Hey there, I'm facing a confusing issue. I created a registration page for a project, and every time I enter the information, it should be stored in a cookie. After entering the information for the first time, I saw it in the bar, but it wasn't p ...

javascripthtml

Encountering a Blank Area at the Top of a Printed AngularJS Screen

Currently, I am tackling an issue in AngularJS while working on the Print Invoice Page. The problem I am encountering is a blank space at the top of the printed screen. Check out the image here Below is my code: HTML <div id="invoice" class="compact ...

javascripthtmlcssangularjs

Guide on leveraging event delegation to trigger a function depending on the id of the clicked element

Although I have experience with event delegation, I am currently facing a challenge in setting up a single event listener that can execute one of three functions based on the ID of the element clicked. Here is the existing code without event delegation: ...

javascripthtml

Tips for resetting the form input fields in Vue.js after the user has successfully submitted the form

I am facing an issue with my registration page. After the user enters some values and successfully submits the form, I want to clear all the fields. To achieve this, I am using a predefined function called reset() inside the script section. However, the ...

javascripthtmlcssvue.js

Struggling to receive a response from request.POST.get within the index function of views.py

I am struggling to develop a web application that shows the IP Address of a hostname entered by the user in a text field. Unfortunately, I keep encountering an error where I can't seem to get a response from the URL. As a beginner in this field, I wou ...

pythonhtmldjangodns

Is there a way to create a validation code in PYTHON/Flask for users based on the URL they enter?

Seeking guidance on how to approach a specific task with Python and Flask. The task involves: Checking if a URL is valid If valid, returning a list of all links on that page and its sub-pages I use Sublime editor running under Windows Powershell. Curre ...

pythonhtmlflask

The MySQL Query Maker

To fetch data from a database for only one row and then generate separate pieces of information, use the following code: <?php session_start(); ob_start(); error_reporting(E_ERROR | E_WARNING | E_PARSE); ini_set("display_errors", 1); set_time_limit(1 ...

phphtmlmysqlcss

ChessboardJs: JavaScript Boards Function Properly on Initial Use Only

Update: The page code can be accessed via my page URL. I'm unsure where the issue lies. Your assistance is appreciated. Issue: Initially, when clicking on the chess puzzles page, everything works fine. However, upon re-clicking from the homepage, th ...

javascriptjqueryhtmlcss

Unlocking the full potential of Bootstrap with the colspan feature

I'm currently in the process of developing an Angular 2 and Bootstrap application. Here's a snippet of my code: <div class="panel-body"> <table class="table table-striped table-bordered" style="width:100%;"> < ...

csstwitter-bootstrapangular

Tips for dynamically including classes in NextJS component with class names from CMS?

I am in search of a solution that will offer some styling flexibility within a CMS to dynamically alter the classes of specific components within my NextJS application. The code snippet I'm working with is as follows: pages/index.js: ... import clien ...

cssreactjsnext.jstailwind-cssserver-side-rendering

Having trouble locating a button on Trello using Selenium in C#

I have been working on automating the Trello Activity extension, specifically trying to use Selenium to automatically click the "Export to CSV" button. In my code, I am attempting to locate the button using xPath: driver.FindElement(By.XPath("//[@id=&bsol ...

c#selenium-webdriverxpathcss-selectorswebdriverwait

Guide to triggering a popover from within another popover using jQuery

Currently, I have a situation where a popover is triggered by clicking on a button. The goal is to trigger another popover from the first popover by clicking on some content within it. If you'd like to see a demonstration, check out this JSFiddle lin ...

jqueryhtmlcss

Stencil - React Integration Does Not Support Global CSS Styling

As per the guidance provided in the Stencil docshere, I have established some global CSS variables within src/global/variables.css. This file is currently the sole CSS resource in this particular directory. Upon attempting to incorporate my components int ...

javascriptcssreactjsstenciljsstencil-component

One Functionality on Button is Failing to Execute among Several Tasks

I've encountered an issue with one of the tasks triggered by a button click. The button successfully executes two out of three tasks (hides them on click), except for the last task which involves a text-blinking JavaScript function. I've used the ...

javascripthtmlscript-tag

Animating CSS when closing a modal box

I followed the instructions from a tutorial on W3Schools here to create this code. The "open model" button triggers the modal to open with a smooth CSS animation, which looks great. However, when I click the close button, the modal abruptly closes without ...

javascriptcssanimationmodal-dialog