Objective subject for an element within a :not operation

I have a function that specifically excludes a style on links by targeting their IDs. Each of my links has an ID, so I use that to exclude the style.

a:not([id='hopscotch_logo'] { color: red; }

Now, I also want to find links that are children of the specified ID. Here is an example of what I'm trying to achieve:

a:not([id='hopscotch_logo + a'] { color: red; }

Below is some dummy HTML for reference:

<li class="dropdown">
<a href="#" id="hopscotch_logo" class="dropdown-toggle" data-toggle="dropdown">Don't turn me red</a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="/Tools/Home/ChangePassword.aspx">I don't want to be red either</a></li>
</ul>
</li>

I am open to changing the HTML structure or using another method, but I need to figure out the correct way to target this child element of my parent ID. Although the following attempt is incorrect, I believe it's close:

a:not([id='hopscotch_logo + a'] {color:red;}

Answer №1

Below is the code snippet you can use:

a:not(#hopscotch_logo) + a {
  color:red;
}
<a href="#" id="hopscotch_logo" class="dropdown-toggle" data-toggle="dropdown">Dont turn me red</a>

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dont turn me red</a>

<a href="#" class="dropdown-toggle" data-toggle="dropdown">turn me red</a>

a:not(#hopscotch_logo) + ul a {
  color:red;
}
<li class="dropdown">
<a href="#" id="hopscotch_logo" class="dropdown-toggle" data-toggle="dropdown">Dont turn me red</a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="/Tools/Home/ChangePassword.aspx"> I dont want to be red either </a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">turn me red</a>
<ul class="dropdown-menu>
<li class="menu-item"><a href="/Tools/Home/ChangePassword.aspx"> I want to be red either </a></li>
</ul>
</li>

Answer №2

In order to target both a elements, you will need two selectors.

To style the second a element, you must first traverse its ancestor .dropdown-menu. Since .dropdown-menu is a sibling of the first a, this allows you to target the second a.

a:not(#hopscotch_logo), a:not(#hopscotch_logo) + .dropdown-menu a {
  color: red;
}

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

Receiving an error when trying to access the 'get' property of $http within a nested function

Encountering the following error angular.js:13550 TypeError: Cannot read property 'get' of undefined at Object.DataService.getDataFromAPI I seem to be struggling with the $HTTP.get function. Any insights on what might be going wrong or ...

Verifying the functionality of a m3u8 URL with Javascript

I have been using the following code to check if an m3u8 URL is broken or not. I tried with two different URLs, one that is live and one that is offline. However, my javascript function does not alert me whether the file exists or not. There are no errors ...

Tracking and managing user clicks on external links within a vue.js application

I am currently working on a web application that retrieves data from a CMS. Utilizing the Vue-Router in 'history' mode, I need to address content fetched from the API which may include links. My goal is to manage specific links using the router w ...

What can I do to eliminate the excess white space within my div element?

I've built this app using the create-react-app CLI, but I'm struggling to remove the extra white spaces surrounding my main container. Check out the screenshot below for reference. Currently, the only div in my app has the following CSS: .main ...

Utilizing the DirectusImage tag for a stylish background effect

I'm new to Directus and I need help styling a card with a background image from a Directus Image. Can anyone guide me on how to achieve this? Here's what I have tried: <Card style={{backgroundImage:"url({someColletion.image.id})" &g ...

What is the best way to load the nested array attributes in an HTML table dynamically with AngularJS?

I attempted the following code, but I am only able to access values for cardno and cardtype. Why can't I access the others? Any suggestions? <tr ng-repeat="data in myData17.layouts"> <td ng-show="$index==1">{{data.name}}</td> &l ...

The journey of a JavaScript file within an iframe devoid of any src attribute

Consider this scenario: In a folder labeled /jscript, there are two files named my_js_file1.js and my_js_file2.js. I also have an /index.html page structured like this: <html> <head> <script type='text/javascript' sr ...

sending parameters into a regex within a function

Struggling to pass a variable into a robust regex, managing to make it work outside the function but unable to figure out how to get it working within a function. Not sure why match[1] is returning null or how to find words after a keyword. Here's wh ...

Updating the background color using typescript

Before transitioning to angular development, I had experience working with vanilla Javascript. I encountered a challenge when trying to modify the css properties of specific elements using Typescript. Unfortunately, the traditional approach used in Javascr ...

Struggling to align form inputs next to each other

I have tried various methods such as adjusting padding and margins, using tables, displaying as inline and inline-block, and separating parts of the code into different divs. However, I am still unable to get my inputs to be displayed side by side. Here is ...

Removing CSS from a Link in react-router-dom

My attempt to create unique divs for different pages using the code in my home.js didn't go as planned. <Link to="Subject1"> <Product title="The Lean Startup" image="https://images-na.ssl-images-amazon.co ...

The conundrum with JQuery: My script refuses to run when a variable is defined

<script> $(document).foundation( let total = 1 $("button.test").click(function(){ if ($("p.change-me").text() === "OFF") { $("p.change-me").text("ON") total = total + 1 } ...

What are some superior methods for determining the validity of a control in JavaScript?

Is there a way to determine the validity of a control in JavaScript within Asp.Net using a client-side API? Specifically, I am looking for a function that can check if a control is valid based on attached validators. For example, if a textbox has 2 validat ...

Steps for preventing form submission when the username is unavailable

After checking the availability of the user name, I encountered an issue where the form still gets submitted even if the username is not available. Updated Code: <SCRIPT type="text/javascript"> $(document).ready(function(){ $("#emailch").change(fu ...

Preventing JavaScript from refreshing the page when using location.replace for the second time with the identical URL

I've encountered an issue while using location.replace to reload a page that relies on GET variables for displaying a success message. The problem arises when the URL specified in the location.replace call is identical to the current one, causing the ...

The following page shrouded in mystery is experiencing technical issues

Encountering some issues on the live server with this code. It's functioning perfectly fine on my local machine, but once I try to deploy it on Netlify, I'm running into this error message: ⨯ useSearchParams() should be wrapped in a suspense bo ...

adjust bootstrap column width to fill the container

https://i.stack.imgur.com/tCuL6.png I am hoping that this image will provide a visual aid for what I am trying to convey. My goal is to have the arrow and the boxes aligned in a row without any empty space on the right side. As you can see, the leftmost b ...

What's the reason my JavaScript isn't functioning properly?

Brand new to coding and I'm delving into the world of Javascript for the first time. In my code, there's a checkbox nestled within an HTML table (as shown below). <td><input type="checkbox" id="check1"/> <label th:text="${item.co ...

Pins missing from Google Maps API display

TLDR: The problem lies within the var marker = new google.maps.Marker() line. It seems that either the pins are not visible, incorrect, or simply not appearing. Background: I have implemented some JavaScript code that utilizes AJAX to fetch data on the ...

Can you modify a single attribute for multiple child elements under a parent tag in Visual Studio Code simultaneously?

Imagine a scenario where you are faced with 30-40 options and need to update the name attribute from blank to something more appropriate. Is there a method in visual studio code that allows you to do this in one go? It would be a fantastic feature to have. ...