Identifying the presence of a CSS class in order to add styling to a different element

Looking for help with CSS:

/* targeting laptops */
@media only screen and (pointer:fine) and (max-device-height: 620px) {
    #root:has(.projects) ~ body {
        overflow: auto; /* allow scrolling */
    }
}

My desired outcome is to set overflow: auto on the page if we are on a laptop (pointer: fine) with a window height of 620px or less, and if there is a .projects element under #root (meaning we are on the projects page).

I am aware that the issue lies here:

#root:has(.projects) ~ body

What could be causing this not to work, and how can I achieve my intended result?

javascripthtmlcssreactjs

Answer №1

The ~ selector in CSS is specifically used to target sibling elements. However, in React, the relationship between body and #root makes the ~ selector ineffective. An alternative approach could be:

body:has(#root .projects) {
  overflow: auto;
}

This code snippet styles the body element if it contains an element with the class .projects, which is a child of an element with the id #root.

Desktop https://i.sstatic.net/zuZhH.png

Mobile https://i.sstatic.net/lJSJO.png

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

Exploring the concept of inheritance and nested views within AngularJS

I've encountered a challenge while setting up nested views in AngularJS. Utilizing the ui-router library has been beneficial, but I'm facing issues with separate controllers for each view without proper inheritance between them. This results in h ...

javascriptinheritanceangularjstypescriptangular-ui-router

Issue with getting Bootstrap sticky-top to function on sidebar column

My goal is to implement a sticky sidebar on the right side of the page. The sidebar menu is contained within a grid column. I have attempted to utilize the sticky-top class, following the guidance provided in this question, but unfortunately, it does not s ...

htmlcssbootstrap-4sticky

Cannot trigger a click event on nginclude in AngularJS

I have a question regarding including a new page using the nginclude directive. The click event defined in the included page is not working properly. Main Application: <div ng-app=""> <input type="text" ng-model="ss"/> <div ...

javascriptangularjs

Struggling with getting React to successfully fetch data from an Express API. Any suggestions on how

I am having trouble with my fetch call to the express API. Even though I receive a response status of 200, I am still getting the index.html instead of the JSON data I need. Here is an overview of my setup: package.json "version": "1.0.0&qu ...

javascriptreactjsexpress

What is the best way to implement vuelidate when dealing with an array of objects?

In my form questionnaire, I am looping through an array of objects. Each object has five properties, but only one property needs validation. The validation setup in the component looks like this: specificGifts: { $each: { passThrough: { ...

javascriptvue.jsvuelidate

Troubleshooting the Ineffectiveness of AJAX in Image Map Coordinate Hover Feature

I am currently facing an issue with setting up an image map with ajax hover functionality to retrieve information from the database table major_occurrence. Unfortunately, the ajax call does not seem to be working at all. The hover element is clickable and ...

phphtmlcssajaximagemap

When attempting to apply decoration, it appears that calling Object(...) is causing an error

Struggling to create an observable property using decorate from mobx-react, but encountering the following error: Uncaught TypeError: Object(...) is not a function at Object../src/vrp-ui/Button.js (Button.js:32) at __webpack_require__ (bootstrap 8 ...

reactjsmobx-react

Exclude a particular row from a table when there is no identifier

My PHP code generates a basic table. <table border="1" id="control> <tbody> <tr>...</tr> <tr>...</tr> <tr>...</tr> //Row #3 <tr>...</tr> <tr>... ...

javascripthtmlcss

I am searching for an uncomplicated approach to eliminate duplicate arrays of objects

Question: const info=[ { id: 123, name: "dave", age: 23 , address:city:"chennai"}, { id: 456, name: "chris", age: 23, address:city:"delhi"}, { id: 789, name: "bob", age: 23, address:city:& ...

javascriptarraysreactjsobjectduplicates

I am interested in sending an email from a PDF document based on the selected check boxes

I have added a button in a PDF form that says "send an email" and I would like the form to be sent to different email addresses based on which checkboxes were selected previously. For example, there is a question about the "Size of the company" with 2 che ...

javascriptemailpdf

What is the reason behind having to refresh the page or switch to another tab for the field to display?

Currently, I am in the final stages of completing my update form. However, I am facing an issue with the conditional field. The select field should display a conditional field based on the selected value. The problem I'm encountering is that I need to ...

reactjstypescriptnext.jsreact-hook-formzod

Is it possible to eliminate additional properties from an object using "as" in Typescript?

I am looking for a way to send an object through JSON that implements an interface, but also contains additional properties that I do not want to include. How can I filter out everything except the interface properties so that only a pure object is sent? ...

javascripttypescript

While attempting to import modules in Visual Studio Code, an error message appears stating "Unexpected token {"

Greetings! I am currently using Visual Code to run my project and would like to share my code with you. In the file external.js: export let keyValue=1000; In the file script.js: import {keyValue} from './external.js'; console.log(keyValue); ...

javascriptnode.jsimportmoduleexport

Boost the scrolling velocity of my sidebar using Jquery

Hello there, I am completely new to the world of web development and particularly to using JavaScript and jQuery. I am interested in learning how to adjust the speed at which my Sidebar scrolls down as the user navigates through the page. Here is the jQue ...

javascripthtmljquerycss

The mongoose library is not throwing any errors, indicating that the database connection has been established successfully

There are no errors in my code and it's a simple mongoose query - const posts = await Post.find(); console.log(posts); res.status(200).json({ status: 'success', results: posts.length, data: { ...

javascriptmongodbapimongoose

Move the aircraft across the display in a lively animation

I need help creating an animation where a plane flies across the screen, exits from the left side, and re-enters from the right side in a continuous loop. How can I achieve this effect to make the plane fly endlessly across the screen? Here is my code: ...

jquerycssanimationjquery-animate

When utilizing an 'imported' asynchronous function, make sure to clean up the useEffect

Please do not mistake this for a duplicate. Despite my thorough search on various blogs and sources, I have yet to find a solution. My primary question is 'how can I address the error of react state change in unmounted component, and also cancel an a ...

javascriptreactjsuse-effect

"When choosing an item from the Select menu, the selected MenuItem does not appear

I am having trouble with dynamically populating my dropdown using data from axios.get. The selected option is not displaying in the select box. componentDidMount = (e) => { axios.get('https://jsonplaceholder.typicode.com/users') ...

reactjsmaterial-ui

Storing segments of URL data for future use in React applications

Is there a way to extract information from a URL? I wish to utilize the appended details in this URL http://localhost:3000/transaction?transactionId=72U8ALPE within a fetch API. My goal is to retrieve the value 72U8ALPE and store it either in a state var ...

javascriptreactjs

IE9 crashes when displaying elements with float:left style

After clicking the "off" and then "on" hyperlink in the provided HTML snippet, IE9 crashes. Here is the simplified version of the code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD& ...

htmlinternet-explorer-9