Unusual outcomes observed with CSS selector

I seem to be encountering some unexpected outcomes with one of my selectors.

Following a reset, I have established certain base settings - including this one:

a:not([class]) {
    text-decoration:underline;

    &:link, &:visited, &:hover, &:active {
        color:@primaryColor;
    }
    &:hover {
        text-decoration:none;
    }
}

It is somewhat effective, but not entirely.

This anchor without an href attribute functions correctly

<a class="link-more mt24">Learn more</a>

However, this anchor with an href does not behave as expected.

<a class="link-more mt24" href="https://www.bbc.co.uk">Learn more</a>

When I say it doesn't work, I mean that the first link is properly ignored while the second one isn't ignored despite having a class.

For thoroughness, this is what Less is generating:

a:not([class]) {
  text-decoration: underline;
}
a:not([class]):link,
a:not([class]):visited,
a:not([class]):hover,
a:not([class]):active {
  color: #03a9f4;
}
a:not([class]):hover {
  text-decoration: none;
}

Any suggestions or thoughts on this matter?

csscss-selectorsless

Answer №1

The behavior is working as intended. When using the selector a:not([class]), it will target and style a elements that do not have a class attribute. Therefore, in the provided example below, the third a element is underlined because it does not have a class attribute.

The first a does not receive the underline because a elements without an assigned href attribute do not default to being underlined. This is due to the fact that text-decoration: underline is typically applied through selectors like a:-webkit-any-link (specific to WebKit, but other user agents have similar ones).

The second a is underlined due to the default styling applied by the user agent for a tags. The use of a:not([class]) does not affect it; thus, this selector is not responsible for the underline since it doesn't even target that specific element.

If you wish for all a elements with a class to not be underlined, you can utilize a[class] and remove the underline accordingly.

a[class] { /* Removing this selector will cause the second link to be underlined */
  text-decoration: none;
}
a:not([class]) {
  text-decoration: underline;
}
a:not([class]):link,
a:not([class]):visited,
a:not([class]):hover,
a:not([class]):active {
  color: #ff0000;
}
a:not([class]):hover {
  text-decoration: none;
}
<a class="link-more mt24">Learn more</a>
<a class="link-more mt24" href="https://www.bbc.co.uk">Learn more</a>
<a href="https://www.bbc.co.uk">Learn more</a>

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

Styling div elements to match the dimensions of table rows in CSS

When it comes to CSS, I wouldn't call myself an expert; My question is: is there a way for a div tag to inherit dimensions from specific table rows based on their class or id? For instance: Imagine we have a table with multiple rows, but we don&apos ...

javascriptjqueryhtmlcsshtml-table

What is the best technique to position a div at the bottom of a container that has a height of 100

After many attempts and searching for answers, I'm still struggling to figure out how to make the div float to the bottom with 100% height. I've even considered if it's an issue with Pure or something else entirely. It's definitely frus ...

htmlcssyui-pure-css

Switching Grid 1 and 2 in Bootstrap 4

Here is an example of what I need: Image: https://i.sstatic.net/EPCAq.png This is the code I am using: <div class="container"> <div class="row"> <div class="col-3"> <img src="image1.png" class="i ...

htmlcssbootstrap-4

Using jQuery to implement interactive hover effects on individual items within a list

I'm currently developing a project that involves displaying speech bubbles next to each list item when hovered over. These speech bubbles contain relevant information specific to the item being hovered on. To achieve this functionality, I've crea ...

javascriptjqueryhtmlcss

Constructing a string with specific formatting inside a For loop

I need assistance with formatting a string within my webform. Currently, I have a function that uses a for loop to output each item in my cart. However, I am struggling to include tab spaces and newline characters for better readability. Here is the code s ...

c#asp.netcss

jQuery: Remove the class if it exists, and then assign it to a different element. The power of jQuery

Currently, I am working on a video section that is designed in an accordion style. My main goal right now is to check if a class exists when a user clicks on a specific element. The requirement for this project is to allow only one section to be open at a ...

javascriptjqueryhtmlcss

Is there a way to ensure that the size of the second div box can adjust dynamically in CSS?

Is there a way to make multiple boxes expand dynamically in size when one of them contains more words? Currently, the problem is that only the box with more text expands while the others remain unchanged. I want all the boxes to follow the same size dynami ...

css

Exploring the Collapse and Dropdown features in Bootstrap 5 Navbar

Struggling with my navbar on Bootstrap 5 - the collapse feature isn't working after expanding, and the dropdown list fails to drop down. <!-- Using Bootstrap-5 --> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-pro ...

htmlcsstwitter-bootstrapnavbarbootstrap-5

What is the best approach to effectively manage right-to-left text-input fields?

I have been working on a project involving a multilingual layout. One concern that has arisen is: What is the proper way to handle text-input in this scenario? To better explain my issue, I created a JSFiddle. If I simply add the attribute dir="rtl", ...

htmlcsshebrewbidi

"Struggling to make the 'overflow: hidden' property work for an absolutely positioned

I'm struggling to conceal an absolutely positioned image within a CSS grid layout. Below is the code snippet: HTML: <div class="relative-parent"> <div v-for="item in 12" class="hiding-parent"> <div c ...

javascripthtmlcssvue.js

How do I modify the sidebar width with CSS code?

I am trying to adjust the width of the right sidebar on my website. The current layout leaves too much empty space on the right side and makes it appear crowded next to the main content and images in the center. Despite exploring various solutions provide ...

csswordpresswoocommercesidebar

the overflow issue with Summernote's dropdown menu

I am currently working on a 2 columns layout within 2 divs that have different margins set. In the left column, I have integrated a bootstrap datetimepicker and summernote. While the datetimepicker dialog overflows outside the internal div, I am wondering ...

csstwitter-bootstrap-3summernote

Adding a CSS class to an HTML <input> element in Vuetify: A complete guide

Incorporating a <v-text-field> to collect user email addresses, I must append the ym-record-keys CSS class to the HTML <input> element in accordance with the Yandex Metrica guideline. My attempt resulted in the class being added to the parent d ...

cssvue.jsvuetify.jsyandex-metrika

Display the item for which the date is more recent than today's date

Is there a way to display only upcoming 'events' on my page based on their event_date? <% for (let event of events){%> <div class="card mb-3"> <div class="row"> <div class="col ...

javascriptcssmongodbmongoose

The opacity behavior of jQuery seems to behave strangely on IE10

Within my project, the left side of the content is contained within a div called ".container", and there's a preloader located in an element with the ID "#preloader." Across all major browsers, the functionality works smoothly as intended - when all ...

jquerycss

Ratios for Sizing Bootstrap Columns

The Bootstrap grid system consists of 12 columns in total. I am looking to utilize all 12 columns on the page. However, my goal is to have the first 6 columns on the left side be half the width (50%) of the columns on the right side. This means that the ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4css-grid

The jQuery.addClass() function seems to be malfunctioning

I'm encountering an issue with the addClass() method. For some reason, it's not functioning properly in this scenario: https://jsfiddle.net/0g1Lvk2j/20/ If you scroll to the end and close the last box by clicking on the orange box, the orange b ...

javascriptjqueryhtmlcss

Struggling to get the nth-child selector to function properly in IE8

Looking for a solution to alternate colors in a table? Here's what I tried: #grid tr:nth-child(odd) { background-color:#eee; } #grid tr:nth-child(even) { background-color:#fff; } Unfortunately, this works in Firefox but not in IE8. After some i ...

cssinternet-explorer-8css-selectors

Adjust text size using the "increase toggle"

I'm having trouble adjusting the font size of my text within the <div class="comment more>. Whenever I try to wrap the text in a <p>, the "more toggle" functionality stops working properly. Instead of revealing more text when I click on "m ...

javascripthtmlcss

What is the best approach to styling a sub-child element within the first child using TailwindCSS?

Currently working with React (Next.js) and TailwindCSS. <ul> <li> <h1 className="bg-red-400">first</h1> </li> <li> <h1 className="bg-green-400">second</h1> </li> &l ...

cssreactjsnext.jstailwind-css