Override inline style with another class for span

Question

CSS class

.MyLinkList {
  border: 2px solid yellow !important;
  border-left: 2px solid green !important;
  font-family: chiller !important;
  font-size: 12px !important;
  color: red !important;
}

<li class="MyLinkList">
  <span style="padding-right: 10px;font-family:Arial;font-size:11px;color:Black;font-style:normal;font-weight:normal;text-decoration:none;">g</span>
</li>

For span the inline style is given which getting more priority and our class MyLinkList color style etc is not get applied how I can make span takes the MyLinkList class style. I know I can use .MyLinkList span but I don't want that.

use !important. If you are unaware of it the see : http://stackoverflow.com/questions/9245353/what-does-important-in-css-mean — Aayush Rohatgi, Nov 01 '16 at 12:25
I want to give user more simplicity for using CSS so with one class .MyLinkList he can deal with span also. — santosh, Nov 01 '16 at 12:26
@Aayush Rohatgi Where I can use !important because already used in my class. — santosh, Nov 01 '16 at 12:28
ok you are not using MyLinkList on span so !important won't work for you — Aayush Rohatgi, Nov 01 '16 at 12:30
@Aayush Rohatgi inline style is important for be because by default inline style will be applied means if I not given CSS class style. — santosh, Nov 01 '16 at 12:31
use a new class with color marked important and apply it to span. — Aayush Rohatgi, Nov 01 '16 at 12:32

score 1 · Answer 1 · answered Nov 01 '16 at 12:32

1

I know I can use .MyLinkList span but I don't want that.

It is your only choice.

The span doesn't have color: inherit, so it won't take the parent element's style. Only styles that target the span specifically will affect it.

answered Nov 01 '16 at 12:32

Quentin

914,110
126
1,211
1,335

Appreciate the response but is that no way to use MyLinkList class style for span? – santosh Nov 01 '16 at 12:42
@santosh — Other than changing the span so the styles affecting it have `inherit` as their values (as implied by this answer): No – Quentin Nov 01 '16 at 12:43

Bozidar Sikanjic · Answer 2 · 2016-11-01T13:11:28.800

0

You can do it via JavaScript:

if you need to change one element (this will delete inline styles):

var changeMyStyle = document.querySelector(".MyLinkList>span"); changeMyStyle.style = ""; changeMyStyle.classList.add("MyLinkList");
if you have more span elements that needs to be reseted:

var changeThem = document.querySelectorAll(".MyLinkList>span"); var changeThemLen = changeThem.length; for(var i = 0; i < cnahgeThemLen; i++) { changeThem[i].style = ""; changeThem[i].classList.add("MyLinkList"); }

Explanation: This code will do two things: 1. It will remove inline style from span element 2. It will add CSS class to span element

You can add class you already defined or some other class, you can add multiple classes and basically redefine whatever you want.

edited Nov 01 '16 at 13:11

answered Nov 01 '16 at 12:32

Bozidar Sikanjic

717
5
12

Thanks for your response but I want to give style which given in my css class .MyLinkList. – santosh Nov 01 '16 at 12:41
Then you add your class to element. I've updated my answer. – Bozidar Sikanjic Nov 01 '16 at 12:45
But by this in class border style also get applied to span:( – santosh Nov 01 '16 at 12:49
Then define `MySpanStyle` CSS class the way you want it, with or without borders and add it to span in `changeMyStyle.classList.add("MySpanStyle");` and `changeThem[i].classList.add("MySpanStyle");` instead of this class. – Bozidar Sikanjic Nov 01 '16 at 12:57
I want to give all style border plus font in single "MyLinkList" Class. – santosh Nov 01 '16 at 13:04
I'm not sure I follow you anymore.... Copy your CSS class or create new one, remove or change border styling and whatever you want for your element(s), rename your class if you copied it, add this class via javascript in a way I explained in my answer and comment bellow... – Bozidar Sikanjic Nov 01 '16 at 13:17

Override inline style with another class for span

2 Answers2