display div only if the adjacent element does not contain a specific class

I have a situation with two divs, one of which has the class "d-none":

    <div class="inexistente">
      Ainda não existem documentos adicionados 
    </div>
     <div class="existentes d-none"></div>

My goal is to hide the other div, with the class "existentes", when it no longer has the class ".d-none".

I have tried using the following selectors:

existentes:not(.d-none) + .inexistente {
    display:none;
}
existentes:not(.d-none) ~ .inexistente {
    display:none;
}

However, both attempts did not produce the desired result. Can someone please point out what I may be doing wrong?

Answer №1

Styling an element based on "future elements" is not possible. However, rearranging the HTML order of the elements can achieve the desired effect.

.existentes:not(.d-none) ~ .inexistente{
display:none
}
<div class="existentes"></div>
<div class="inexistente">
      No documents have been added yet 
    </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

Utilizing ng-class in AngularJS to apply dynamic classes based on conditions

In my project, I am dynamically applying different CSS classes based on the variable 'statetostartwaves'. If the variable is '0', then class 1 (preloader_pause waves) should be used. Otherwise, if it is '1', then class 2 (prel ...

What could be causing the distance between the image and the navigation bar?

Hey there, I'm struggling with a pesky little gap that's sneaking in between an image and my navigation bar. I've exhausted all my usual tricks like setting inline-blocks on the ul and li levels, and trying to align everything left with text ...

The phenomenon of an invisible Absolute or relative position leading to grid components overlapping in Next.js

I've been struggling with this issue for over 48 hours now. I've attempted to troubleshoot by commenting out everything except the affected components and even swapping entire components around, but the problem persists. Oddly enough, rearranging ...

When the browser is resized, elements do not change position

I am attempting to build a website with solely horizontal scrolling. Check out this demo for reference. My issue arises when I resize the browser, as the content (paragraph within the light yellow box) fails to reposition itself. Ideally, I would like that ...

The process of setting up React in the terminal becomes tricky when the VS code editor is directing to a non-existent path

Issue with VS Code editor not recognizing existing path Recently attempted to install React using the npx command in the terminal, following steps from various tutorials on YouTube. Despite trying all suggested methods, the installation didn't succee ...

automatically changing the input type based on the selected option in the dropdown menu

Currently, I am working on a project that involves attendance management. One of the key features I am implementing is a drop-down box where users can select a month. When a month is selected, a dynamic number of buttons will be generated in a separate div ...

Angular Material List Component with Material Table

In this code snippet, everything seems to be functioning perfectly. When you click on the magnifying glass icon, some additional information is displayed: <mat-card *ngIf="(bills && bills.length > 0) && all" style="overflow-x: auto;" ...

Struggling to create a CSS dropdown menu where the dropdown items refuse to align to the left

I am currently working on creating a dropdown menu to reveal hidden elements on mobile devices such as smartphones. However, I am facing an issue where the child elements of the dropdown menu are appearing to the right of the parent element instead of the ...

How can we modify the position of a header from fixed to relative when the mobile drop-down menu is opened?

I am experiencing an issue with my responsive design. When viewed on a device that is less than 600px wide, the drop-down multi-level navigation overflows downward and does not scroll because the header has a fixed position. As a result, the tabs in the me ...

Tailwind's unique approach to custom @font-faces allows for

Recently, I've been working on a project with Tailwind CSS. I encountered an issue when trying to implement a custom font using @font-face. Despite placing the font file in public/assets/font directory, it still doesn't seem to load properly. Her ...

The row containing a list of inline elements cannot be cleared in Safari due to the ineffectiveness of the

I have encountered an issue with my list formatting that seems to work in Chrome and Firefox but not in Safari. The pseudo attribute is not taking effect in Safari and I am wondering if there is a workaround or a different approach that I should take. (Not ...

The dropdown menu in the right-aligned navbar section on Bootstrap displays a panel arrow to the left

I'm currently utilizing bootstrap to design a top navigation bar for an ecommerce website that resembles Facebook's layout. I have included a dropdown option on the right side of the top link labeled "Account" to display various account related a ...

What is the best way to navigate between different areas of an image using html and javascript?

I am currently in the process of learning how to develop mobile applications, and I am still in the early stages. Although this question is not directly related to mobile development, it pertains more to html/css/js. My goal is to create a simple game wh ...

"Exploring the Impact of Font Style on Text Color in Gtk3 Text

After creating a CSS provider using gtk_css_provider_new and loading it with gtk_css_provider_load_from_data, the style data "textview { color: red; font: 30px serif; }" is applied to a gtk_text_view using gtk_style_context_add_provider. However, the resul ...

Creating a customizable theme for a website built with Bootstrap, incorporating changes to brand colors and more, by utilizing a .less file

I have built my asp site using bootstrap as the client-side CSS framework. I am currently working on implementing a feature that allows users to customize their site's brand color and other aspects, with these changes being saved permanently. While I ...

Utilizing a wysiwyg text editor in conjunction with Angular 2

I am currently implementing a wysiwyg feature in my Angular2 project. When I include the code in the index.html page (the root page), it functions correctly. However, when I try to use it in a child view HTML file, the CSS and JavaScript do not load prope ...

The margin adjusts based on the size of the screen and can vary in width according

Is there a way to dynamically adjust the left margin based on screen size? For example, when the screen width is 1351px, I want the margin to be 12.583vw, and if it's 2250px wide, the margin should increase to 29.802vw. I'm unfamiliar with using ...

Determine the total number of iterations that the marquee tag completes during the animation

Can the total number of times the marquee tag iterates be tracked? I am interested in triggering a particular action after a specific amount of animations, say the nth animation. While I have come across events like onbounce and onFinish, unfortunately th ...

Is there a term similar to "Rise above the Rest" in the world of Web Development?

Hey, I've encountered a new issue right now. Currently, I have two elements that are fixed to the top and bottom of the page. However, the elements in between them are overlapping the top element. Even though I tried keeping both elements fixed, th ...

What is the best way to properly center my navigation in Bootstrap 4?

My search for a solution to center the navigation in Bootstrap 4 led me to the discovery of the .mx-auto class, which worked perfectly. However, I encountered a drawback related to the brand size displayed before the navigation. In this demonstration, I h ...