Utilize the :not() and :hover selectors in Less when styling with CSS

Some of my elements have a specific class called .option, while others also have an additional class named .selected. I want to add some style definition for the :hover state on the .option elements, but only for those without the .selected class.

I've tried using the :not() and :hover pseudo selectors, but none of the combinations gave me the desired outcome.

On top of that, I need to implement this in Less. I'm not too familiar with Less and CSS.

<!-- I'd like to apply :hover only on those options that are not selected -->
<div class="option">
   option 1
</div>
<div class="option selected">
   option 2
</div> 
<div class="option">
   option 3
</div>
<div class="option">
   option 4
</div>

After some trial and error, I realized that .option:not(.selected):hover is the CSS selector I need...I just need help translating it into Less.

cssless

Answer №1

Disregard that, I located the solution. If anyone else is facing a similar problem, you can accomplish it with fewer lines of code like so:

.option{

    /* ... */

    &:not(.selected):hover {

        /* ... */

    }
}

Answer №2

Here's a tip for working with LESS:

.option {
    &:not(.selected) {
        &:hover {
            color: blue;
        }
    }
}

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

What are the steps for transitioning with JavaScript?

My goal is to make both the <hr> elements transition, but I'm struggling with only being able to select the lower <hr> using CSS. html { margin-bottom: 0; height: 100%; min-height: 100%; } body { margin-top: 0; height: 100%; ...

javascripthtmlcss

Achieving label center alignment within a Bootstrap 4 container

Can anyone help me with centering the labels within the container? I'm encountering difficulties uploading an image to a website, so I've included a URL link as an alternative. To prevent the labels from filling the entire fluid container, I&ap ...

htmlcssbootstrap-4

Having trouble with the flexbox flex-direction: column property not functioning properly with the textarea element in Firefox?

Inconsistencies between Chrome and Firefox have been noticed in the following example. While the footer height is set to height:40px and appears fine in Chrome, it seems smaller in Firefox, around 35px. Any specific reasons for this difference? Link to t ...

htmlcssflexbox

What could be causing this code to malfunction on a mobile device?

I am struggling to make this drag and drop function work on mobile devices. Despite implementing the code, it doesn't seem to function properly when accessed on my mobile phones. Here is the snippet of the code: copy = 1; $('.dragArea img&apo ...

javascripthtmlcss

Having trouble with margins not working after adding the clear property in CSS?

I recently applied clear:left to a div in my code, but when I tried adjusting the top margin, nothing seemed to change. Take a look at the snippet below: <!DOCTYPE html> <html> <head> <title>Float</title> <meta cha ...

htmlcss

How to build a login page with a static header and footer using Angular2

For my latest project, I am currently in the process of developing an application using Angular2 and eclipse Neon. Utilizing angular-cli for this app, I am now focused on creating the login page. Within the app.component.html file, you will find the follow ...

cssangulartypescript

Is there a way to customize the color of the HR element in a Material-UI Select Field?

https://i.stack.imgur.com/DYeX7.png https://i.stack.imgur.com/CN0T6.png Hi there, I am currently working on a website and using a Select Field component from Material-UI. I am faced with the challenge of customizing the style to change the default light ...

javascriptcssreactjsmaterial-ui

Having trouble with the Jquery animate() function?

I recently developed a jQuery animation where clicking on specific buttons triggers a hidden div to slide from left: -650px; to left: 0px;. You can see an example by clicking here. However, I've noticed that when another button is clicked to reveal a ...

javascriptjquerycss

Maximizing Bootstrap card size in Angular4: A step-by-step guide

How can I make Bootstrap cards resizable on top of other elements when clicked on an icon to make it full screen and overlay on other cards? detail.component.html <div class="card card-outline-info" > <div class="card-header bg-info"><h5 ...

cssangulartwitter-bootstrap-4

I struggle with managing a z-index in conjunction with an absolute position

Check out this codesandbox to see the issue where the 3 dots button is displayed over the menu. Click on the 3 dots to understand the problem. Below is the CSS code for the menu: .more-menu { position: absolute; top: 100%; z-index: 900; float: l ...

css

How can I eliminate the tiny white square located beneath the scrollbar track?

`::-webkit-scrollbar{ width: 12px; } body::-webkit-scrollbar-track{ background: #f1e9e9; border-radius: 10px; margin-block: 0.1875rem; } ::-webkit-scrollbar-thumb{ background-color: #582965; border-radius: 10px; border: 3px so ...

htmlcssscrollbar

Exploring ways to customize the selected text color within a jQuery mobile division using CSS

Is there a way to change the color of selected text to #3C3 for the div one only and not for div two? <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link ...

jquerycssjquery-mobilemobiletextselection

Problem with CSS: The fixed footer is too wide when set at a width of 100%

I'm experimenting with using percentages instead of pixels and noticing some unusual behavior. Why is my footer extending to the right (beyond the "pagePlaceHolderInner" element)? It works when I assign a specific pixel value to both elements ("pagePl ...

htmlcssresponsive-design

Lock the initial column in an HTML table

Hey there! I've been trying to freeze the first column of my HTML table, and while I managed to do so after a few attempts, I encountered an issue. When I scroll the table horizontally, the columns on the left seem to overlap with the first column, an ...

javascripthtmlcss

Steps to extract a hash from a document's URL

The following code is used: jQuery(document).ready(function() { console.log($(this)); }); After running this code, the object displayed in the console is: [Document mypage.html#weather] How can I retrieve the last ID from this object? In this ...

javascriptjqueryhtmlcss

Enhance the appearance of an HTML select tag for optimal viewing on iOS Safari browser for

I have customized three dropdown lists using CSS. I set the style as follows: .dropdown{ font-size: 20px; background: white; border:none; position: relative; } While the dropdowns appear fine in Chrome, there seems to be a slight differen ...

htmlioscssiphonesafari

Particular arrangement of a table

I am looking to create a responsive table that has a vertical left header row on mobile devices and a normal horizontal header row on desktop, like the following: Header 1 data data data Header 2 data data data Header 3 data data data Does anyone have ...

htmlcssadaptive-designadaptive-layout

Using CSS to create a hover effect on a button that shows multiple links

I have a button in my navigation bar that I want to enhance with hover functionality. When a user hovers over the button, I want the text on the button to disappear and reveal three different clickable links inside the button. The actual button itself sh ...

htmlcss

What might be causing my direct descendant selector to not work as expected?

I'm struggling with my direct descendant selector. Let's analyze a straightforward example: .myDiv > table tr:first-child td { font-weight: bold; text-align: center; } <div class="myDiv"> <table style="width:100%"> < ...

htmlcsscss-selectorshtml-table

Reactively responsive table view

I am new to CSS and recently discovered a responsive table on this website that I would like to incorporate into my application. My challenge is figuring out how to switch the table layout from left to right (headers on the right and values on the left) w ...

cssresponsive-designright-to-left