Choose all form styles excluding one that does no have a defined action using css

Looking to create a CSS rule that applies to all forms except for one with a specific action.

Currently, I have the following CSS code that hides all #NavMenu forms but shows them for the search form:

form #NavMenu{
display:none;
}
form[action*='Search'] #NavMenu{
display:block;
}

Is there a way to target all forms except for the search form using a similar method like:

form:not(form[action*='search']) #NavMenu{
display:none;
}

Answer №1

For optimal results, use the following selector

form:not([action*='search']) this selector will search for forms that do not have the attribute

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

Using just one "nav.php" file for both the homepage and subdirectories

Looking to enhance the efficiency of my websites, I have implemented a PHP file for navigation, footer, sidebar, and other elements. However, this current method involves using two separate files: one for the homepage and another for the remaining pages wi ...

Tips for displaying nested JSON arrays in HTML using Ember.js

I'm having trouble displaying the JSON data I get in app.js using HTML. Any suggestions? Here is the code for app.js (I am confident that $.post is returning valid JSON) App.CadeirasRoute = App.AuthenticatedRoute.extend({ model: function() { a ...

Unable to adjust the size of a DIV with a button click in Vue3

I am having trouble resizing a DIV block in Vue3. Whenever I click the button, I receive an error message saying "Cannot read properties of undefined (reading 'style')". I know there is an issue with the JS part of the code, but I'm not sure ...

Styling will_paginate Links in Rails 3 - A Guide

When it comes to coding layout, how should the link be styled? <a href="#" class="class1 class2 class3"><span>Previous</span></a> <a href="#" class="class1 class2 class3"><span>Next</span> In my search for a solu ...

What is the best way to eliminate a vertical line from an HTML table?

I am looking to remove specific vertical lines from an HTML table. There are only 3 vertical lines in total, and I want to remove the first and third lines. Below is my code: <html> <head> <style type="text/css"> .table1{ background: ...

JQuery is not able to render Hindi content properly

I am attempting to showcase some Hindi words using JQuery because these are essential contents that need to be displayed on every page of the website. Please note that this is a static website built with HTML and JQuery/JavaScript. Below is my JS file: in ...

Angular is known to raise the error ExpressionChangedAfterItHasBeenCheckedError

I am currently developing an Angular application using Angular version 7.0.4. My objective is to automatically set focus on the first input element of a modal if the list of working times contains more than one element. However, I am facing an issue where ...

What is the reason for needing a page reload in Javascript or JQuery?

I'm curious why Javascript or jQuery require a page reload before applying certain effects. CSS updates in real-time, as demonstrated by the following example: This changes dynamically without needing to refresh the page @media all and (max-width:7 ...

Ways to manage the size of Material-UI vertical tabs?

After receiving assistance from others on the thread about Creating a Material-UI tab with image tabs instead of text labels, I was able to successfully implement images for my Material-UI tabs. However, I am facing an issue where I am unable to control th ...

When using the `display: table-cell` property on a div element, it does not automatically respect

How can I restrict the width of columns by defining a width attribute on the div.dcolumn DOM element to preserve the layout with overflowing cells? I want the content of any overflowing cell (like the 9px column) to be hidden while maintaining the specifie ...

Tips for opening a variety of links in new tabs with unique popup buttons

Currently, I am facing a challenge where I need to use a button to trigger an ajax HTML popup and also navigate to a link simultaneously. The issue is that there are multiple buttons on the page, each needing to open different links. Any assistance would b ...

How can I create my own unique scrolling behavior in JavaScript?

Looking to create a similar effect as seen on this website: where the vertical scrollbar determines the movement of the browser "viewport" along a set path. I believe that using Javascript to track the scroll bar value and adjust background elements acco ...

Choose a specific value from a drop-down menu

Looking for a solution with this piece of code: $('#Queue_QActionID').change(function () { if ($(this).val() == '501' || $(this).val() == '502' || $(this).val() == '503' || $(this).val() == '504' || $( ...

The functionality of the Ionic menu button becomes disabled once the user has successfully logged in

Having trouble clicking the button after taking a test. Situation: Once logged in -> user takes a test and submits -> redirected to home page. However, unable to click on "Menu button" on the home page. In my Login.ts file: if (this.checker == " ...

Does anyone know of a JavaScript function that works similarly to clientX and clientY but for tooltips when the mouse moves?

When using plain JavaScript to create a function that moves a tooltip on mouse move, the function works the first time with clientX and clientY, but fails to work when repeated. What could be causing this issue with clientX and clientY? Any suggestions on ...

Inadequate text alignment

Trying to create a header mockup for a website featuring branding elements like a logo and brand name. Utilizing Angular.js for the webpage development process, incorporating a URL for the logo image from an online source. Encountering alignment issues th ...

Identifying added elements that respond to link hover effects

I've been working on a project where I'm trying to replace the default browser cursor with an SVG one using jQuery. Everything seems to be working smoothly, except for changing the cursor when it hovers over links - nothing I've tried so far ...

Aligning the Navigation icons on my webpage

<nav> <ul> <li><a href="index.php">Home</a></li> <li><a href="index.php?about">About</a></li> <li><a href="index.php?products">Products</ ...

Rotate arrows by 90 degrees instead of 180 degrees in Bootstrap 5 Accordion

I have customized a Bootstrap 5 Accordion according to the guide provided at https://getbootstrap.com/docs/5.0/components/accordion/. The default behavior rotates the arrows 180 degrees when an item is opened, changing from 'v' to '^'. ...

Developing a timetable feature using PHP

I am working on creating a schedule page that involves an SQL table named 'appointments' with columns for id, name, date, and time. My goal is to organize the data from this table into an HTML/CSS based table where all records with the same date ...