Are there any CSS selectors similar to :empty that can match elements with children that have display:none?

Looking for a solution to the issue stated in the title, this code snippet is causing some trouble:

.group {
  width: 100px;
  height: 100px;
  background-color: blue;
}

.group:empty {
  background-color: red;
}

.hideme {
  display: none;
}
<div class="group">
  <div class="hideme">
    hello
  </div>
</div>

It appears that the background color isn't changing to red as expected. Is there an alternative to using :empty that will also apply the style if any children are set to display: none?

htmlcsscss-selectors

Answer №1

Regrettably, CSS alone is not capable of achieving this goal, however, you have the option to utilize the jQuery selector :visible as an alternative solution.

Answer №2

you may want to experiment with

div.group div.hideme
{
    background-color:red;
}

applying styles specifically to the div.hideme element without affecting the div.group.

Alternatively, you could explore utilizing JavaScript as suggested in the previous responses.

Answer №3

As far as I am aware, there is no direct solution for that. However, a good option would be to consider using JavaScript. Personally, I am a fan of jQuery, so that could be a suitable choice for you.

$group = $('.group');

if( $group.find('.hideme').is(':visible') ) {

    $(this).parent().css({ 'background-color' : 'blue' });

} else {

    $(this).parent().css({ 'background-color' : 'red' });

}

Although this code has not been tested, the underlying logic should be quite straightforward.

Additionally, remember to include the jQuery library in your HTML document:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

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

Place the menu on top of the div by adjusting the z-index

Hey there, I'm working on a project and I need help with an issue. You can check out the example page here: If you try to open the menu and click between "list" and "new ads", you'll notice that you're actually clicking on the dropdown se ...

css

How to eliminate the gap below a CSS element by adjusting the top value

https://i.stack.imgur.com/Sn6Wx.png The three 'Replacement Options' sections are contained within a div with the class relative. The relevant CSS properties have been applied as shown below: .relative { top: -10rem; position: relative; ...

htmlcss

Adaptable background visuals

Struggling to find a solution for a seemingly simple problem. I am looking to create responsive/fluid images that scale relative to the viewport size. I also need to load them using CSS with the background property for selective loading of different versio ...

htmlcssresponsive-design

Eliminating and restoring the background in a form field when it is in focus

/* This function clears the default text in a field when clicked on */ $('#edit-field-activity-notes-und-0-value') .each(function() { $(this).data('default', this.value); var mybackground = $(this).css('backgroun ...

jquerycssforms

Issues arise with the Node EJS module due to the malfunction of the include

Struggling with incorporating HTML snippets into my index.html, even after reviewing the EJS documentation. Directory Structure: project -public --assets ---css ---images ---js --Index ---index.html + index.css and index.js --someOtherPageFolder -views - ...

javascripthtmlnode.jsexpressejs

Retrieve the personalized data-* attributes from a specific item within an array

I'm struggling to find the correct syntax for accessing custom data-* attributes for list elements within an unordered list that has been sorted and converted into an array using the following code: $("#gridlist").sortable("toArray"); The list eleme ...

javascriptphpjqueryhtmljquery-ui

Changing selections in jQuery may not work properly on certain mobile and IE browsers

I am currently working on creating a dependency between two select boxes. The jQuery code I have implemented works perfectly on most common browsers such as Chrome and Firefox, but it seems to have some issues with Internet Explorer, Edge, and some mobile ...

javascriptjqueryhtmlcss

Building HTML tables with JQuery for handling large datasets of over 4,000 rows and beyond

My goal is to create a table with 4000+ rows and 18 columns displaying parsed pages from my site. I need it all on one page for the following reasons: I require the use of filters in the table I need to be able to sort by more than 5 columns Every cell ...

jqueryhtmlajaxperformancehtml-table

Is there a way to trigger element closure using the esc key?

I have a panel that shows on initialization and hides when I press the 'close' icon. How can I make the panel close when I press the 'esc' button? Below is the HTML code for the panel: <div ng-init="vm.onInit()" class="mainContent"& ...

htmlangularjs

Using Javascript or Jquery, you can submit a form without the need for a button

I'm attempting to submit a form without using a button by invoking a JavaScript function and processing the form with JQUERY/PHP. My goal is for the form to be submitted silently on the backend without causing the page to reload. However, I keep encou ...

javascriptphphtmljqueryajax

Floating above a surface to manipulate a title

Wondering if it's possible to achieve this without JavaScript, but that would be the ideal scenario. Here's a snapshot of how my page is structured: ____________________________ | TITLE | |This is a fixed header. I wa ...

javascripthtmlcss

What is the best way to add color to a div at the bottom of a page using

https://i.sstatic.net/5kOt7.png I noticed in the image that there is a navy blue color applied to a div at an angle. How can I achieve this effect using Bootstrap in my ASP.NET Core project? ...

htmlbootstrap-4asp.net-core-mvc

Disable the border and background colors in CloudFlare Turnstile

I have implemented the CloudFlare reCaptcha Turnstile and I am looking to modify the widget by removing the border and background color. I believe this customization can be achieved using CSS or Javascript. Thank you for any assistance! ...

javascriptcssrecaptchacloudflare

Load css and js files from a directory within Liferay

Is it possible to automatically load all CSS (or JS) files from a specific folder in Liferay 6.2? Below is an example of the liferay-portlet.xml file: <portlet> <portlet-name>Example</portlet-name> <icon>/icon.png</icon ...

cssliferay-6.2

Having difficulty with the placement of a div element in HTML code, wondering how to position it according to my specific

As a beginner, I ran into some trouble with my code while trying to create a simple 'game' for fun. The initial result looked like this. After that, I attempted to add another div onto the brown element using the following CSS: #energy_and_coins ...

htmlcsspositioning

Efficient methods for adding data to pages using Node.js

Since transitioning from PHP to NodeJS, I have been exploring new ways of sending data and am curious if there is something equivalent to the 'echo' function in NodeJS. I am looking for a method that would allow me to send data in parts, enabling ...

javascriptphphtmlnode.js

Is it possible to modify the font color of a specific MenuItem in material-ui?

I've scoured every corner of the internet, but I'm still stumped by this question: How can I tweak the text color (not the background) for a selected or hovered MenuItem? I know the solution lies within useStyles, but my attempts thus far have be ...

javascriptcssreactjsmaterial-ui

Repetitive outcomes are observed when iterating through elements with Selenium in Python

I'm currently facing a puzzling issue that has me stumped. My HTML contains a ul list with multiple li items, each of which includes elements I need to extract using Selenium in Python. The structure of the website is as follows: <ul id="results"& ...

pythonhtmlselenium

Center alignment in relation to either of two containers

I am working with a container that has a height of 100vh to fill the entire screen. Inside this container, I have a h1 and a div. I want to center align the content within the div on the page, but the presence of the h1 is causing issues. My current setup ...

cssalignment

What is the best way to conceal the dt tag when the dd tag contains no value

Is there a way to hide the "Subject" if the "subject_title" field is empty? <dt class="col-sm-6 text-dark" >Subject</dt> <dd class="col-sm-6">{{$course_dtl->subject_title }}</dd> For example, I would li ...

javascriptphphtmlcsslaravel