Do not apply the css rule to the custom class

I've been attempting to apply a CSS rule to href elements while excluding a specific class (.nolink).

.content a {
border-bottom: 2px;
}

I discovered that the :not selector can achieve this, but for some reason I'm having difficulty implementing it correctly.

Here are a few variations I tried:

.content:not(.nolink) a {
border-bottom: 2px;
}

or

.content:not('.nolink') a {
border-bottom: 2px;
}

or

.content a:not('.nolink') {
border-bottom: 2px;
}

Despite making some minor adjustments, nothing seems to be working as expected. Can anyone point out what I might be doing wrong?

The CSS code I am using is for styling green hyperlinks with underline and hover effects on . However, I need to exclude certain elements with the .nolink class from this styling rule.

css

Answer №1

If you need anything else, please don't hesitate to ask.

.content a {
  border-bottom: 2px solid;
}

.content a:not(.noLink) {
  border-bottom: none;
}
<div class="content">
  <a class="content">anchor 1</a>
  <a class="content">anchor 1</a>
  <a class="content noLink">anchor 1</a>
  <a class="content">anchor 1</a>
  <a class="noLink content">anchor 1</a>
<div>

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

The correlation between dynamic pricing and surge pricing in relation to PX

I'm exploring the translation of measurements from dp and sp to pixels within Google's new material design for a website I'm working on. Usually, my web designs have used pixel-based measurements for both grid and font sizing over the four y ...

csshtmlpixelmaterial-design

show numerical values as images in sql

Currently, I'm in the process of developing a website for a neighbor who is considering opening a new restaurant. One of the features I need to work on is a page dedicated to testimonials and reviews from customers. My goal is to use SQL to store the ...

phpcsssqldatabase

Why isn't my lightbox able to read this specific property?

A gallery was created using both lightgallery and cycle2. Cycle is a carousel plugin while lightgallery is a lightbox gallery. Clicking on an image in the carousel opens it in the lightbox. Everything worked perfectly until a category in the carousel was ...

javascriptjqueryhtmlcss

Sending data to CSS file within Django

Can variables be passed in CSS files, similar to HTML files? For example: In views.py: def home(request): bgcolor = "#999" ... ... In the CSS file: body { background-color : {{bgcolor}}; } If it is indeed possible, could you please pro ...

cssdjangodjango-templates

The width of the Bootstrap row decreases with each subsequent row

I'm having trouble understanding this issue, as it seems like every time I try to align my rows in bootstrap, they keep getting smaller. Can anyone point out what mistake I might be making? ...

javascriptcsstwitter-bootstrap

Add the onclick() functionality to a personalized Angular 4 directive

I'm facing an issue with accessing the style of a button in my directive. I want to add a margin-left property to the button using an onclick() function in the directive. However, it doesn't seem to be working. Strangely, setting the CSS from the ...

javascriptcssangulartypescriptangularjs-directive

Is there a way to automatically compile LESS files whenever I save a document?

After installing Less using npm with the command $ npm install -g less I currently compile my source files to .css by running $ lessc styles.less styles.css Is there a method through the command line to automatically compile the document when saving it ...

cssnode.jsnpmless

The custom font in my Next.js project is functioning perfectly in the development environment, but when I try to build it locally, the font doesn

Incorporating the Amazon Ember font as a custom font in my application has been a bit of a challenge. I followed the necessary steps of setting up a font.ts file in the lib folder and exporting the font correctly, as guided by various blog posts. Initially ...

cssnext.jsfontsnextjs14

Adjust website layout for screens less than 320px in width

Struggling to complete my project and having trouble figuring out how to scale my website for screens smaller than 320px, even though they are rare. I admire the solution used by Apple where the website freezes and scales down while maintaining its origin ...

htmlcssresponsive-designresponsiveviewport

Crystal report for VS2010 displays scrollbars on the page

I like to present my report in a div container with overflow:scroll I have placed the crystal report viewer inside the DIV and expect it to stay within the div only, which it does. The div shows scroll bars when the report overflows. However, my page als ...

cssvisual-studio-2010crystal-reports

jQuery unable to target Bootstrap button

I've been experiencing some trouble trying to attach a listener to a button I made with Bootstrap. <button type="button" id="buttonone" class="btn btn-default btn-lg good"> <span class="glyphicon glyphicon-minus" aria-hidden="true">< ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the method for attaching a keypress event to an HTML document?

Looking to add an interactive touch to my website by creating a "press any key" page. When a key is pressed, I want it to kick off animations that bring the page to life - like sliding elements in from different directions. Open to using jQuery or plain ...

javascriptjqueryhtmlcss

What is causing the <iframe> to malfunction when I use it?

I am encountering a problem with a basic snippet of HTML code: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8> <title>iframe Example</title> </head> <body> <div> & ...

htmlcss

Unable to locate the Bootstrap CSS file when deploying on PythonAnywhere

I recently created an admin panel that integrates with a database. To automate the process of generating the admin panel, I utilized flask-admin. Running the server locally on my PC displayed the bootstrap swatch correctly and everything worked seamlessly. ...

pythoncssflaskbootstrap-4flask-admin

clear the input field of any entered text type

Just starting out with Javascript! Below is some code: This code is taken directly from the HTML page <form action="#" id="ToolKeywordSearch"> <input type="text" class="ProductFinderText" id="ToolSearchField"onblur="if(this.value==& ...

javascripthtmlcssresponsive-design

Issue with content not properly aligning next to the vertical navigation bar

I've set my vertical navigation to be 10% width and my content to be 90%, but for some reason, I can't get them to align properly next to each other. I've experimented with float: left and display: inline-block, but so far nothing has worked ...

css

Using HTML symbols can alter the height of the text

It seems like I'm making a mistake - whenever I try to include an HTML symbol before a word, the following word without the HTML symbol ends up with a different height and is not on the same line. https://i.sstatic.net/PhARi.jpg ...

htmlcsssymbols

What could be causing a fixed pseudo-element to interfere with clicks on my website?

After updating my website to Bootstrap5, I noticed that one of the pages was not behaving correctly. Upon investigation, I found that the issue was related to this particular block of CSS: body:before { content: ''; position: fixed; w ...

htmlcssbootstrap-5

Is there a way to encase numerous <tbody> elements together?

My table design has specific css requirements where I am using multiple <tbody> tags. It looks like this: Example with multiple tbody tags However, I also need a wrapper for the multiple tbody tags (similar to a common tbody parent) that can be scr ...

htmlcss

What is the reason that setting the margin of 0 on the body does not eliminate the margin on an h1 element?

I believe the body element should apply styles to all elements contained within it. In this scenario, I am attempting to give my h1 element a margin of 0. body { font: 15px/1.5 Arial, Helvetica, sans-serif; padding: 0; margin: 0; background ...

htmlcss