We Keep Coding

Hide Text inside of brackets via CSS?

i have to hide some text inside of brackets. For example:
Argentinien (Rotweine)
Mendoza (Rotweine)
I want to get rid of "(Rotweine)". Unfortunately i have no chance to make or something else arount the brackets. So i have to do it via css. My idea is to do this via the property "content: (...);" - but I'm kind of stuck there. :/
Anybody an idea of how to solve this issue?

make a class for brackets and use this:
color:transparent
or
display:none

Assuming you only want to do this visually, adding a pseudo element with the content and hiding the label itself this would be an option.
HTML
<div class="wein">
Argentinien (Rotweine)
</div>
CSS
.wein {
color: transparent;
}
.wein:before {
display: block;
content: 'Argentinien';
color: black;
}
https://codepen.io/ithimo/pen/WNeqaPL
This is by no means a nice, intuitive or can be done automatically without the help of javascript.

How to override inline CSS that is already marked !important from external HTML

I am using HTML to input a cloud-based instagram feed on a website. I want to hide the bottom half of the feed that references the website of the publisher. The inline HTML that is outputting already has display: inline-block !important marked, so trying to hide it with display: none !important or visibility: hidden !important do not work. I am able to hide the entire block with CSS but not "parts" of it. I don't seem to be able to edit the HTML since it is coming from the cloud. The only HTML that I actually use on the site in order to make it render does not include any of the inline CSS, as it is only two lines.
Would someone mind explaining how this kind of thing works and why I am encountering issues overriding the inline CSS?
I have tried using:
display: inline !important, display: none !important and visibility: hidden !important
None of these are receiving priority, as the element.style in the chrome developer console clearly shows the inline CSS already marked as !important that I do not have access to, nor can I edit.
I simply want to hide one selector within the HTML. It is marked as "a"
a {
}
I have tried using this selector within the actual element, but it does not receive priority either. Nothing is working.

Try to remove the inline style with jQuery
$("#myDiv2").css("transform","");//used rotate to see the effect
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="myDiv1" style="width:100px !important; height:100px !important;transform:rotate(30deg) !important">
//Some Content
</div>
<div id="myDiv2" style="width:100px !important; height:100px !important; transform:rotate(30deg) !important">
//Some Content
</div>
Setting the value of a style property to an empty string removes that property from an element.
$("#myDiv2").css("transform","");

Typically the only way to do this is to be more specific in your selector, for example selecting a[href][style] is more specific than just a. But since this is inline styles and already using !important you unfortunately might be out of luck!
a[href][style]{
color: green !important;
}
This link uses !important
<br/>
This link does not
If you wanted to just remove the links without importing several thousand lines of jQuery code, you can select and remove all <a> tags with just a few lines of plain JS.
document.querySelectorAll('a').forEach(link => {
link.remove();
});
<p> here is some text
This link uses !important
<br/>
This link does not
and some more text
</p>

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/

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.

Removing or altering CSS pseudo class in jQuery

A simple enough question, so briefly - is it possible to remove or alter in anyway a CSS pseudo class using jQuery? Or any other Javascript method for that matter
Specifically I want to get rid of :focus on inputs. I can't alter the CSS file directly in any way.
thanks for any help
Buster

I can't alter the CSS file directly in
any way.
Assuming you can only use JavaScript to do this, I can't think of anything better than:
$('head').append('<style>input:focus{background:#fff}</style>');
You will have to individually reset each property. font-weight:normal, color:#000 - whatever you need.
See: http://jsfiddle.net/jqpAu/

Without more specific detail it's hard to answer accurately, but if you want you can just override the :focus style:
// in the CSS file
input:focus {background-color: red;}
// in your page
input:focus {background-color: inherit;} // overrides with the parent background
Demo

See this answer: Setting CSS pseudo-class rules from JavaScript
I think you are looking for a way to add CSS dynamically. Example: http://jsfiddle.net/zkMCY/
Code:
var style = '\
<style type="text/css">\
a:hover{ color: #a55; }\
</style>';
$('body').append(style);

If you want to actually prevent the user from using your input, do that via your html:
<input disabled="disabled">

you can use $(selector).removeClass(className)