Overriding CSS that uses a :not Selector

Question

I'm using a custom Bootstrap theme, and wanted to create a new class for certain tables. The original CSS has the following line:

table a:not(.btn), .table a:not(.btn) {
    text-decoration: underline;
}

Later, I've added my own custom CSS, to remove the underline from links:

.gridview a {
    text-decoration: none;
}

HTML:

<table class="table gridview">...

Using Chrome's developer tools, I can see that my gridview class is loaded after the original table class, yet it is being overridden by the original. I've also experimented by replacing my CSS with the following:

table a, .table a {
    text-decoration: none;
}

...but I'm getting the same result. There are likely a few workarounds I could use (such as !important if it really came to it), but I'd like to understand what's going on first and hopefully come up with a cleaner solution. Any ideas?

Answer 1

If we examine both:

.table a:not(.btn)
C      T:S

.gridview a
C         T

There is a little more specificity in the bootstrap's selector. The pseudo class selector is more specific. So changing your class to this way:

.gridview a, .gridview a:not(.btn)

Will make it work. Or to be more specific, you can give all the values:

table.gridview a:not(.btn), .table.gridview a:not(.btn)