Using the :not selector with links: a guide

I implemented a hover effect for the links on my website. However, I want this effect to be applied to every link except those within a specific div.

Sample HTML

<div id="menu">
<div class="menu_item">
<a href="index.html" title="Home" target="_self">
<img src="_images/_menu/Home.png"
onmouseover="this.src='_images/_menu/homeHover.png'" 
onmouseout="this.src='_images/_menu/Home.png'" 
onclick="this.src='_images/_menu/homePressed.png'" alt=""/></a>
</div>
</div>

The CSS code I have attempted to use

a:hover:not(.menu_item) {
background-color: #D6910E;
color: #FFE1A7;
} *no change*

a:hover:not(#menu) { *no change*

a:hover:not(#menu.menu_item) {  *turns off hover on all links*
a:hover:not(#menu .menu_item) {  *turns off hover on all links*
csscss-selectors

Answer №1

Looking to apply these styles to all links except those within a specific div.

In CSS, the typical approach to this issue is to establish a general rule first, followed by a specific rule to override it if needed. It is advised to use the :not selector sparingly and for unique cases. Here's an example:

/* General rule */
a:hover {
    background-color: #D6910E;
    color: #FFE1A7;
}

/* Exception for links within a specific div */
.menu_item a:hover {
    background-color: transparent;
    color: inherit;
 }

If you decide to utilize :not, keep in mind that it applies to the current element:

a:hover:not(#menu)

This doesn't mean a tags being hovered that aren't children of #menu; instead, it refers to a tags being hovered that are not actually #menu. To achieve the desired effect using :not, consider something like 

:not(#menu) a:hover

However, this approach may not work as expected since it pertains to "hovered a tags with any ancestor not being #menu", which might result in unintended matches.

Answer №2

Can there be a simpler solution?

For example:

a:hover {
  background-color:red;
  color:red;
}

#menu .menu_item:hover{
    /* Default color */
}

In this scenario, you could improve it by adjusting the positioning of "hover".

a:not(.menu_item):hover {
    background-color: #D6910E;
    color: #FFE1A7;
} /*no change*/

a:not(#menu):hover { /*no change*/ }

a:not(#menu.menu_item) :hover {  /*turns off hover on all links*/

a:not(#menu .menu_item):hover {  /*turns off hover on all links*/

I hope this suggestion proves helpful to you.

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

Webkit causing complications with straightforward CSS3 animation

I'm currently working on a website and you can check it out here: Unfortunately, I've encountered an issue where the animations aren't triggering specifically on webkit browsers like Chrome and Safari: @-webkit-keyframes slideright{ 0% {tr ...

cssanimationwebkit

How to Stop Fixed Elements in iOS from Zooming

I'm currently working on a responsive website with a fixed header and navigation. Is there a way to allow users to zoom in on the page's content without affecting the fixed elements? Thanks for any help! ...

cssioszoomingresponsive-designcss-position

How can you utilize positioning and margins with Flexboxes?

<template> <div class="flex justify-center"> <div class="h-px-500 md:w-1/6 bg-orange-200 text-center">1</div> <div class="h-px-500 md:w-1/6 bg-orange-300 text-center">2</div> <div class="h-px-500 md:w-1/ ...

htmlcssvue.jstailwind-css

Tips for Keeping Footer Aligned with Content:

When checking out this website, you may notice that the footer appears to be affixed to the left side. The CSS code responsible for this is as follows: #footer { width: 800px; clear:both; float:right; position:relative; left:-50%;} I would appreciate it ...

htmlcss

Is there a specific CSS selector that targets elements with "multiline" content?

My website has a menu that displays with the following CSS: a { background:red; } <a href="#">Home</a> <a href="#">Downloads</a> <a href="#">Contact</a> <a href="#">FAQ</a> <a href="#">Disclaimer&l ...

htmlcss

The CSS styles on my GitHub Pages website are not being reflected on the HTML page

I've been struggling for a while now to host my Portfolio CV on GitHub and I can't seem to get my CSS styles to apply correctly on the URL. - This is how I have linked it in the HTML document: <link rel="stylesheet" type="text/ ...

htmlcssgithubgithub-pagesweb-hosting

Disable the background color css when hovering over a button

I'm having trouble with my Angular and HTML code. https://i.stack.imgur.com/Ea5oV.png The image above shows that a background color appears when hovering over the first icon. I've attempted: .sidemenuitm { padding: 10px 5px; cursor: poin ...

htmlcssangular

What is the best way to conceal a sticky footer using another element?

I have a footer that remains fixed at the bottom of both long and short pages. Below is the CSS code for this footer: .footer{ position: absolute; bottom: 0; width: 100%; height: 100px; background-color: white; } My goal is to achieve a 'r ...

jqueryhtmlcssruby-on-rails

The art of jQuery: Effortlessly animate the deletion of a CSS property

When using jQuery, I often "collapse" certain DOM elements by decreasing their width to 0px and fading them out. Here is an example: $(".slideoutmenu").animate({ width: 0, opacity: 0}, function() { $(this).hide(); }); The widths of these elements can var ...

jquerycss

Arranging images effortlessly using jQuery sortable feature in HTML

I'm currently working on creating sortable images using jQuery in an HTML document. I've encountered an issue with the source code here. I have implemented the jQuery sortable function in a functions.js file and successfully tested it on another ...

jqueryhtmlcssimagejquery-ui-sortable

What is the best way to use HTML and CSS to center images and headings on a webpage?

This task is really testing my patience... I'm attempting to create a layout that resembles the following: Logo img|h1|img The horizontal lines flanking the subtitle serve as a visual guide, like this --- Subtitle --- Below is the snippet of H ...

htmlcsspositionalignmentcenter

What could be the reason for the unexpected invisibility of the 4px margin on a static div?

I have a straightforward situation where I am using a fixed positioning <div> that spans the entire width with 100% width. It is designed to have a margin of 4px on all sides. However, for some reason, the right side margin is not visible. Can someon ...

htmlcsspositionmargin

What exactly is the role of the @altfontfamily variable in Bootstrap?

Within the variables.less file, specifically in the typography section, you will find a variable named @altfontfamily. I am interested in utilizing the Alt Font Family but I am unsure of the process. Is there a specific class that needs to be called in or ...

cssvariablestwitter-bootstrap

I am currently attempting to find a color picker element within a parent class using Cypress CSS Locator. While I am able to reach the parent element, I am unsure of the correct method to target the

My user interface has a list of elements displayed in 2 columns. The first column shows the name of the item, such as Manager, Operator, and the list is expected to grow. The second column consists of a color picker element where you can choose a color. I ...

javascriptcssselenium-webdrivercypress

Disabled text selection in Internet Explorer

I am in need of making one HTML element (Label) unselectable for IE. I have tried using the following methods: Unselectable=on onselectreturn=false; Unfortunately, none of these solutions are working for me. For Firefox and Chrome, I've successful ...

htmlcssselect

What is the best way to arrange two buttons in a row with a border separating each row?

I am currently working with angular 8 and I am in need of creating a webpage design using HTML, CSS, or Bootstrap. The issue I am encountering is how to align every two buttons next to each other with borders, and once the first row is completed, move to ...

htmlcssbootstrap-4angular8text-align

The inner div overflowing at 100% dimensions

I'm working with an outer DIV that has a CSS property of position: fixed to serve as an overlay. Inside this, I have another div set to 100% width with a margin of 30px to create the appearance of an inner border frame. Unfortunately, the right and bo ...

csshtml

What is the best way to create a line break at the maximum width point?

I am currently working on a code that dynamically receives variables and concatenates them with an underscore: var text = product + "_" + someOtherInfo; After combining the variables, I need to display this text inside a div element. div { max-width ...

jquerycss

Tips for positioning a background image behind page content

I have a webpage with a background image, and now I want to add content that floats over it. However, the code below is placing the content behind the image. How can this be corrected? It's important to note that I'm attempting to achieve the ef ...

htmlcss

Tips for dynamically modifying style mode in Vue.js

I am looking to implement a feature where the style can be changed upon clicking a button. In my scenario, I am using Sass/SCSS for styling. For example, I have three different styles: default.scss, dark.scss, and system.scss. The code for dark.scss look ...

javascriptcsstypescriptvue.jssass