I'd like to apply a CSS to some linkbuttons on page load but one of them <a id="lb1">logoff</a> must keep its style, no hover nor other event must change its style.
The linkbuttons have no class and the css applied to all of them is done to tags, this way:
a
{
//style
}
a:hover
{
// style
}
Is it possible?
No, you can't.
You can use more specific selectors (or even inline CSS with the style attribute) so that they are less likely to be overridden accidentally.
You can use the (eugh) sledgehammer of !important so they will only be overridden by another !important rule.
There is no way to prevent them being overridden though.
Please please please please please avoid using !important whenever possible. You will run into SO many annoying problems and issues from using this. I consider it a very lazy hack.
What you want to do is append a class to the link that you don't want overwritten. Classes are given a higher priority than general selectors (such a, p, b). So if you append this class to the link, the CSS will override the default CSS you have set for a.
CSS:
a {
color: red;
}
a:hover {
color: blue;
}
.derp:hover { /*you can add everything you want to preserve here, essentially make it the same as the link css. you can also change it to #lbl:hover, although there's no good reason to be using an ID as a CSS selector*/
color: red;
}
HTML:
this will turn blue on hover
<a class="derp" href="#">this will stay red on hover</a>
Here's a fiddle to show you. The second link has a class appended that preserves the original style: http://jsfiddle.net/p6QWq/
Why not add a class to all the link buttons you want to change, and not add it to the one you don't want to change.
Then you can call:
$(".myClass").css("backgound-color", "blue");
This would change the background color for every element with a class of myClass to a blue background.
Or you could add a whole new class to the link buttons that have a class of myClass:
$(".myClass").addClass("myExtraClass");
This would then make the class attribute of your link button class="myclass myExtraClass"
Seeing your code posted makes it a little more clear on what you want to do. Try this:
a {
text-decoration: none;
color: orange;
}
a:hover {
text-decoration: underline;
color: blue;
}
This would apply a default style to all <a> elements. Now you could overwrite this default style by providing a specific style for the anchor with the id you gave above:
#lb1 {
color: black;
text-decoration: none;
}
#lb1:hover {
color: black;
text-decoration: none;
}
I mocked this up in a quick and dirty jsFiddle. See if this gives you the desired result. IDs take precedence over classes and default element styling. So if you have one that you want to keep the same, apply and ID and style the particular element accordingly. This would also help you by preventing you from having to apply a class to several elements. It's less coding to apply one ID than to apply twelve classes. (Just an exaggerated example. I don't know how many links you have.)
Hope this helps.
css is cascading by definition, so any style you apply to a tags will apply to this specific one, except if you overwrite it.
You'll have to either assign a class to all the other buttons or overwrite all the default properties for this specific button.
Also, do not forget the pseudo-classes :visited and :active.
You should use !important in your css like :
a {
/* style */
background: #FFF !important;
}
a:hover {
/* style */
background: #FFF !important;
}
You could always overwrite your css by simply creating another stylesheet and place it at the END of your stylesheet links in the head of your html.
<head>
<link rel="stylesheet" href="location/location/first_stylesheet.css">
<link rel="stylesheet" href="location/location/revised_stylesheet.css">
</head>
This is not the most productive method of overwriting your css however; one would be well advised to eliminate the necessity for this separate stylesheet by simply appending elements with a class attribute. The class attr will allow you to modify basic html elements, tags and overlay a final layer to "rule them all". Enjoy!
Related
I am implementing a dark mode on my site, and trying to do it in the cleanest way possible (no boiler plate code).
So I want to make .darkmode class in CSS, define styles with it, and when the user enables darkmode, javascript simply adds the darkmode class to the <body>.
How could I do something like this with CSS?
.darkmode {
.content{
background-color: black;
}
input{
background-color: black;
}
}
So my questions is, how can I make CSS change different elements on the page when adding this class to the <body>?
The code that you posted would be valid SCSS/LESS. But in plain css you can simply do that by using
.darkmode .content { /* CSS */ }
.darkmode input { /* CSS */ }
So yes, you always have to specify the .darkmode in front of every selector.
Let's suppose you have a selector, like
.mydiv .myanchor
You can override/add attributes using
body.darkmode .mydiv .myanchor
is much more specific and therefore the rules will override the default rules.
To achieve that in normal CSS you would have to use the CSS child selector;
body.darkmode .content {
/* Put styles here */
}
body.darkmode input {
/* Put styles here */
}
Basically the logic there says: "get the body element with the class darkmode and find it's child .content/input"
With CSS selectors, having two element selectors seporated by a space finds all of the second elements inside the first elements; div p would find all of the <p> tags inside all <div> tags.
I have one question...
If you want conditional styling: you must use ng-class or ng-style construction.
But...
For example: I'm an admin, and I want to change color of my application with custom color from colorpicker. How can I change some code in css?
For example I have this line in style.css:
body{
background: #ffffff;
}
(also all tags like a, h1 etc implement some color)
and in controller I change this #ffffff to #000000.
What is the best way to change this color in css, without using ng-class or ng-style on each tag in each controller?
The best way is generate a file like color.css with all css rules with color, background-color, border-color etc. overridden. But angularjs will not be enough.
color-default.css
body {
background: #fff;
}
color.css
body {
background: #f00;
}
Full JS way
Add class on every element you want to override.
Create class for every properties like so:
.skin-color { color: {{color}}; }
.skin-background-color { background-color: {{color}}; }
.skin-border-color { border-color: {{color}}; }
etc..
Apply class on your html where you want:
<h1 class="skin-color">My title</h1>
<p>Hello I'm online!</p>
<p class="skin-background-color">No difference!</p>
<p>I'm link</p>
You can save the color variable in localStorage for example.
Démo: http://codepen.io/anon/pen/jPrabY
You could write the CSS rule in JavaScript and add it to a stylesheet dynamically. A couple of good articles on how to do that are here and here.
var myColor = '#FF00FF';
var stylesheet = /* get stylesheet element */;
stylesheet.insertRule('.dynamic-color { background-color:"' + myColor +'";}',0);
Of course, in a pure Angular way, you would create a directive that wraps the DOM/stylesheet interaction.
The easiest way I can think about is, for example, clicking on myBox changes its background-color.
html:
<div class="myBox" ng-click="changeBackgroundColor()"></div>
js:
$scope.changeBackgroundColor = function(){
angular.element('.myBox').css('background-color', '#000');
}
css:
.myBox{background-color: #fff;}
Hope I've been helpfull.
Another alternative is SASS or LESS and deal with colors using variable...
I'm trying to change the background color of a div with a checkbox in it. I've made this for reference. I'm trying to replace the parent <div> with the 'highlight' <div>, so I thought the toggle <div> would work. When the checkbox is deselected, I would like the background color to go back to normal (or remove the 'highlight' <div>). Any help is appreciated.
You are setting an inline background-color style for the divs. This takes precedence over any properties you set via a CSS rule.
Add !important to the background-color value of the checked class in your css file, like so: http://jsfiddle.net/KtsGs/1/
There are a few issues present in the jsFiddle.
The first one is that, despite having written jQuery code, you haven't selected jQuery as the framework on the left hand side. That's a small issue specific to the code on jsFiddle, and easily fixed, though.
The second issue is that you have inline styles on the <div> elements, including a background-color. That inline style will be used in preference to any background-color specified using a CSS class (unless it's specified as being !important), so even when your code correctly adds the checked class to the element, the background colour isn't going to change.
The simplest solution is to simply change your CSS declaration:
.checked {
background-color: #ff0000 !important;
}
Here is an updated version of your jsFiddle with the working functionality (using the suggestion above).
However, I'd suggest you instead move the inline styles and JavaScript event handlers to their own CSS declarations, so you don't have to specify !important. That would require the following changes:
#holder > div {
clear: both;
padding: 0.5%;
margin-bottom: 1px;
border-bottom: 1px solid #eee;
float: left;
width: 96%;
style: height: 16px;
cursor: pointer;
background-color: white; // added this to the existing CSS
}
#holder > div:hover { // this is new
background-color: #fafafa;
}
Then move the CSS declaration for .checked below those, so that it takes precedence for the background-color property.
Here is another updated version of your jsFiddle, using the CSS declarations instead.
I'm looking for a way to change the CSS rules of my stylesheet imported in the document. So I have an external stylesheet and some class and div attributes inside. I want to change one of the rules with JavaScript or jQuery.
Here is an example :
.red{
color:red;
}
So the idea is to do something in JavaScript and the HTML knows that now the color is another color like this:
.red{
color:purple;
}
But I want to have this rule for every element that I add in the future by the way of append. So if I add a span with the CSS class .red, the text has to be purple and not red.
I hope I made it clear.
You can inject style declarations into the DOM.
$("head").append('<style>.red { color: purple }</style>');
You jQuery .css() method to do that.
$('.red').css('color', 'purple');
For multiple rules:
$('.red').css({
'color': 'purple',
'font-size': '20px'
});
When you add dynamic element in future to DOM by the way of append, just give those element some class or id and write CSS rules like above after appending them and they will applied for all dynamically created element.
Working sample
Note
Add dynamic rules is not a good solution in my point of view. Instead of the you can load some external CSS file.
But if you need something like dynamic rules add method then:
$('head').append(
$('<style/>', {
id: 'mystyle',
html: '.red {color: purple }'
})
);
And for future use:
$('#mystyle').append(' .someother { color: green; font-size: 13px } ');
Working sample
If you want to add a rule, instead of editing each element's style directly, you can use CSSStyleSheet.insertRule(). It takes two parameters: the rule as a string, and where to insert the rule.
Example from the above link:
// push a new rule onto the top of my stylesheet
myStyle.insertRule("#blanc { color: white }", 0);
In this case, myStyle is the .sheet member of a style element.
As far as I can tell, the style element must be inserted into the document before you can grab its sheet, and it can't be an external sheet. You can also grab a sheet from document.styleSheets, e.g.
var myStyle = document.styleSheets[1]; // Must not be a linked sheet.
myStyle.insertRule("#blanc { color: white }", 0);
Note: The page recommends modifying elements by changing their classes, instead of modifying the rules.
I have some JavaScript which is changing an image correctly but once it has been called, my a:hover CSS code no longer works.
Looking with firebug the following JavaScript creates this css rule:
element.style {
background-image:url(/content/images/side_partnershipsOver.png);
}
document.getElementById('partnerships').style.backgroundImage = "url(/content/images/side_partnershipsOver.png)";
How can I apply the JavaScript and not have the a:hover code overriden by the element.style rule?
As far as I know setting the element.style.backgroundImage is essentially the same as using an inline style.
<style type="text/css">
a { background: blue; }
a:hover { background:green; }
</style>
<a href="#" style="background:red;">link<a>
Unfortunately the inline style always wins. In the above sample the link will always be red. As Daniel White said jQuery would be very useful here. Although you may be able to get around this issue in two ways.
One, Generate the style using javascript to write a style tag
document.write("<style type='text/css'>#partnerships { background-image:url(/content/images/side_partnershipsOver.png);}</style>");
or two, Manually setup mouseenter/mouseleave events to handle your hover style
Update
or three, as pointed out by KevinUK, use the !important css tag to override the inline style set.
<style type="text/css">
a { background: blue; }
a:hover { background:green !important; }
</style>
<a href="#" style="background:red;">link<a>
I was also frustrated about this CSS js style gap so I build
methods to apply style from js with a CSS string
elm.jCSS(cssText);elm.jCSSPseudo(cssText,pseudoElt)