We Keep Coding

How to disabled style from library css in React

I use the react-slick library to make a slider. I have images inside the tag responsible for the slider. Depending on the size of the screen I would like to hide the images but the property slick.css blocks my css style. How could I turn it off?

You can try to write a more specific css selector.
I assume your image has a class .cHgPZg.
If yes you can try the selector
.slick-slide img.cHgPZg { dsiplay: none; }
If this is not working you can always use the !important; but try to avoid it if possible.
.cHgPZg {display: none !important;} // not recomanded

The issue is specificity. You have to add a more specific selector in order to overwrite the dominating selector and hide the image. Try walking the selector tree backwards until the selector is specific enough; Something like this:
.slick-slider .slick-list .slick-slide img {
display: none;
}

css hover override using only css and JS

I have a code that i can only edit the CSS and the JS. The problem is that the page loads a default css that cannot be altered but you can run an alternative css and JS to add content to a page and modify the css. So i guess the css that is loaded overrides the default one. But the problem is that you can't just say
a:hover {
background-color: red;
}
You would have to reset background color with none and add underline and stuff.
so how can i tell my css to put my *:hover important over any else and remove the default hover?

The css may be too nested. Adding an !important tag would help. But it's more semantic to follow the train of elements. Right click the element you want to style. When you're looking at the editor, you'll see the specificity on the right side (where the css is) and then you can copy the selector they have. Using this selector should allow you to overwrite any styles necessary.
Far top right of the image. The .container is the overall class used here. In some cases you may see something like. (From Foundation)
.top-bar-section li:not(.form) a:not(.button)

Add following in your CSS and make sure you load it after default CSS.
a:hover {
background-color: NONE !important;
}
Using Javascript
$('body').append('<style>a:hover { background-color: none !important; }</style>');

jQuery show element with display:none !important

I have assigned an element a class which has following CSS:
.cls {
display:none !important;
}
When I try to show this element with jQuery
$(".cls").show();
It does not work.
How can I show this element?

$('.cls').attr('style','display:block !important');
DEMO

Although question has been asked long back but its still relevant for new coders/beginners. Generally this situation comes when you have already applied some class which overriding the display behavior using !important property.
Other answers are also relevant to the question and its a matter of achieving the same goal with different approach. I would recommend to achieve it using already available classes in the same library (bootstrap here), instead of writing custom class as these days when most of us are using Bootstrap classes to build the layout.
<div id='container' class="d-flex flex-row align-items-center">
.....
</div>
If you see in the above code, we are using d-flex class for setting display property of this container. Now if I am trying to show/hide this container using
$('#container').show()
or
$('#container').hide()
It will not work as per expectation because of
As d-flex is already using !important property
Jquery's show() method will add display:block not display:flex to the css property of container.
So I will recommend to use hidden class here.
To show container
$('#container').removeClass('hidden')
To hide container
$('#container').addClass('hidden')

2 ways of doing this,
1) Remove the !important from your .cls class,
.cls{
display: none;
}
But I assume, you'd have used this elsewhere so it might cause regression.
2) What you could alternatively do is, have a another class and toggle that,
.cls-show{
display: block !important;
}
And then in your javascript,
$('.cls').addClass(".cls-show");
Then when you need to hide it again, you can,
$('.cls').removeClass('.cls-show');
This will help you keep your markup clean and readable

!important; remove all rules and apply the css desfined as !important;. So in your case it is ignoring all rules and applying display:none.
So do this:
.cls {
display:none
}
See this also

If the only property in the CLS class selector is the display one, you can do this and don't need to add any extra classes or modify the inline style.
To show them:
$('.cls').removeClass("cls").addClass("_cls");
To hide them:
$('._cls').removeClass("_cls").addClass("cls");

Just had this exact issue, here's what I did
first, I added another class to the element, such as:
<div class="ui-cls cls">...</div>
Then in the javascript:
$('.ui-cls').removeClass('cls').show();
The nice thing is that you can also have this code to hide it again:
$('.ui-cls').hide();
and it doesn't matter how many times you hide/show, it'll still work

Getting rid of background properties

I'm scraping this news website: http://www.nu.nl/
If you open console and type:
$('*').css('background', 'none');
You will see all the background properties being removed, except for one which is the "blue" squire in the first article. When I trace the original CSS I see it has the !important declaration assigned to it. I don't know whether this is causing its persistence. What can I try to get rid of that blue background in terms of Jquery and Javascript or CSS?
Please note I don't want to target the element itself but rather keep using the all (*) selector or some Javascript equivalent.

jQuery doesn't recognize the !important attribute in css definitions. You just need a more specific hierarchical selector here. Simply make a new class, and then use addClass.
$('head').append('<style type="text/css">html #page .noBG{ background:none !important; }</style>');
Then just add that class to everything.
$('*').addClass('noBG');
Edit
Based on comments below, you could try
$('head').append('<style type="text/css">html body#noBG *{ background:none !important; }</style>');
Then add the ID to the body
$('body').prop('id', 'noBG');
Which is a pretty specific selector. Some rules may still pass this, and you'll have to experiment with different variations depending on the scenario.

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.