The :not selector in a chained condition is not functioning properly for a child div

I have a child div that is being impacted by the .img class.

Even when I use the :not selector for this div like so

.main .content .index-exp .img:not(.view-image){ /*rest*/ }

it continues to affect my div.

You can view the issue at this link.

Is this possibly a bug?

This is my current result:

The expected result should be:

Answer №1

It appears from the provided markup that your selector should be:

.main .content .index-exp .img img:not(.view-image) {}

Check out the Updated Example here

The img elements with a class of .view-image were actually descendants of elements with the .img class (not containing the class themselves). The intention was to exclude elements with both classes, but it should target elements with the class of .view-image and the tag type of img instead.

Alternatively, this modified selector could also work:

.main .content .index-exp img:not(.view-image) {}

Answer №2

.image-list .picture img:not(.display-image){ }

(slightly more efficient)

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

Catalog of items in Mustache

I am currently working on generating HTML content using the mustache template engine. However, I have encountered an issue when trying to render a list of objects. Below is an example of my object: var Prod={ "Object1": { "name": "name1", "cat ...

Is it possible to customize the appearance of the Facebook Like box with a scroll-bar?

I recently added a Facebook like-box to my website, and I'm trying to customize the scroll bar within the iframe. However, I'm struggling to find a way to do so. Does anyone have any ideas on how this can be achieved, or if it's even possibl ...

Adjust jQuery UI's resize functionality to maintain the current total width

I arranged two containers horizontally using the position: absolute property. I am attempting to create a "resize bar" in the center that, when dragged, will expand one container while shrinking the other (thus maintaining the overall width). <div clas ...

Tips on stopping Bootstrap Modal from opening when element within trigger is clicked?

I've configured my table rows to trigger a bootstrap modal upon click. However, I have an issue with the select box in each row allowing user selection of status options. Is there a way to prevent the modal from opening when the select box is clic ...

Using JQuery to retrieve part of a className results in a null value being returned

I am facing an issue with a piece of code in codesandbox where it returns null when I attempt to retrieve part of the className from a div using JQuery. How can I troubleshoot this and make it work? Check out the Codesandbox Example import React, { Compo ...

Retrieving event.data from the input handler on a textarea element

I've spent the past few days researching this issue. Here's some context to help explain the goal: I have a textarea and I want it to detect special characters (like @) that I define as part of a dictionary. It should then display an autocomple ...

Tips on revealing concealed information when creating a printable format of an HTML document

I need to find a way to transform an HTML table into a PDF using JavaScript or jQuery. The challenge I'm facing is that the table contains hidden rows in the HTML, and I want these hidden rows to also appear in the generated PDF. Currently, when I co ...

Proportional fluid image grid with responsive design

After implementing various media queries, I've managed to create an image grid using Bootstrap 4+ that looks great on specific devices and layouts. Here's the reference code: .cmd-three-img-container { position: relative; margi ...

Combining HTML with multiple .ts files in Angular

I've been dedicating time to enhancing an Angular application, particularly a sophisticated table with intricate styling and functionality. Within my component file, there is a whopping 2k lines of code that includes functions for text formatting, ta ...

CSS @page does not render content within @top-center, @bottom-right, and similar positions

Currently, I am working on generating a HTML file that is print-ready and have been using CSS @page for this purpose. However, I have encountered a major issue with displaying page numbers utilizing @bottom-right and other similar solutions. Could there be ...

HTML double for-loop

While working on my website's HTML file, I encountered a challenge with nested for-loops. The first loop successfully checks the user's account and displays the corresponding data, and the second loop filters data starting with "Title:" and displ ...

The parent is relatively positioned and its child is absolutely positioned and floated to the left

I'm currently working on a design where I have a group of parent containers with the float left property applied. Inside each parent container, there is a child div with position absolute defined within them. Here's an example: <div class="wr ...

Is there a problem with textbox support for multi-line strings?

I'm having trouble getting a textbox to display multiple lines of text. For instance, when I copy three lines of text from Microsoft Word and paste it into the textbox, only the first line appears. The other two lines are not showing up, and I'm ...

Get a captcha using Selenium in Java

I am currently working on obtaining a CAPTCHA image. My previous question mentioned this in this post. I have managed to successfully fill out the necessary forms and download the CAPTCHA, however, it appears to be random each time. This is my current co ...

Incorporating components into Vue while utilizing Flask poses a challenge

Currently, I am working on a project that involves Flask and Vue. I am attempting to add a carousel to my website, but I am running into difficulties with creating and importing components for Vue when following tutorials. Here is my current file structure ...

Tips on adjusting the SVG view box for optimal visibility in a web browser

Recently, I've encountered an issue with the following code snippet: d3.xml("https://crossorigin.me/https://svgshare.com/i/5w9.svg").mimeType("image/svg+xml").get(function(error, xml) { if (error) throw error; document.body.appendChild(xml.docume ...

What significance do the blank quotes hold in terms of value?

Is it possible to enter multiple values for the "favoriteCities" field since the value is empty? <input name="favoriteCities[]" value=""/> ...

Is there a way to convert a button into clickable text that performs the same function as the original button?

Seeking a solution to transform a button into clickable text with the same functionality. Explored resources like Google, StackOverFlow, and Youtube for answers. This is the current code snippet representing the button: <button onclick="mainApp.l ...

Is it possible to connect to standard Bluetooth devices using the Chrome Bluetooth API on a webpage? (excluding BLE)

Currently, I am conducting research on how to establish connections with Bluetooth devices through a web page. My goal is for the webpage to display a list of paired devices and be able to connect to them (specifically bluetooth printers). While I have com ...

Looking for a solution to split barcode data across two text fields

I am looking to enhance my data input process by utilizing a barcode scanner in conjunction with JQuery. The barcode scanner I have reads both the serial number and model name of each product, but currently displays them together in one text field. Is ther ...