I am trying to add an inline element to my page. It should behave exactly like span i.e. not introduce any default styling of it's own..I want to just be able to refer this element in my JS (using id).
Please help me suggest some style(less) elements like span.
Why not just add some extra css as mentioned by #James Allardice that removes old css and or applies new styling.
Html:
<span>My Super Cool Span</span>
<span id="MySpan>My Super Cool Span With An ID </span>
css:
span {
width:100px;
}
span #MySpan{
width: auto; // resetting width
// Reset css or apply new styling
}
By doing this only spans with id MySpan will use your new styling or have their styles reset.
Look at css attributes on www.w3schools.com to find out their defaults values.
Then you can refer to MySpan in javascript by doing:
document.getElementById('MySpan')
Or in jquery by doing:
$("#MySpan")
Use createElement() in JavaScript
<script>
var newElement = document.createElement('newElement');
newElement.setAttribute('id', 'newElementId');
var oldElement = document.getElementById('element');
oldElement.appendChild(newElement);
</script>
<div id="element"></div>
That should add a new element type, "newElement"
Related
I need help on how to make CSS styles final so that they could not be overwritten by Javascript.
Problem: Sometimes, because of the img tag in the JavaScript code, everything, (all styles of all of the images) gets overwritten.
Here is my code:
<img src='logoImg' style='width:45px; height:30px;' >
Please tell me ways to do this in JavaScript or in CSS itself.
Desired output: I need the Logo Image to have final styling. So it is not affected by JavaScript through the DOM (document object model).
You can try adding !important keyword to your CSS properties to prevent them from getting changed.
Example
const test = document.getElementById("test");
// The color won't change to orange
// due to !important keyword in the CSS code
test.style.backgroundColor = "orange";
#test {
width: 50px;
height: 50px;
background: green !important;
}
<div id="test"></div>
Ideally though it would be better to work around this using a different solution like using a more specific method of selecting an HTML element and changing it's properties.
If you have some kind of a style applied by selecting a tag, you can override it by using a class or an id when it comes to CSS. If you're searching for elements in JavaScript code, you can look for them by a class name or an id value instead.
An alternative solution in your case would be to re-write/modify the JavaScript code that targets your img tags and either skip images that have a specific class like let's say logo, or make a custom class for all your standard images that do not include your logo element and look them up in your JavaScript code using document.getElementsByClassName method.
If you want to prevent JS to overwrite the style of an image, you need to style it in CSS and add important; to raise it specificty weight. !important has a higher specificty weight then inline-style and as such JS style (JS add the style as inline-style) wont apply.
function resize() {
document.querySelector("img").style.height = "200px";
document.querySelector("img").style.width = "200px";
}
img.test {
width: 45px !important;
height: 30px !important;
}
<img src='https://via.placeholder.com/200x200.jpg' class="test">
<button onclick="resize()">Test</button>
I want to remove HTML elements classes using CSS. What is the method of removing classes from HTML using CSS?
CSS cannot modify the classes applied in the DOM and is used only for visual styling.
To change classes of an element you have to use JavaScript
You can't. CSS is Cascading Style Sheets and is used only for styling, read more about CSS in this w3chools article.
For changing element's class you need to use Javascript, there are a bunch of methods to do this and most famous of them are pureJS DOM methods which you can learn here and of course amazing JQuery, both are not very hard and convenient but I prefer JQuery myself
You can't remove classes with CSS because that's for styling only and it can't modify the DOM. JavaScript hover, is able to do that. You could use this snippet to achieve that:
const classesToRemove = ['class1', 'class2', 'class3'];
const removeClassesFromElements = () => {
classesToRemove.forEach((className) => {
let elements = document.getElementsByClassName(className);
for (let element of elements) {
element.classList.remove(className);
}
});
};
document.addEventListener('DOMContentLoaded', (event) => {
removeClassesFromElements();
});
<h1 class="class1"></h1>
<p class="class2"></p>
<hr class="class3" />
CSS can't modify any HTML elements. But You can use pseudo classes for certain triggers.
Use :focus or :hover. Also you can use checked state of a hidden checkbox like
checkbox:checked + .btn {
color: #fff;
background-color: #6b15ce;
}
I have a webpage with elements, styles (imported and inline)
I want to reset the style for a specific element.
Example:
HTML:
<div class="parent">
This is the parent div, it colors the <strong>strong in red</strong>
makes a <small>small underlined</small>
<h4>sets a margin-left 10px for a H4</h4>
and many other stuff<br><br>
<div class="child">
this is the child element<br>
here a <strong>strong should not be red</strong><br>
<small>small should not be underlined</small>
<h4>H4 should not have a margin-left</h4>
and so on...
</div>
</div>
CSS:
.parent strong{
color:red;
}
.parent small{
text-decoration: underline;
}
.parent h4{
margin-left: 10px;
}
I want the child div to ignore the styles coming from his parents, including the html element
Here is an illustration of my example
The styles I gave here are just examples, there are much more
I cannot modify the parent CSS, is being dynamically generated
My child div is injected in the page, I can also inject any CSS I want
I cannot know in advance the content of the parent CSS
The only solution I found so far is including the child element in an Iframe, but is really really ugly!!
Any one can help how to achieve this? A JS solution is also acceptable.
.child strong{
color:pink !important;
}
1.You adjust the injecting code css via !important.
2.Even though you can't predict the css of the parents you can only have some basic CSS thing for your injected code.
Example
You can use css immediate child selector '>'
in your example
.parent>h4{
margin-left: 10px;
}
.parent>strong{
color:red;
}
check the updated demo
http://jsfiddle.net/WRDft/11/
Refer: http://msdn.microsoft.com/en-in/library/ie/aa358819(v=vs.85).aspx
CSS '>' selector; what is it?
This question has already been asked and discussed.
There is no way to blanket clear styles but there are work arounds.
Reset/remove CSS styles for element only
If I am understanding you correctly and if you know what content is being injected into your child div then the JQuery solution is very simple:
$(".child strong").css({"color":"black"});
$(".child small").css({"text-decoration":"none"});
$(".child h4").css({"margin-left":"0"});
The JQuery code can then be wrapped in any sort of function you desire.
Here is your fiddle with the JQuery added. Hope that helps.
Note: the JQuery selector - for example: $(".child strong") - can be as specific or as general as you like and you can add as many css rules as you like by using a comma separated list like this:
$(".child strong").css({"color":"black", "font-weight":"bold", "text-decoration":"underline", etc, etc});
Thank you all for your thoughts guys, unfortunately, the best way I managed to achieve this is by wrapping my content inside an IFrame
Advantage: Immediate and easy reset
Disadvantage: I cannot manipulate the elements outside of the IFrame
I have very limited knowledge of coding, html/css, but I have a problem which makes me want to learn more. Anyway, I want to change the font-size inside a <span>, nested inside the code of the page. The complete code-snippet looks like this:
<span style="font-size: 11px;">Buy</span>
I want to change that to font-size:14px;. But, since there is no class/ID, just a <span>, I don't understand how to change it. And as I said, it's deep within the document and there are at least 20 divs or some wrapped around it.
Is there a way to target that span, and maybe get the "path". I've been fiddling with Developer Tools in Chrome but I really don't see how XPath can help me?
To sum it up - how do I overwrite inline css (without a class or ID), from an external css?
Thank you.
Sorry if you have already tried this but !important in your css declaration will override any css declarations
You can declare a property as final( in my word ) as below.
Try this in external:
selector {
font-size: 14px !important;
}
You need to have an id to change that particular span's font size. If you change for span than it will affect all spans in the document. Or if the span has a parent element you can select that
.parent span {
font-size:14;
}
update
needs to have !important to override the inline rule.
but who uses inline rules anyways. you shouldn't.
Add a class to it and then target
<span class="target">Buy</span>
Adding a "new" class wont hurt
You cannot target it without a class directly.. maybe the parent div has a class then
<div class="parent">
<span style="font-size: 11px;">Buy</span>
</div>
.parent span{
font-size: 18px !important;
}
You will ahve to use !important to override the inline css.. also keep in mind that this will effect all span inside a div with class of parent
<div style="background: red;">
The inline styles for this div should make it red.
</div>
We can fight that with this:
div[style] {
background: yellow !important;
}
Of course just add a class to the div before [style] to change the div with class you added.
example:
div.myclass[style]
Note, this is different than the older question How can I apply CSS on all buttons which are present in that page? because this is an already existing style. So given that a style, which we'll call "standard_label_style" already exists in an included CSS file, what can I do to say that all the labels on this page should have that style short of adding:
class="standard_label_style"
to each and every one? And yes, I know I could apply the styles ex-post-facto with a snippet of jQuery or JavaScript code. I'm just trying to learn how I'm supposed to do it with CSS.
Follow Up
I've gotten several comments that say just use syntax like this .standard_label_style, label... Unfortunately that does nothing like what I want. That would allow me to apply additional rules to the standard_label_style class, as well as rules to labels within this page, but would not allow me to apply that style to all the labels on this page. To see an example of this, here is a stylesheet and html to demonstrate. The label without a class will still not appear in red but that's what I'm hoping to have happen. I want to apply an existing class to all those labels on the page, not just the one with the class and without adding new styling on this page, the existing style should be the only style.
included.css:
.standard_label_style { color: red; }
test.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="included.css">
<style>
.standard_label_style, label { }
</style>
</head>
<body>
<label class="standard_label_style">Test Label</label><br/>
<label>Unclassed Test Label</label>
</body>
</html>
CSS doesn't really work like that.
You can apply a style to all labels directly:
label {
color: Lime;
}
or apply a class to all labels
.labelClass {
color: Lime;
}
<label class="labelClass"></label>
You can also have multiple selectors, so you could ammend your current style to be
.labelClass, label {
color: Lime;
}
What you can't do in standard CSS is something like
label {
.labelClass;
}
The good news is that there are a bunch of server side libraries which make CSS suck less and let you do exactly this kind of thing, see for example dotLess if you're using .NET which provides nested rules and a basic inheratance model.
To apply a style to every label on the page, use this CSS:
label {
/* styles... */
}
If you have an existing style (e.g. "standard_label_style") in the CSS already, you can apply that to every label:
.standard_label_style, label {
/* styles... */
}
This will affect every label through the site, so use with caution!
In your css file, can't you just put
.standard_label_style, label
{
//styles
}
.standard_label_style, label {
/* stuff */
}
I'm not sure you can... one possible workaround (feels a bit hackish though) is to attach the style to your body tag, then change the css to be this:
body.standard_label_style label{
//Your styles here
}
One of the most underused CSS tricks of all time: Give your bodies an id or class!
HTML:
<body id="standard_label_style">
<label>Hey!</label>
</body>
CSS:
#standard_label_style label{
the styles
}
will take the styles, while
HTML:
<body id="custom_label_style">
<label>Custom!</label>
</body>
Will not.
You are dealing here with CSS precedence. Declarations which are "more vague" (body tag, classes) are applied before declarations which are "less vague" (specific elements, inline CSS).
Thus your answer depends on how the stylesheet is defining label styles. If for example it says label {...}, then that's fairly specific, and your best bet is to use a more specific CSS style, see:
http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/ (good tutorial?)
CSS precedence
The level of "specificity" you need to override, as I said, depend on how specific your other stylesheet was. According to the link, "CSS embedded in the html always come after external stylesheets regardless of the order in the html".
There is also a chance that if you yourself define label {your custom css} that should work, if you import your stylesheet afterwards. It is what I would try first to see if it works. Have you tried this? What was the result?
Note that if you want to completely override the other stylesheet, you will need to also reset any CSS you are not using by settings its values to inherit or as appropriate.