Ways to implement CSS styling to every input element excluding inputs located within list items of a specific class

input.not(li.tagit-new >input) {
  background-color: lightgrey;
}
<ul id="tagAdministrator" style="width: 505px" class="tagit ui-widget ui-widget-content ui-corner-all">
  <li class="tagit-new" style="box-shadow: none;">
    <input type="text" class="ui-widget-content ui-autocomplete-input" autocomplete="off">//css should not be applied to this
  </li>
</ul>

<input type="text" class="ui-widget-content ui-autocomplete-input" autocomplete="off"> //css should be applied to this

Answer №1

Your :not() pseudo can only accept simple selectors and must include a colon!

input {background: grey;}
li.tagit-new input {background: purple;}
<ul id="tagAdministrator" style="width: 505px" class="tagit ui-widget ui-widget-content ui-corner-all">
  <li class="tagit-new" style="box-shadow: none;">
    <input type="text" class="ui-widget-content ui-autocomplete-input" autocomplete="off">//css should not be applied to this
  </li>
</ul>

<input type="text" class="ui-widget-content ui-autocomplete-input" autocomplete="off"> //css should be applied to this

Answer №2

For this scenario, I recommend implementing two unique styles:

.input-style-1 {
    background-color: lightgrey;
}
li > .input-style-2 {
    background-color: white;
}

An alternative option is to assign a specific class to the inputs located outside of the "li" elements.

Answer №3

To achieve the default background color, you can utilize background-color:inherit;

 input {background-color:lightgrey;}
 li.tagit-new > input{background-color:inherit;}

Visit this link for a demonstration.

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

Failure to Fetch the Uploaded File's Value Using the Parameter

Objective: My aim is to automatically upload the second input named "file2" to the action result using jQuery code that is compatible with the latest versions of Firefox, Chrome, and Internet Explorer. Issue: The problem arises when HttpPostedFileBase ...

Capture the beauty of Safari with images displayed in the input file element

I'm facing an issue with the file upload element on my website. Most browsers, like Chrome and FF, display the image name when a file is chosen. However, Safari seems to show a tiny thumbnail instead. My goal is to create a custom upload button that ...

What is the CSS selector used to target elements that are not contained within another selector?

There are numerous nested divs within my code: <div> <div> <div>Apple</div> <div> <div>Banana</div> <div>Grape</div> </div> </div> <div>Craisin</div&g ...

Steps for selecting a radio button based on a MySQL table value:

My table has two fields, name and gender. When I retrieve the data and attempt to display it in input fields, everything works fine for the Name field. However, I am curious if there is a way to automatically select the radio button based on the gender d ...

Putting an <input/> element inside a Material UI's <TextField/> component in ReactJS - a beginner's guide

I am attempting to style <TextField/> (http://www.material-ui.com/#/components/text-field) to resemble an <input/>. Here is what I have tried: <TextField hintText='Enter username' > <input className="form-control ...

Hover state remains persistent even after modal window is activated in outouchend

One of the buttons on my website has a hover effect that changes its opacity. This button is used to share information on Facebook. It's a simple feature to implement. Here is the CSS code: .social_vk, .social_fb { height: 38px; obj ...

Malfunctioning Line in Apple Safari Causing ReactJS Issues

I am encountering an issue with my <div className={`${classes.center} ${classes.or}`}>OR</div>. It appears that this problem is specific to Apple Safari only. The alignment on the right side seems to be broken, although it works fine on Google ...

What is the best way to interact with all the rendered DOM elements in React that were created using the map method

return <div> <div >{'Audios'}</div> {urls.map(url => <div > <audio controls src={url} ref={(element) => this.audioRefs.push(element)} /> </div>)} </div>; I a ...

Is it possible for images underneath to receive focus when hovering over them?

I'm struggling with a layout of thumbnails on my page. We'll refer to them as A, B, C, etc. They are currently displayed like this: A, B, C, D, E, F, G, H, I, J, K, L, M, N... and so on. When you hover over one thumbnail, it enlarges by 2.5 t ...

The art of positioning images and creatively cropping

Seeking advice on allowing users to dynamically position and clip an image on a webpage. I've tried using CSS and JavaScript for clipping and resizing, but it's not working as expected. If PHP could provide a solution, that would be ideal for my ...

Removing special characters in ASP

Can someone please advise me on how to remove special characters in ASP (classic)? I am using an MS Access database. Is there a function similar to stripslashes() or addslashes() in PHP that can help with this? Any assistance would be greatly appreciated ...

Preventing Flash of Unstyled Content in ElectronJS Browser Windows

Upon creating a new BrowserWindow and utilizing loadURL to incorporate an html file within the renderer, there is a brief instance where unstyled content is displayed for approximately half a second before the css is loaded. window.loadURL('file://&a ...

Incorporate content from HTML into various sections

Is there a way to dynamically extract the h4 headers and the first sentence from each section of this HTML, and then add them to a new div? function summarize() { let headings = document.getElementsByTagName("h4"); // Get all H4 elements let newsText = do ...

Inserting information into a SQL database using PHP

Looking for some assistance here. I've double-checked the SQL table names multiple times, but whenever I try to post, I keep getting an error. I'm fairly new to this, so any help would be greatly appreciated. Thanks in advance. require_once(&ap ...

Seeking a template for a server-side programmer who lacks proficiency in CSS and design?

Hey there all you wise folks! So here's the deal - I'm a PHP/JavaScript wizard when it comes to logic and server-side stuff, but I really suck at design, CSS, and all things arty. Does anyone have any recommendations for a template or tool that ...

Extract content from an HTML form within a specific cell using Cheerio

A sample HTML table is displayed below: <tr class="row-class" role="row"> <td>Text1</td> <td> <form method='get' action='http://example.php'> <input type='hidden' ...

Styling Dropdown Options Based on Conditions in React

In my current project, I am attempting to modify the className of selected items within a mapped array using another array (this.props.notPressAble). The reason for this is because I want certain objects in the array to have a different CSS style. handleOp ...

Can a Unicode character be overwritten using a specific method?

Is there a way to display a number on top of the unicode character '♤' without using images? I have over 200 ♤ symbols each with a unique number, and using images would take up too much space. The characters will need to be different sizes, a ...

Is it possible for style sheets to malfunction due to the presence of the TITLE attribute on <link> tags?

We are currently involved in the process of upgrading an outdated corporate intranet. The challenge is that our users primarily rely on IE8 and IE9, while most of our sites were designed to function with compatibility for browsers between IE5 - IE9. While ...

Code snippet for calculating the size of an HTML page using JavaScript/jQuery

Does anyone know of a way to calculate and display the size/weight (in KB) of an HTML page, similar to what is done here: Page size: 403.86KB This would include all resources such as text, images, and scripts. I came across a Pelican plugin that does th ...