I have the following CSS:
td: hover {
background-color:red;
}
td {
cursor: pointer;
background-color: rgb(150,150,150);
}
and my HTML is just:
<table>
<tr><td> </td></tr>
</table>
I can't get the hover to work. Why is that?
:hover is a pseudo-selector, and everything beginning with : is such (e.g. :active, :before etc.).
This can be confused with specifying values:
something: value;
So you need to think about pseudo-selectors as separate objects, not a value.
That's why you need to fix your td: hover so it looks like td:hover.
Note that if you put a space after td like so:
td :hover { ...
This is equal to:
td: *:hover { ...
and therefore will select all items descending from td and apply a style on hover to them (see this example).
Remember, spaces have a meaning in CSS.
You need to remove the space before :hover:
td:hover {
background-color: red;
}
You just need to remove the space between td :hover as the <td> has no descendants ..
td:hover will work
http://jsfiddle.net/xwYTa/
Related
I want to remove the borders of the last row so it just seems like a gap. Any suggestions? Thank you!
Remove the border of the last row's cells
tr:last-of-type td {
border: none;
}
If you want it to look like a gap, use pseudo-selectors
table tr:last-child td{
border: none;
}
You can use the nth element of a particular type using the nth-of-type pseudo-selector.
<style>
tr:nth-of-type(n){
border: 0px;
}
</style>
Although it is not advisable to use a style tag in your HTML. You can always use a separate CSS file.
Alternatively, for the first and the last element, first-of-type and last-of-type can also be used.
I might be missing something really obvious, however consider the following code (tested in Edge and Chrome):
<head>
<style>
.table td { display:table-cell; }
.hide { display: none; }
</style>
</head>
<body>
<table class="table">
<tr>
<td class="hide">This is supposed to be hidden</td>
</tr>
</table>
</body>
Here is a JSFiddle demo as well.
Why is the <td> child ignoring the display:none?
Now, I know that, for example, removing the .table class or in-lining <td style="display:none"> will get me the desired outcome (hiding the cell).
I'm interested in understanding the logic of this behivour.
Why is the child ignoring the display:none?
Because .table td is more specific as .hide. You ran into a concept called css specifitiy.
Take a look here: https://specificity.keegan.st
The actual reason is,
You can't add both the display:table-cell; and display: none; to the same DOM property.
In this case, you're giving two different values for the same property where CSS gives the importance to the display:table-cell;
Check out the another answer given here which speaks about 'CSS Specificity'.
Two ways to overcome this issue.
One is adding the !important tag for the style which you want to apply that is a bad practice.
Another solution is adding visibility: hidden which will hide the element from the view.
It's because .table td { display:table-cell; } is the closest css selector to the td than .hide { display: none; } so you can solve this by adding td.hide { display:none; }
I am trying to change the background color of Product_image when i hover the whole Table name.
The result i am trying to achieve is when the table changes color on hover, the product image td to change also but with an other color.
I saw similar posts: Make a div css change when hover an other div
But didn't worked on me.
HTML:
<div class="row">
<table class="Tablename">
<tbody><tr>
<td class="Product_image"><div class="Product_image"><a title=""><img src=""></a></div></td>
<td class="Product_name"><div class="Product_name"><a href=""</a></div></td></tr>
</tbody></table>
<div class="clear"></div>
</div>
CSS:
.Tablename:hover{ background-color:#fff}
.Tablename:hover + .Product_image {
background-color:#21825B !important;
}
I am trying to achieve this only with css.
Thanks in advance.
Skip the + sign. Its the adjacent sibling selector. The div you want to change is a child of the table, not a sibling.
I did a similar thing with my ul li structure. Here is the example
#main_nav.sf-menu li ul li:hover a{ color:#fff;}
so in your case it should
.Tablename:hover{ background-color:#fff}
.Tablename:hover Product_image {
background-color:#21825B !important;
}
Remove the + sign:
.Tablename:hover {
background-color: #fff
}
.Tablename:hover .Product_image {
background-color: #21825B !important;
}
See this fiddle.
Explanation: The + sign selects only adjacent siblings. See this small fiddle to get an understanding of this selector.
Well you are very close to the right solution. Try this:
remove the "+" symbol and make the row like that:
.Tablename:hover td.Product_image {
background-color:#21825B !important;
}
So you say: on table hover change the background color of the td with class "Product_image"
you even do not need the !important
<table>
<tr class="here"><td><input type="text" readonly=readonly></td></tr>
<tr class="here"><td><input type="text" readonly=readonly></td></tr>
<tr class="here"><td><input type="text" ></td></tr>
</table>
td {
padding: 15px;
margin: 10px;
}
.here {
background-color: red;
}
http://jsfiddle.net/dZYEM/
How can i modify class .here that this working where child input has attribute readonly? I dont want modify html.
EDIT:
now i have: jsfiddle.net/dZYEM/2/
i would like receive: http://jsfiddle.net/dZYEM/3/
but without use style. I want receive this only with css.
There is no pure CSS way to do this as CSS does not have a has or contains selector.
But this can be done using one line of jQuery. And it's really fast.
$("tr.here:has(input[readonly='readonly'])").css('background', 'red');
Here is a working jsFiddle to try it - http://jsfiddle.net/T7hnR/2/
Hey you have two option
first is if your tr is last than apply this css
tr:last-child{
background:none;
}
Second is if your tr number is 3 than used to it.
tr:nth-of-type(3){
background:none;
}
Like here : http://jsfiddle.net/dZYEM/10/
CSS:
tr:nth-child(3n) {
background: none !important;
}
One could edit the inner element by makiung use of CSS2 selectors
E[foo="warning"] Matches any E element whose "foo" attribute value is exactly equal to "warning".
But this will not allow you to select the outer parent element.
Under either CSS2 or CSS3 this does not exist, and you would have to do it with the solutions provided with JavaScript/jQuery.
The implementation is here: http://jsfiddle.net/chp8y/1/
If you hover over the first box, #1, you will see the 'Add Client' change color but the #1 won't. How do I achieve that without using JS ?
If you do a .sit-in-the-corner:hover it will only work when you hover over the 1. But that's not what I want.
Thoughts?
Isn't it a case of changing the last rule to:
table td:hover, table td:hover span {
color: #aa5650;
}
THe style for the class has higher precedence than the style for the tag, so it will override it.
You can add a style that removes the specific setting for the span when the cell is hovered:
table td:hover .sit-in-the-corner {
color: inherit;
}
http://jsfiddle.net/chp8y/5/
Wrap the #s with anchor tags. Drop the color attribute from the .sit-in-the-corner and add that attribute to the anchors. Like this:
HTML:
<span class="sit-in-the-corner"><a class="tile-number">1</a></span>
CSS:
.sit-in-the-corner {
float: left;
margin-left: 5px;
margin-top: -85px;
}
.tile-number {
color: #556655;
}