I have a table row which has a class applied to it. Depending on a value set in that row I may change the background color using a style directly within the row.
$bground = ($a === 'a') ? '#A0A0A0' : '#ffffff';
<tr class='$class' align='center' style='background-color:$bground '>
Adding the style stops other css that is applied to the page from working. eg: the following stop working.
.res table tr:hover {
background-color: #808080;
}
.res table tr.selected {
background-color: #808080;
}
if I remove style='background-color:$bground '> from the row then the hover and select as expected.
Any way to do this ?
Thanks
firstly background-color can be shortened to background like so: .className {background: #fff}
next, you can combine dupe stylings like so:
.classOne, .classTwo, #idOne {background: #fff;}
next, don't assign any inline js or css. It's bad practice that leads to harder to maintain code. Just add a new id/class onto it instead.
lastly, the reason that assigning inline css stops the stylesheet is because inline css has a higher specificity value. In your stylesheet you can use elements to add to the weight:
div.classOne.someOtherClassItHas {background: #fff;}
and if that doesn't bump it up enough you can always add the !important rule which helps stop overrides:
.class {background: #fff !important;}
though use this sparingly and as a last resort (I recommend moving any !important rule to the bottom of the stylesheet) as it can mess with the behaviour of the stylesheet.
No. Inline styles always override CSS. Since you have set the background color via an inline style, you cannot change it with CSS.
A solution to this problem is instead of changing the background color with an inline style, you just add another class to the tr which has a different rule for the background color.
.res table tr.color1 {
background-color: #A0A0A0;
}
.res table tr.color2 {
background-color: #ffffff;
}
Then in your code, add the class to the tr:
$bgroundClass = ($a === 'a') ? 'color1' : 'color2';
<tr class='$class $bgroundClass' align='center'>
Related
In very simple html/css, I have my menu in a <table id="menu">. The menu has no border, however I would like all the other tables in my blog to have borders.
I made it work this way:
#menu, #menu th, #menu td {border: none; color: red}
table, th, td {border: 1px solid black;}
However this is not very robust. If I add something else to tables I might forget to 'reset' it in #menu. Is there a way to force all properties in #menu so that I don't have to override one by one anything I would add to table, th, td {...}?
I tried the :not() selector but it doesn't feel robust either, I would rather specify what I want for menu on the #menu {...} line, not elsewhere. Let me know if that makes sense or I can reformulate
I think that I understand now. I was searching for a way to unset all values for a css class and came across this page: Reset/remove CSS styles for element only
It tells us that we can do something like this to achieve what you want:
#menu, #menu th, #menu td {
all: unset;
color: red;
}
table, th, td {
border: 1px solid black;
}
Notice how I added the all: unset; and removed the border: none;
This should reset all the styles for elements with that id, but make sure to put your other styles AFTER the all: unset, or else it will unset the styles you just wrote. Hope this helps!
Maybe using classes instead of id's.
If you use a class you can apply a css rule to all elements that have It
So for example to your table you can use
.custum-table
The prevoius class Will apply css styles to all elements
And finally if you wanna apply another css rule you can add another class to your element in this way
Another html file
.custom-table__no--effect
Previous class with BEM Will apply css styles to only one element for example table element
I have a page that has several elements that use the the same css class. I would like to have a different background color for each element without making my css file way large. Is there a way to do something in my html like class="xyz (something)" and in the css file have background-color: (something);?
Any thoughts would be appreciated.
you don't have to replicate all properties for all classes
.classnameforall{
/*your css goes here. does not matter if it has background-color, it will be the default one if you do not use other classes*/
}
.redbg{background-color:red;}
.greenbg{background-color:green;}
.some-otherbg{background-color:#df4533;}
and use it like you asked
class="classnameforall redbg"
or
class="classnameforall greenbg"
What you can do is don't specify background-color in css file. But for each element use inline style with only property being background-color and specify required class which has all other styling property.
Thus all elements will have different background color, but other styles will remain same for them.
.classname{
all other styles except background-color;
}
<element class="classname" style="background-color:red" >
JS FIDDLE DEMO: http://jsfiddle.net/sXF5T/
Try with the pseudo selector nth-child(an + b)
p:nth-child(2n + 1) {
background: red;
}
p:nth-child(2n + 2) {
background: blue;
}
Example: http://jsfiddle.net/gomflo/gtpsX/
The page I am working on has many different CSS files attached to it, a boostrap.css, the master.css and a custom.css file.
I'm trying to remove a property, as I don't want there to be a a:hover property on the link in a menu. The master CSS file has
#topSurround a:hover {
color: #ffffff;
}
The bootstrap CSS file has
.nav > li > a:hover {
text-decoration: none;
background-color: #eee;
}
I don't want to edit these files, as they are core files with the template I am using and could be updated, so I am using a custom CSS file. Normally, I would set the property to default to override any previous uses of the property.
#topSurround a:hover {
color: none; (doesn't work, as this isn't the correct default)
}
So, two questions: What is the default value for the color property (there doesn't seem to be one)? Is there an easier way to go about this without having to overwrite the core files?
You can use color: inherit to have the color use the value from its ancestors. color is odd in that it has different default values depending on context. A link, for example, will typically default to blue, while text will default to black.
If you need to override the existing style, don't use a more specific selector. Raising the specificity means that you'll just have to use more selectors the next time you want to override it.
Instead, take advantage of the cascade by using a selector with identical specificity and make the override happen after the original style:
/* older style in some library */
.foo .bar .baz {
color: blue;
}
...in an overriding CSS file...
.foo .bar .baz {
color: green;
}
To cancel out the property you can use unset keyword.
So, in you custom css file you can do something like following:-
#topSurround a:hover {
color: unset;
}
According to the MDN Web Docs:-
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.
The best way is to make a more specific CSS rule, such as:
body #topSurround a:hover {
color: transparent;
}
Specificity is an important CSS concept, as described in this article:
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
I'd recommend trying:
#topSurround a:hover {
color: inherit;
}
As for how to overwrite what Bootstrap is adding, I think how you were doing it is best.
Every CSS style has a natural default value. It's just not always none.
Some may be 0 (as in zero).
Some may be auto.
Sometimes inherit is the best option.
Colours can be set to transparent.
If you're unsure what the default is, try creating a dummy page with just a plain unstyled element, and use the browser dev tools to see what the styles are set to.
I have an HTML page from page builder, and it injects style attribute directly to the element. I found it's considered as element.style.
I want to override it using CSS. I can match the element, but it doesn't override it.
How can I override the style using CSS?
Although it's often frowned upon, you can technically use:
display: inline !important;
It generally isn't good practice but in some cases might be necessary. What you should do is edit your code so that you aren't applying a style to the <li> elements in the first place.
This CSS will overwrite even the JavaScript:
#demofour li[style] {
display: inline !important;
}
or for only first one
#demofour li[style]:first-child {
display: inline !important;
}
element.style comes from the markup.
<li style="display: none;">
Just remove the style attribute from the HTML.
Of course the !important trick is decisive here, but targeting more specifically may help not only to have your override actually applied (weight criteria can rule over !important) but also to avoid overriding unintended elements.
With the developer tools of your browser, identify the exact value of the offending style attribute; e.g.:
"font-family: arial, helvetica, sans-serif;"
or
"display: block;"
Then, decide which branch of selectors you will override; you can broaden or narrow your choice to fit your needs, e.g.:
p span
or
section.article-into.clearfix p span
Finally, in your custom.css, use the [attribute^=value] selector and the !important declaration:
p span[style^="font-family: arial"] {
font-family: "Times New Roman", Times, serif !important;
}
Note you don't have to quote the whole style attribute value, just enough to unambigously match the string.
Using !important will override element.style via CSS like
Change
color: #7D7D7D;
to
color: #7D7D7D !important;
That should do it.
you can override the style on your css by referencing the offending property of the element style. On my case these two codes are set as 15px and is causing my background image to go black. So, i override them with 0px and placed the !important so it will be priority
.content {
border-bottom-left-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
As per my knowledge Inline sytle comes first so css class should not work.
Use Jquery as
$(document).ready(function(){
$("#demoFour li").css("display","inline");
});
You can also try
#demoFour li { display:inline !important;}
Use JavaScript.
For example:
var elements = document.getElementById("demoFour").getElementsByTagName("li");
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = "inline";
}
Hopefully this isn't a stupid question but I can't seem to work out how to do this. Can you apply a wildcard to an anchor hover/focus so that the style is applied to all classes?
Something like
a:hover * { color: #ff0000; }
Say I have
a { color: #DD0000; }
a.link { color: #ffffff; }
a.link2 { color: #000000; }
a.user { ...
a.anything { ...
The easiest way to explain what I'm looking for is to have a global :hover style, but multiple :link styles.
Thanks
There are a number of ways you can do this. As mentioned by others, you can apply the same style to multiple classes like so:
div a.class1:hover, div a.class2:hover, div a.class3:hover { ... }
You can also create a custom class just for the style you want to apply:
div a.customClass:hover { ... }
You could use * like you mentioned in the question, but apply hover to it:
div *:hover { ... }
There's also this option, where you just apply the style for all a's, although you probably know about this option already:
a:hover { ... }
Edit: If your style is being "overwritten" by something else, a quick and easy way to check would be to use your browser's developer tools to inspect the element. You can even apply pseudo-classes (ie. apply :hover pseudo-class even when you're not hovering over the element) with the developer tools included with Chrome and Firefox (you may need to download Firebug to do this with Firefox).
Another option would be to use !important to increase the selector's specificity. For example:
a:hover { background: red !important; }
You can read more about how the specificity is calculated here.
If you want to apply a global css rule for a specific tag, write (for anchors):
a:link{/*your styles go here*/}
a:hover{/*your styles go here*/}
a:active{/*your styles go here*/}
a:visited{/*your styles go here*/}
If you would like a special link styled in a different way (maybe making it a button), just apply a class to it and style the class:
a.customlink{/*your styles go here*/}
EDIT: if you want only some properties of the link to change on hover, which are going to be the same for two different links (let's say one ha yellow, while the other red colored background, and you wanted them both to have a black background), add another same class to the two links, and stylize it.
JsFiddle Example
You could separate them by commas like a:hover link, a:hover link2, a:hover etc { color: #ff0000; }
Does a:hover { color: #ff0000; } not do what you want it to?