The :not() selector does not currently have the capability to support complex selectors within it

Combining the CSS3 :not() selector with the attribute contains selector can be a challenge, as it seems to not work properly.

Here is an example of the markup:

<input type='text'/>
<input type='text' id="dasd_Date_asd"/>

And here is the corresponding CSS:

input[type='text']:not(input[id*='Date']) {
    display:none;
}

View the DEMO

It seems like something is off in this setup. Can anyone pinpoint what might be causing the issue?

Important Note: We are unable to modify the existing markup, so any solutions must work within these constraints.

htmlcsscss-selectors

Answer №1

You are restricted from using multiple selectors within the :not():

input[type='text']:not([id*='Date']) {
  display: none;
}
<input type='text' />
<input type='text' id="dasd_Date_asd" />

The Selector Level 3 guidelines specify that only a single simple selector is allowed within a :not() pseudo-class.

Answer №2

Start by choosing the input type and then exclude any inputs with the id value "Date". You mistakenly tried to use an input as a selector within :not()

Give this a shot.

     input[type='text']:not([id*=Date]) {
        display:none;
    }
<input type='text'/>
<input type='text' id="dasd_Date_asd"/>

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

Submitting information from a lone row within a table that is contained within a single form

Within my form, there is a table containing records generated by a for loop iterating through items in a list. Each record has a submit button that triggers an AJAX call to serialize and POST the form data to the controller. The goal is to only POST data f ...

htmlajaxasp.net-mvc

Uh oh! AngularJS just threw an error: Uncaught TypeError - angular.service is not a function. It happened in taskService.js

I've run into some issues with AngularJS, even though I have imported all the necessary libraries. Specifically, I am encountering the following errors: Uncaught TypeError: angular.service is not a function at taskService.js:2 taskFactory. ...

javascripthtmlangularjsangular-module

Utilizing CSS to dynamically update SVG icons within the navigation menu upon tab selection

Feeling frustrated and in need of assistance with my current issue. I am attempting to make a change - when I click on a tab in the menu, the default black SVG icon should be replaced by a white one. #menu a .main-menu-icon { display:inline-block; width:2 ...

csssvgmenucss-selectors

Ensuring the CSS animation reaches its ultimate state by the end

I am currently implementing an animation on specific elements that have their opacity set to 0 in the CSS. The animation is triggered onClick, and via keyframes, it transitions the opacity from 0 to 1, among other things. However, once the animation compl ...

csscss-animations

Placing a moveable object in a designated spot for dropping at the desired location

I've been attempting to clone and drop a draggable object at the exact position within a droppable area where the drop event takes place. While I have come across examples online that demonstrate appending draggables to droppables, they all tend to re ...

javascriptjqueryhtmlcssjquery-ui

Guide on how to have two controllers execute identical tasks in Angular while modifying the appearance of the website

Trying to recreate Google's homepage functionality using Angular has been challenging for me. Despite watching Egghead videos and studying the API extensively, I couldn't find a specific example for this behavior. Here's what I aim to achiev ...

javascripthtmlangularjssingle-page-application

Troubleshooting: Issue with Bootstrap 4 navbar toggle button functionality

Is it possible to manually control the opening and hiding of the navbar when the toggle button is clicked in bootstrap 4? Currently, my navbar automatically opens and closes when clicking the toggle button. Any suggestions on how to modify this behavior wo ...

javascriptjqueryhtmlcssbootstrap-4

Using JavaScript to conceal the browser's interface leads to a flaw with the position: fixed property specifically

Check out my website: On this site, there is a fixed position div #nav. In order to optimize the site for mobile, I am using JavaScript to hide the browser's chrome. Here's the code snippet: setTimeout(function() { window.scrollTo(0, 1) }, 10 ...

cssiosmobile

change the css back to its original state when a key is pressed

Is there a way to retrieve the original CSS of an element that changes on hover without rewriting it all? Below is my code: $(document).keydown(function(e) { if (e.keyCode == 27) { $(NBSmegamenu).css('display', 'none');} ...

javascriptjquerycssonkeydown

"JavaScript that doesn't rely on a specific browser

Why does this code behave differently across browsers? What modifications are needed to ensure consistent behavior in all of them? In Firefox, it functions correctly, using the URL /some/path/?searchedText=sometext. However, in IE, nothing happens when cli ...

javascripthtmlbrowser

What is the process for creating two columns with an input box beneath them?

I am facing a challenge with my code. I am struggling to create the desired design where there are two columns and below them an input box that will be displayed when a button is pressed. The design I am aiming for can be viewed here: enter image descripti ...

javascripthtmlcss

Tips for resizing and positioning an image within an input field

Is it possible to have a button overlapped on an input field in a responsive website like this: https://i.sstatic.net/tnVmF.png I tried using an input group addons, but the result is not quite what I expected: https://i.sstatic.net/xpMgr.png This seems t ...

cssbootstrap-4responsive-designhtml5-canvas

Monitor File Tool for JetBrains IDE - CSS Optimization Setup - Streamline CSS Automatically

Utilizing the File Watcher tool in Jetbrains IDE (Webstorm and Rider) to automatically minify .css files and generate corresponding .min.css files for the entire project has been my goal. However, a challenge arises when it starts minifying files that alr ...

cssintellij-ideaphpstormwebstormjetbrains-ide

I'm facing an issue with the footer and header that is preventing me from properly positioning any content on the website

When attempting to include an h3 element on the website, it remains stuck at the top. I have tried using CSS properties like position, top, and left but it does not respond to them. Additionally, I experimented with a gallery template from w3schools to see ...

htmlcss

having trouble with changing the button's background color via toggle

I've been experimenting with toggling the background color of a button, similar to how changing the margin works. For some reason, the margin toggles correctly but the button's color doesn't. <script> let myBtn = document.querySele ...

javascripthtmlcss

Highlighting rows using jQuery upon selecting checkboxes

I attempted to emphasize a row in a table using jQuery when the checkbox is checked. This is the jQuery code I used for this purpose: $(":checkbox").change(function() { $(this).closest("tr").toggleClass("highlight", this.checked); }); However, it see ...

jqueryhtmlcsscheckboxhtml-table

The utilization of the <span> tag featuring a {float:right] property causes container expansion in Internet Explorer 7

Within my HTML code, I have an A tag button that contains a Span element to hold icons. This setup functions correctly in most browsers, except for IE7. When I attempt to float the Span to the right side using CSS, it causes issues specifically in IE7, cau ...

htmlcsscss-float

Adding a Div in Front of a Div with a Left Value of Zero

Attempting to insert a new Div before another Div with a left value of zero has resulted in the new Div replacing the position of the original Div with a left value of zero. Essentially, the newly inserted Div now has a left value of '0'. Below ...

jqueryhtmlcss

Arranging div elements in a vertical stack with CSS

Looking for help in arranging div elements in a way that they resemble an equalizer, similar to the one shown in this screenshot Equalizer. Can you provide advice on how to remove the dots from the list? I've already attempted using the CSS property ( ...

htmlcsslinear-gradients

Is it possible to modify the appearance of the element that was just clicked on?

Hello everyone, I'm currently working on a form with different inputs, all with the same class: <input type="text" name="username" class="field" /> <input type="text" name="email" class="field" /> I'm trying to figure out how to ch ...

javascriptjqueryhtml