remove the inherited CSS value? - javascript

I'm trying to remove the value of an inherited CSS property using Jquery.
.class1 #id1 div.class2 input.class-input{
border-color: #bbb3b9 #c7c1c6 #c7c1c6;
}
Anyone tell me how to remove this "border-color".
Thank.

Create a new class for example
.new_class{
border-color: #00ffdd !important;
}
!important does the trick!
Check this

You can use jQuery, but you'll have to assign a value to the border-color property. You can use transparent though:
$('.class-input').css('border-color', 'transparent');
Edit: Or you can disable the whole border:
$('.class-input').css('border', 'none');

You can either swap the on your div to change the color, or set the border color to empty using
$(".class1").css("border-color", "");
But I would recommend swapping out the class using the removeClass and addClass JQuery functions.

If you still want to keep the width of the border:
border-color: transparent;
If you want to remove the border all together
border: 0;
Edit: border: none; will give your the same result
So your jquery could look something like this:
$(".class-input").css("border","0");
However I would suggest using CSS if you don't need to make it animated. Since you raised the concern about .class1 #id1 div.class2 input.class-input.myclass (I'm assuming that's what you mean since you wouldn't be throwing a div into an input box.
You can use the CSS pseudo-selector :not
.class1 #id1 div.class2 input.class-input:not(.my-class){
border: 0;
}

The simplest way to handle this is to add another reference to give your override code a higher specificity.
.class1 #id1 div.class2 input.class-input [#MyNewID]{
border: none;
}
This removes the border for the area where you have added the ID so that if you are using this same format in other pages you can add an additional ID on the element on the page where you want the border to "disappear"
Please don't use !important this is a lazy way to override code and is not necessary 95% of the time. It will also cause you problem later when you are trying to change this if you are pushing down site wide skins.

Related

Image Slider with border colour

Recently I'm using an image slider to my angular project then I need to add the background colour to each images' border like my attachment. I used custom CSS class to fulfil this but I cannot find way to apply this class correctly. But when I using DOM I can do that, My CSS class is as follows
border-boundry{
border-style: solid;
border-color: red;
}
NPM Package Link: https://www.npmjs.com/package/ng-image-slider
Demo: https://sanjayv.github.io/ng-image-slider/
What if you use one of the classes you have on the right like ng-image-slider-container ?
Try to add "background-color: red;" on the class ".ng-image-slider", is this what you want to do ?
It is very possible that the library you're using is enforcing css rules with !important flag. So you can either try to override it with !important yourself (not recommended ), or try to use already existing classes by adding more css to them...
Add the following lines in the styles.css of your angular app. With this you get the selected image surrounded with a frame.
.selected-image {
border: 1px solid lightgrey;
}

How to to change CSS double class properties through script

In JQuery UI, there are a lot of CSS double classes, for example for JQuery UI's tabs
.ui-widget-content .ui-state-default
{
border: 3px solid #EEEEEE;
background: #ffffff url(BGDel.png) repeat-x;
font-weight: bold;
color: #ffffff; outline: none;
}
The above works fine if it is in a CSS file.
I want to use javascript / Jquery to change one of property, like
$(".ui-widget-content .ui-state-active").css({"font-weight":"normal"} );
It doesn't work. Could anyone help how to set or change the CSS double class properties through script? Thanks.
$(".ui-widget-content .ui-state-active").css({"font-weight":"normal"} );
This line does not change the CSS class itself, it only selects an element matching this selector .ui-widget-content .ui-state-active.
So please do an "Inspect element" for example in firebug or Google Developer Tools, find needed element, and see if you are using the right selector.
Since .css() function puts all given code into style attribute, it should override any class that is in CSS file, so i think, that you should try a different selector to match your element.
There are two class apply on your element first is .ui-widget-content and second is .ui-state-default.
in your example you set css to .ui-widget-content or .ui-state-active. but it is not correct because the a another css .ui-state-default apply on that element.
so you need to use !important or also apply jquery code for.ui-state-default class
try -
$(".ui-widget-content .ui-state-active").css('font-weight', 'normal!important' );
or
$(".ui-state-default").css('font-weight','normal'); // for fire fox use css('font-weight', '400');
or
$(".ui-widget-content .ui-state-active .ui-state-default").css('font-weight', 'normal');

Prevent css interact in a div

I am doing a code that do some js injection of code in page, with JQuery. But in my input that i get in some pages modify it, I am putting all important attributes and define them as !important, but it's impossible to put all the attributes in all the tags.
Someone know how to disable all other css inside a div?
Solution I think:
I found a solution but i don't want to use it. Its eliminate al css from the page, while i am injecting the code after using that code I eliminate my css and code and apply the original code from the webpage
Thanks
If you're using that many !importants you're doing it wrong.
The solution to this problem is to properly organize your css. Important stuff last, because it overrides what was previously styled. Also use your selectors wisely. Example:
<a class="link">Link</a>
.
a:link { color: red; }
.
.
.
.link { color: green !important; } // Nop
a.link { color: green; } // Yup
If you override everything it will work with normal CSS rules on every page. Not what you were hoping for, but it is a solution.
css:
#myInsertDiv {
color: blue;
padding: 0;
margin: 0;
background: white;
border: 0px;
/* etc you have to restyle EVERY possible value */
}
html:
<div id="myInsertDiv"></div>
The main issue is you have to style every attribute, and reset everything else to a default value.
Or you can insert all the style information into the style attribute on the div, but that is probably doing it wrong too.
If I got you right you can use jQuery for modifying CSS properties on any elements of the page (huh), using something like this $('.Myclass').css('color','#ff0000')
And more about selectors in jQuery - http://api.jquery.com/category/selectors/

Setting the background colour of zebra-striped table rows

I am using:
tr:nth-child(2n+1) {
background-color: #DDDDDD;
}
To zebra-stripe a table. I have the class:
.redbg {
background-color: #FF6666;
}
And am using:
$(this).parent().parent().addClass("redbg");
To use JQuery to change the background colour of the rows when I need to.
Unfortunatly, it only works on the non-2n+1 rows. How do I recolour the #DDDDDD rows?
Simply change the "redbg" class to add the tr to the front:
tr.redbg {
background-color: #FF6666;
}
This occurs because tr:nth-child(2n+1) is more specific than .redbg so it overrides the background color no matter what. Changing it to tr.redbg makes it just as specific so the "redbg" class will override the :nth-child() selector.
See the jsFiddle
Note for future reference: The tr.redbg selector has to be defined after the tr:nth-child(2n+1) selector in order for it to override the background color.
It seems like that might have something to do with the rules of CSS specificity.
Try changing your selector to tr.redbg and see if that works.
Don't use !important (as another answer suggests)
Instead, make your selector more specific. Add add something like
table tr.redbg { background-color: #FF6666; }
Here's a great link on calculating CSS specificity.
I think you need to make your redbg class more explicit than the nth child to override it.
Maybe something like (though I haven't tested it, but should get you started):
.redbg, tr.redbg:nth-child(2n+1)
{
background-color: #FF6666;
}
Something about tr:nth-child(2n+1) taking priority because it is more specific selector.
Change the other one to
tr.redbg {
background-color: #FF6666;
}
and it shoudl work

remove / reset inherited css from an element [duplicate]

This question already has answers here:
How to reset/remove CSS styles for a specific element or selector only
(17 answers)
Closed last month.
I know this question was asked before, but before marking it as a duplicate, I want to tell you that my situation is a little different from what I found on the internet.
I'm building and embedded script that people can put it on their sites. This script creates a div with a certain width/height and some information in it.
My problem is that some websites declare styles for div that are inherited by my div as well.
for example:
div{
background-color:red;
}
so if I don't set any background color to my div, it will show red even if I don't want that.
The only solutions I come along is to overwrite as many css proprieties, this way my div will show exactly as I want.
The problem with this solution is that there are too many css proprieties to overwrite and I want my script to be as light as it can be.
So my question is if you know another solution to my problem.
It can be in css/javascript /jQuery.
Thanks
"Resetting" styles for a specific element isn't possible, you'll have to overwrite all styles you don't want/need. If you do this with CSS directly or using JQuery to apply the styles (depends on what's easier for you, but I wouldn't recommend using JavaScript/JQuery for this, as it's completely unnecessary).
If your div is some kind of "widget" that can be included into other sites, you could try to wrap it into an iframe. This will "reset" the styles, because its content is another document, but maybe this affects how your widget works (or maybe breaks it completely) so this might not be possible in your case.
Only set the relevant / important CSS properties.
Example (only change the attributes which may cause your div to look completely different):
background: #FFF;
border: none;
color: #000;
display: block;
font: initial;
height: auto;
letter-spacing: normal;
line-height: normal;
margin: 0;
padding: 0;
text-transform: none;
visibility: visible;
width: auto;
word-spacing: normal;
z-index: auto;
Choose a very specific selector, such as div#donttouchme, <div id="donttouchme"></div>. Additionally, you can add `!important before every semicolon in the declaration. Your customers are deliberately trying to mess up your lay-out when this option fails.
You could try overwriting the CSS and use auto
I don't think this will work with color specifically, but I ran into an issue where i had a parent property such as
.parent {
left: 0px;
}
and then I was able to just define my child with something like
.child {
left: auto;
}
and it effectively "reset" the property.
Technically what you are looking for is the unset value in combination with the shorthand property all:
The unset CSS keyword resets a property to its inherited value if it inherits from its parent, and to its initial value if not. In other words, it behaves like the inherit keyword in the first case, and like the initial keyword in the second case. It can be applied to any CSS property, including the CSS shorthand all.
.customClass {
/* specific attribute */
color: unset;
}
.otherClass{
/* unset all attributes */
all: unset;
/* then set own attributes */
color: red;
}
You can use the initial value as well, this will default to the initial browser value.
.otherClass{
/* unset all attributes */
all: initial;
/* then set own attributes */
color: red;
}
As an alternative:
If possible it is probably good practice to encapsulate the class or id in a kind of namespace:
.namespace .customClass{
color: red;
}
<div class="namespace">
<div class="customClass"></div>
</div>
because of the specificity of the selector this will only influence your own classes
It is easier to accomplish this in "preprocessor scripting languages" like SASS with nesting capabilities:
.namespace{
.customClass{
color: red
}
}
Try this: Create a plain div without any style or content outside of the red div. Now you can use a loop over all styles of the plain div and assign then to your inner div to reset all styles.
Of course this doesn't work if someone assigns styles to all divs (i.e. without using a class. CSS would be div { ... }).
The usual solution for problems like this is to give your div a distinct class. That way, web designers of the sites can adjust the styling of your div to fit into the rest of the design.
As long as they are attributes like classes and ids you can remove them by javascript/jQuery class modifiers.
document.getElementById("MyElement").className = "";
There is no way to remove specific tag CSS other than overriding them (or using another element).
you may use this below option.
<style>
div:not(.no_common_style){
background-color:red;
}
</style>
now , if their any place where you do not want to apply default style you can use 'no_common_style' class as class.
ex:
<div class="no_common_style">
It will not display in red
</div>
From what I understand you want to use a div that inherits from no class but yours. As mentioned in the previous reply you cannot completely reset a div inheritance. However, what worked for me with that issue was to use another element - one that is not frequent and certainly not used in the current html page. A good example, is to use instead of then customize it to look just like your ideal would.
area { background-color : red; }
One simple approach would be to use the !important modifier in css, but this can be overridden in the same way from users.
Maybe a solution can be achieved with jquery by traversing the entire DOM to find your (re)defined classes and removing / forcing css styles.

Categories