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

jQuery fails to apply a class if the input fields are not empty

I am currently working on a function that displays a login button only when both input fields are not empty. However, for some reason, jQuery seems to be giving me trouble with this task. Despite checking and ensuring that I am using the correct and updat ...

Create a one-of-a-kind SVG design with a customized blur effect in

Recently, I've been experimenting with SVG effects and animations and stumbled upon a fantastic example of how to apply a blur effect to an SVG path. However, I'm struggling to figure out how to set a different color instead of the default black ...

The CSS pseudo-element ::before is neutralizing the effect of ::

Here's an HTML code snippet: <h1>Example title</h1> This is the corresponding CSS code: h1::first-letter{ display:none; } h1::before{ content: url(http://icons.iconarchive.com/icons/ariil/alphabet/32/Letter-E-icon.png); } I&apo ...

Analyzing the string's worth against the user's input

I need help figuring out how to save user input on a form (email and password) as variables when they click "Register", so that the data can be used later if they choose to click "Login" without using default information. I am working on this project for s ...

How does CSS affect the size and performance of a website?

Examining the content of this css file (focusing on the last 5 lines specifically): #page section .s_1 { overflow:hidden; width:435px; float:left;} #page section .s_1 h1 { font-size:36pt; color:#001744; line-height:1.1; margin-bottom:64px;height:107px;} # ...

Element on navigation bar extending full width of the page

As a fairly new designer, I am facing an issue with my navbar button. Currently, it is only 100 pixels wide and fixed in place, allowing the rest of the page to scroll past it. However, although it is confined to 100PX in width, it still spans across the e ...

Tips for inserting an object into an array

Here's the data I received: { 0:{modifierId: 4, modifierName: 'Garlic', modifierPrice: 60 } 1:{modifierId: 1, modifierName: 'Tartar ', modifierPrice: 60} 2:{modifierId: 3, modifierName: 'Herb ', modifierPrice: 60} item ...

Tips for efficiently handling multiple form inputs using PHP

As part of my project, I am designing an admin panel for a distribution company. They have specifically requested a feature where they can input orders for all clients through a single page. To meet this requirement, I have created a dynamic form that gene ...

A fresh checkbox was added to the page using Jquery Switchery to disable it

I'm having trouble disabling the Switchery checkbox. When I try to disable it, another Switchery checkbox appears on the page along with the one I previously defined: <div class="form-group"> <label class="col-md-2"> ...

Updating the table in real time with new data from the MySQL database without the need to

I'm struggling with dynamically adding new lines to my table without refreshing the page. Most of the guides I've found suggest using Ajax, but that resets my table. My table displays a name, status, and message fetched from the database. The use ...

Guide to accessing a CodeIgniter method within a controller through Ajax

I have successfully developed a website using CodeIgniter and now I am looking to create an app. The goal is to utilize AJAX to call certain controller methods. Below is the code snippet: $(document).on('pagebeforeshow','#page2', funct ...

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 ...

Working with radio buttons in a loop using PHP

I am facing an issue with a loop that iterates 3 times. In the loop, there's an HTML form containing radio buttons and I am processing the input using PHP. However, when echoing the form data, it does not display the correct values. Is there something ...

How to position an absolute div in the center of an image both vertically and horizontally

Can someone help me figure out how to center a div inside an image? I seem to be having trouble with the positioning and alignment. Any suggestions or advice would be greatly appreciated. Thanks! .template-banner{ width: 100%; height: auto; margin: 0; } ...

Sending data back and forth across 2 tabs within one page

I noticed a strange behavior when using multiple tabs on the same page in different modes. When I clicked a button that was supposed to fill in some inputs, the data filled in the last tab opened instead of the one I actually clicked on. The angular input: ...

Error: The function "execute" has not been declared

Hey there! I've created a Discord bot that is meant to check the status of a Minecraft server, but I'm encountering an issue with the embed. It's showing this error: UnhandledPromiseRejectionWarning: ReferenceError: execute is not defined. ...

When implementing 'useGlobalGuards' in NestJS, remember to exclude endpoints for enhanced security

After implementing the useGlobalGuards method in my main.ts file, all endpoints now utilize the AuthGuard. This guard triggers a 401 error if a valid auth token is not present in the request header. Previously, I used @UseGuards(AuthGuard) on individual cl ...

Can someone help me figure out the best way to locate a material-ui slider within a react

I am seeking to incorporate multiple material-ui sliders into a single react component that share a common event handler. However, I have encountered difficulties in identifying which slider triggered the event. Despite referring to the API documentation, ...

Highlighting table rows using jQuery on click and restoring them on change by toggling between alternating

Hey there, I'm a newbie to jQuery and this is my first post. Spent some time searching but couldn't find exactly what I needed. I'm trying to have alternating row colors in a table; one class as NULL/empty and the other as alt. My jQuery sc ...

Returning to the previous page is done by navigating back using the previous URL in Next.js

Recently, I encountered a situation where I had implemented filters on a webpage. Upon applying the filters, the URL of the page would change and additional query strings would be appended to the end. This caused an issue when navigating back using the b ...