CODEWITHSUNDEEP
csselement
Leafli
Leafli

Reputation: 23

CSS element changes taking no effect

Usually when I go to write custom CSS for a site, I use Inspect Element to view the contents of certain, well, elements. And it usually I just add the identifier for that line, and punch in some custom commands like "border: none;" but I keep coming across elements that don't appear to have any real name other than just "element" and for some reason NO changes I make to some of these "elements" actually work or get applied.

For instance: There were disgusting white borders on a table, and since I couldn't target the specific element, I added this to the top of my document:

* {
    border: none !important;
}

Which, one would assume would work. And, surely, it does! For everything except the element I'm trying to change. I still can't quite figure out how I'm expected to change this element, when something that encompasses the entire file STILL can't forcefully change it. Can someone explain this to me?

Edit:

I'm not sure what you expect me to show you, since I explained it here. These images show my inspector open and you already have above my custom code implemented through Stylish plugin/ custom CSS file.

First and
Second
Just to reiterate, instead of saying "element" it usually gives me a valid name to go by, such as "table#first", and I wrote 

* {
    border: none !important;
}

to counter the border it has applied, but it won't take the change. I imagine it has something to do with the !important in the original border but I'm not sure what to do.

Edit:

I added

table[style] {
    border: none !important;
}

Which I expected to work, but still comes up the same as when I added the first block of code I explained, it crosses it out in the inspector and doesn't take effect.

Upvotes: 0

Views: 3942

Answers (2)

pdoherty926
pdoherty926

Reputation: 10349

element is the DOM inspector's way of telling you that the styles are being applied inline, to the element itself - either directly in the HTML or via JavaScript.

You can work around this by doing the following (inspired by this post at css-tricks.com):

/* 
You'll likely want to use a specific selector in order 
to prevent these styles from being applied to _all_ 
tables. 
*/

table[style] {
   border: none !important;
}

This is a last resort, though. You should address this issue in a more holistic way, by moving any inline styles which aren't absolutely necessary (e.g. based on calculations done by JS or something computed on the back-end) into your stylesheet, if possible.

Upvotes: 0

cup_of
cup_of

Reputation: 6687

in this case the inline styling is overriding the styles in the css file. to fix this i suggest you giving that table a class and then style it in the css file.

btw: css stands for cascading style sheet meaning the styles that come at the bottom will overwrite the styles that come at the top of the file

so it will look something like this

html:

<table class="mytable">
  <!-- content -->
</table>

css: 

.mytable {
    border: 1px solid rgb(216, 216, 216)
    margin-top 10px;
{

* {
    border: none;
}

try to only use !important as a last resort to overwrite a style that isnt working

Upvotes: 1

Related Questions