I have some CSS that colors a row on my table on hover.
tr:hover {
background: gray !important;
}
However, it also highlights the filter row on the table. So I did Inspect and find it has <tr class="MuiTableRow-root MuiTableRow-hover"...etc
So, my question is, how can I modify the above code so that it applies only to that class shown above?
Edit: First attempt at apply class.
.MuiTableRow-root MuiTableRow-hover {
tr:hover {
background: gray !important;
}
}
As pointed out in the comments, please take a look at the documentation for class selectors.
You are having trouble to combine the class with the element's tag.
In this case they are written together like this:
tr.MuiTableRow-hover:hover {
background: gray !important;
}
When the HTML tag has the class: Write the tag and . and then the class
When the HTML tag has some element inside with a certain class, separate them with a space
Do yourself a favor and search for CSS tutorials to teach you the basics. It's not very hard to learn if you can spare the time
A little bit advanced is trusting CSS Specificity and leaving out !important. If your selector is more specific (or your CSS was loaded later) your style will be applied even without use of !important.
tr.MuiTableRow-hover:hover {
background: gray;
}
The css rule should look like this:
tr.MuiTableRow-hover:hover {
background: gray !important;
}
Note that using !important is not best practice so better if you try to avoid it if possible
Related
i got a little css problem, when i try to change something for just specific page or post. Like in this case i would like to change the background color of the entry content of page number 2458. And its working
#post-2458 .entry-content {
background-color: #fff;
}
But right here i use same logic and i try to change the col 8 background color for page 2458, but it does not workss. Sure if i do it without #post-2458 it changes, but it changes for all pages and i would like to do that only for page of that id.
#post-2458 .col-md-8 {
background-color: #fff;
}
Am i missing something out? could you advice how to adjust that code pls? BTW im using custom css plugin to put in that codes.
Thank you
Try overriding it with this:
#post-2458 .col-md-8 {
background-color: #fff!important;
}
Try add some id to div which you want to change and operate directly on id. Don't use col-md-8 to avoid troubles. When you want to make changes only for one element id is the best option and I has a bigger importance than class and don't use !important if you can fix something smarter.
If I were you I would do few things:
Add !important to see if it's all about the style weights.
#post-2458 .col-md-8 {
background-color: #fff !important;
}
Go to inspect tab of your browser and check which styles overrides yours or which styles you just overridden. In most cases you can override other styles just by correct reference.
For example this might NOT work:
#post-2458 .col-md-8 {
background-color: #fff;
}
But this could work, since maybe you are trying to override background-color given by the reference .col-md-8.sidebar-right
#post-2458 .col-md-8.sidebar-right {
background-color: #fff;
}
There are lots of maybe's, since it is hard to give you proper solution without a link to the website in which your problem occurs. Check the weights and make sure to override correct styles. I hope it helps!
I'm having problems with my CSS markup in my code.
I'm building a control and my plan is to add a standard class to it so it has a fixed layout and add any userdefined css classes behind it, to personalise the control. but during my tests I noticed a problem which I can't resolve.
when I have an element like this
<div class="test1 test2"></div>
and underlaying code in another stylesheet file.
.test1
{
width: 200px;
height: 200px;
background-color: red;
}
.test2
{
background-color: yellow;
}
then it doesn't matter if I put test1 first or test2. the div will always be yellow only because test1 is written last on the css file.
if I replace test2 with test1 in the css file itself then the div will always be red.
how can I make the background-color overwrite incase its added a second time depending on the order its written in the className itself?
I also want to take notice I don't want to force users to use the !important tag. I already know about this and yes that works fine but I need it without. Any ideas on how to resolve this issues is welcome. I'm open for alternatives
You could make it so .test2 when combined with .test1 becomes yellow
.test1.test2{
background-color: yellow;
}
a better way tough is not to work like this at all. have a read of this article instead. It explains a technique for CSS called BEM (Block, Element, Modifier) which is pretty awesome. When trying to modify a existing style it will look like:
.test{
width: 200px;
height: 200px;
background-color: red;
}
.test--warning{
background-color: yellow;
}
and your div will look like <div class="test test--warning">
You can twiddle the precedence of the class's selectors like this:
.test2[class*=test2]
{
...
}
This should make class test2 override other classes that have only class name selectors.
(sorry, this part is not correct)
If you want to lower test1's precedence, you could do it like this:
[class*=test1]
{
...
}
(I haven't tested this, you might need to name it *[class*=test1] instead)
I been researching for a long time and posted here because I couldn't find a good answer. thx to the answers and responses here I was able to find an article over the problem I'm facing here CSS howto
What I'm trying to do is not possible because of the order css in generated. What I wanted is my css to work between browser default and external or internal stylesheets. I will look for an alternative solution to my project.
This is the important part of my LESS file:
input.ng-invalid {
color: #e74c3c;
border-color: #e74c3c;
}
It compiles into this:
input.ng-invalid .form-control {
color: #e74c3c;
border-color: #e74c3c;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
http://plnkr.co/edit/118uS4RciQYVPa5KH6oU
The form-control class is from Bootstrap and wouldn't break the selector if LESS didn't insert a space (input.ng-invalid.form-control works just fine)
The problem is that the browser is looking for the children of input with the class form-control. Apparently, there are no childrens of input in my HTML.
Is there a setting in bootstrap's LESS files that binds the form-control class to every input?
I've taken a look at the zip package you provided and there your input.ng-invalid is defined as (selfmade.less:L97):
input.ng-invalid {
.form-control-validation(#brand-danger; #brand-danger);
}
which is expected to compile to what you actually get (i.e. appending nested classes defined within .form-control-validation). This is just what this mixin is supposed to do.
-
Is there a setting in bootstrap's LESS files that binds the form-control class to every input?
I can't see any (at least in Bootstrap 3.1.1), so I can only suggest the following trick:
.danger_ {
.form-control-validation
(#brand-danger, #brand-danger);
}
input.ng-invalid.form-control
:extend(.danger_ .form-control all) {}
which will compile to this css (assuming bs-3.1.1).
-
Alternatively there's .has-error class which you can extend the same way:
input.ng-invalid.form-control
:extend(.has-error .form-control all) {}
and get a bit more compact output but with slightly different colours (#state-danger-text instead of #brand-danger).
This is not really an answer, but an investigation of your problem which doesn't fit in the comments box. I did't go through your set of less files since I don't have a 7z uncompressor here, but maybe I can give you some ideas to help you fix the problem or hack it.
One way of obtaining a contextual relationship like this:
input.ng-invalid .form-control { ... }
Is having a block like this somewhere in your Less files:
input.ng-invalid {
...
.form-control { ... }
...
}
Now that association might happen through a mixin so you probably won't find that exact pattern above, but you might find want to discover where .form-control is declared (a mixin, perhaps).
Now if you want this:
input.ng-invalid.form-control { ...}
and you a block like the one I showed above, you can add a & before the .form-control selector so that instead of obtaining a contextual relationship from the nesting blocks, you add a class. The & represents the selectors from the parent block. It would be something like:
input.ng-invalid {
...
&.form-control { ... }
...
}
See if you discover where .form-control is defined and try it out.
(Be aware that if other parts of your code use this mixin or selector, they may not work as before - this was just an analysis of a possible solution using Less and not the Bootstrap framework; add a bootstrap tag to your question and you might attract some Bootstrap specialists who might have a better solution.)
in my html I have
<div id="mainNewsBody" class="news">
<a class="readMore" href="/News/Details/1">read more ...</a>
</div>
I tried to style read more ... snipper with this css
#mainNewsBody .news .readMore a{
color: #7F0609;
}
to actually apply this style I have to use !important keyword in color property.
I know that this !important keyword force to use that property but I do not understand why that is the case here, because I explicitly told to match on particular id with particular class element and inside that element to mach link.
Can someone englight me.
Thanks
Try this one:
.news .readMore {
color: #7F0609;
}
There's no need to call for id and class name for the same element.
It's a.readMore instead of .readMore a (the first case would search for an element with class .readMore and append the CSS to any children a-elements)
and #mainNewsBody .news should be #mainNewsBody.news (you should 'concatenate' the id and class since they refer to the same element)
making a total of #mainNewsBody.news a.readMore
Fiddle
EDIT
I see many notes on simplifying your css to just classes. This really depends on what you're trying to accomplish. If you're working with a huge CSS file, I'd recommend specifying as strict as possible. This to prevent any CSS being applied on places where you don't want it to.
a { } for example will mess with all your links, a.news { } will only mess with a class='news'
It'd the specificity which is troubling you, the more elements class id you have in your selector, more specific your selector is.
So for example
.class a {
}
is more specific than just
a {
}
Just see to it that you do not have a more specific selector, if you've than you need to make the current one more specific or use !important declaration as you stated.
In the above snippet this is incorrect
#mainNewsBody .news .readMore a
It will search for an element having class news inside an element having an id mainNewsBody which is not true in your case so either use this
#mainNewsBody a.readMore {
/* This will be more specific than the below one
as you are using id here and not class */
color: #7F0609;
}
Or use
.news a.readMore {
color: #7F0609;
}
Ozan is right, remove the "mainNewsBody" ID from the CSS if it's not absolutely necessary.
.news .readMore a{
color: #7F0609;}
If you want to be really specific and need to include the ID in the CSS selector remove the space from in-front of ".news"
#mainNewsBody.news .readMore a{
color: #7F0609;}
CSS Tricks - Multiple Class ID Selectors
CSS rules marked !important take precedence over later rules. !important ensures that this rule has precedence.
Probably your code is generating inline css for the a element, or you have another less specific definition for a element with !important keyword somewhere else.
Inline styles have priority higher than styles defined outside the element. To overcome the inline style or a style with !important keyword by a less specific definition, you need to define it by the keyword !important and a more specific definition.
I have been forced to use !important in css. There is probably another way to get this done, but I am doing it because I only want a specific subset of an already styled class to have a different style. The situation is with jQuery's datepicker. In datepicker, I am setting certain days to have different priority colors. This end result is that the td element holding the <a> which holds the date gets the class name
.date-priority > a
{
background: url("") red;
border: 1px solid yellow;
}
However, this change gets overridden because there is a more specific rule for that anchor tag, it specifically has a class on it. I do not want to change all elements with that class, only to override a few of them. So, I decided to use !important in the previous definition
.date-priority > a
{
background: url("") red !important;
border: 1px solid yellow !important;
}
It works. But it just does not seem to be best practice. Is using !important a hack in general, and more specifically in this instance?
HTML:
<td onclick="
DP_jQuery_1348602012259.datepicker._selectDay('#date',8,2012, this);
return false;"
title="Available" class=" ui-datepicker-week-end date-priority">
29
</td>
If this is the case, just add a separate rule for those elements:
.date-priority > a,.date-priority > a.className {
background: url("") red;
border: 1px solid yellow;
}
Demo: http://jsfiddle.net/Blender/rCyjV/
The only reason !important is frowned upon is because it makes future additions to the CSS possibly frustrating.
Short anwser: no.
Long answer: !important is thought specifically for situations where you don't want a rule to be overridden by successive declarations. In addition, the "weight" assigned to the selectors (most specific = most important) is not always the behavior that a developer wants.
From W3C specs:
Both author and user style sheets may contain "!important"
declarations, and user "!important" rules override author "!important"
rules. This CSS feature improves accessibility of documents by giving
users with special requirements (large fonts, color combinations,
etc.) control over presentation.
So definitely it's not a hack :-)