I have several grids (kendo grids). This have their common style with their hover effect. I want to prevent this hover effect for only one grid, named mygrid.
Tryed this with no success:
.k-grid tr:hover :not(#mygrid)
{
color:White;
background-color:#90B5DA;
}
The correct usage of not is attached to another selector. For example:
.k-grid:not(#mygrid)
Will select all elements with the class k-grid except if the element has an id of mygrid
So what you want is this:
.k-grid:not(#mygrid) tr:hover
Source: http://www.w3.org/TR/selectors/#negation
The already suggested use of :not() is correct. For wider support, you may consider doing something like this, where the :hover state of #mygrid is the same as the "off" state:
.k-grid tr,
#mygrid tr:hover /* Add this rule to the "off" state */
{
color:Grey;
background-color:#333;
}
.k-grid tr:hover
{
color:White;
background-color:#90B5DA;
}
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 table inside of a table, a really simple one.
What I wanted to do is to avoid having border-bottom of td tag in the last row (tr) of the table. What I did is this:
tbody tr:last-of-type td { border-bottom: none; }
I was thinking that this is it, but then I checked the last row of not nested table and the whole nested table was not having a bottom border. Is there a way to avoid this using simple CSS without classes etc.?
To achieve no border bottom of the nested table, you can do so like so:
tbody table td {
border-bottom: none;
}
Note - the above rule makes assumptions about your CSS, which you haven't shared with us. Due to you not including the CSS that applies the border in the first place, it is possible the above won't work due to CSS specificity.
For example, if your rule that adds border to the table is:
tbody tr td {
border-bottom: [whatever style];
}
Then, the selector you need to use to remove the nested table border is:
tbody tr table td {
border-bottom: none;
}
Add your CSS, and we can more accurately answer your question. Or, better yet - read the CSS specificity article, and you'll know how to alter the selector yourself!
I'd say the simplest way is to use class and id. Like so:
table.outer { some: style; } /* class */
table#inner { some: style; } /* id */
But as you said, AVOID classes, then perhaps call the table nested within the table like so:
table { some: style; }
table table { some: style; } /* override outer table */
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'>
I've been using the following jquery code to style table rows.
$('tr').hover(function() {
$('tr td').css('color', '#ffffff');
$('tr td a').css('background', '#0080ff');
});
$('tr').mouseleave(function() {
$('tr td').css('color', '#222222');
$('tr td a').css('background', '#ffffff');
});
This works just fine but I'm wondering there's a CSS alternative. It would seem like a much more efficient approach than what I have right now but I really don't know a whole lot about CSS.
The problem with using the following CSS
tr:hover {
color:#ffffff;
}
is that the anchor tags still remain the same color when the table row is hovered on. Are there any ways via CSS that hovering on a table row could trigger the anchor tags nested inside of the given table row to change colors?
It sort of depends on your other CSS selectors, but this will probably work:
tr:hover td {
color: white;
}
tr:hover td a {
background: #0080ff;
}
td:hover a {
your link style on row hover
}
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?