Modify the surrounding container of the chosen selector

I have a complex website with multiple containers. My objective is to apply a color to a container with the class "colorme" when another container, located far away from it, has the class "active". Here is how the code is structured:

.tooltip:has(tooltip > div.active)~main-view>div.colorme {
  background: orange
}
<div class="tooltip">
  <tooltip>
    <div class="active">
      My tooltip is active
    </div>
  </tooltip>
</div>
<div class="othercontainer">
</div>
<main-view>
  <div class="colorme">
    Test
  </div>
</main-view>

My goal is to change the background color of the colorme div as soon as the <tooltip> tag contains a container with the class active. While I'm unsure if this can be achieved, I believe this structure might help in implementing it.

htmlcss

Answer №1

Regrettably, achieving this may prove to be a challenge as the :has CSS selector lacks solid support at present. Refer to the compatibility table provided here: https://caniuse.com/css-has - notably, Firefox does not offer support for it, which is significant considering its market share.

Nevertheless, your approach appears logical. An alternative method to ensure smoother implementation could involve adding or removing a class from a parent element. This would enhance clarity and reduce the need for intricate CSS.

<div id="wrapper" class="has-active-tooltip">
  <div class="tooltip">
    <tooltip>
      <div class="active">
      My tooltip is active 
      </div>  
     </tooltip>
  </div>
  <div class="othercontainer"></div>
  <main-view>
   <div class="colorme">
    Test
   </div>
  </main-view>
</div>

#wrapper.has-active-tooltip main-view > .colorme {
  /*styles go here*/
}

Answer №2

If you want to apply styles to a specific element based on its parent container, you can use the :has() pseudo selector as shown below:

.common-parent:has(tooltip .active) main-view .colorme{
    color: orangered;
}
<div class="common-parent">
    <div class="tooltip">
        <tooltip>
            <div class="active">
                My tooltip is active
            </div>
        </tooltip>
    </div>

    <div class="othercontainer">
    </div>

    <main-view>
        <div class="colorme">
            Test
        </div>
    </main-view>
</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

Looking to retrieve just your Twitter follower count using JavaScript and the Twitter API V1.1?

I am trying to retrieve my Twitter follower count using JavaScript/jQuery in the script.js file and then passing that value to the index.html file for display on a local HTML web page. I will not be hosting these files online. I have spent weeks searching ...

javascripthtmlajaxsvgtwitter

To activate an underline on text, simply right-click and select "text

All the anchor tags on my website have been styled with text-decoration: none. Additionally, I have added a CSS rule based on a helpful answer: a, a:hover, a:active, a:visited { text-decoration:none; } However, whenever I right-click on a link on my ...

css

Ways to unlock all the information windows in Google Maps

Is it possible to automatically display all info windows on the map when it is first opened, eliminating the need for users to click on markers? In other words, I would like all info windows for all markers to be shown by default when the map is opened. ...

javascriptphphtmlgoogle-mapsgoogle-maps-markers

The iPhone display scaling issue is causing difficulty viewing the entire website

Currently experiencing difficulties with a page that lacks sufficient content, resulting in a smaller height. As a result, the iPhone is scaling the page and cutting off the full menu bar (960px wide). I attempted to set a minimum height using a media quer ...

iphonehtmlcssmedia-queries

Discrepancy in CSS rendering in Chrome and Firefox

When viewing in Chrome, the stats display properly within the gray box at the bottom left corner. However, when using Firefox, the stats appear positioned much lower below the box, with the bottom half of them hidden from view. Here is my CSS code being ...

cssgoogle-chromefirefox

Encountering difficulties with the mobile display of a Wordpress theme

I am currently working with the megashop theme on WordPress and I have a few queries that need addressing: Is there a way to modify a specific setting exclusively for views smaller than desktop size, without impacting the desktop view? For example, the m ...

phphtmlcsswordpresstwitter-bootstrap-3

Can Angular's built-in internationalization features be used to translate bindings?

Challenge The task at hand involves integrating translations into an Angular 6 application to support static text in multiple languages. The objective is to have the ability to choose a language during the build process without requiring dynamic translati ...

javascripthtmlangularinternationalizationangular-i18n

A New Approach to Initializing Web Pages in ASP.NET (with a Surprising Twist)

Well, I've encountered quite the puzzling issue with a project I'm working on (it could even make it to the Daily WTF), and I'm hoping for some help in finding a solution. (Apologies in advance for the lengthy explanation...) About a month ...

.netasp.netjavascripthtml

Tips for utilizing append and remove to modify HTML forms

Currently, I am working on a WordPress project that requires the use of append and remove for dynamically changing forms in HTML. I attempted to implement this functionality, but encountered some errors. The code snippet below provides a brief overview of ...

javascriptjqueryhtmlwordpressforms

Inserting a cell into a duplicated table while keeping the original table intact

I am looking to insert a new TD into a cloned table so that it exists only in the cloned version and not in the original one. This way, users won't accidentally remove the original table leaving nothing to be cloned :) Currently represented as follow ...

jqueryhtml

Maintain the button's color when clicked UNTIL it is clicked again

I am facing a challenge where I need to dynamically select multiple buttons that change color upon click. Once a button is clicked, it should change color and if clicked again, revert back to its original color. Unfortunately, I cannot rely on HTML attribu ...

javascripthtmlvue.jsbuttonbootstrap-4

Trying to align a Material UI button to the right within a grid item

I'm attempting to right float the button below using material-ui, but I'm unsure of how to achieve this: <Grid item xs={2}> <Button variant="contained" color="secondary&quo ...

cssreactjsbuttonmaterial-ui

Every div must have at least one checkbox checked

Coding in HTML <div class="response"> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> </div> <div class="response"> <input type="check ...

javascriptjquerycss

Achieving centered text alignment in a span using Bootstrap 5

I am facing an issue with a span in an input group that has a minimum width of 6rem. This is causing the text to not be centered, as spans typically adjust to the width of the text itself. .input-group-text { min-width: 6rem; } <link rel="stylesheet ...

htmlcssbootstrap-5

Enhance your UI experience with a beautifully styled button using Material-

I was using a Material UI button with a purple background. <Button component={Link} to={link} style={{ background: '#6c74cc', borderRadius: 3, border: 0, color: 'white', heig ...

javascriptcssreactjstypescriptstyled-components

Guide to binding input type= 'email' in Knockout.js

My project utilizes KnockoutJS with MVC. I am seeking assistance on determining whether an emailId is valid or invalid. Based on this validation, I need to dynamically enable/disable a button and set an error title for the corresponding textbox. Below is ...

javascriptjqueryhtmlknockout.jsknockout-mvc

HTML document without a defined delimiter is present

Why is the HTML in a here document not being stored as a string? The HTML content on the screen is displaying along with the "HTMLBLOCK;" code. What could be causing this? <? php <<<HTMLBLOCK <html> <head><title>Menu</titl ...

phphtmlheredoc

Change the position of buttons inside a Bootstrap 4 modal to the left side

I am currently working with a modal in bootstrap 4 and I would like to reposition the 'cancel' and return buttons to the left side of the modal. I have set up a js fiddle for reference: https://jsfiddle.net/andrewsolis/08v6znox/. Below is my HTML ...

htmlcssbootstrap-modalbootstrap-4

Troubleshooting Vue 3 Options API custom element with non-functional Bootstrap js files

Having trouble incorporating Bootstrap 5 into a Vue 3 Options Api custom element? Check out my setup below: import { defineCustomElement } from 'vue' import 'bootstrap/dist/js/bootstrap.bundle' import App from './App.ce.vue' ...

cssvue.jsvuejs3bootstrap-5custom-element

Utilizing Dynamic URLs and Transmitting Non-User Input Data from HTML to Python via Flask

After doing some research, I discovered that data can only be sent from input forms in HTML to Python using the POST method. I am now trying to find a way to pass a value (originally stored in a dictionary passed from Python) from HTML to Python. I have t ...

pythonhtmlpython-3.xflask