I have a table and I need to change the background color of the row after I click on it (as if it was selected). The problem is that I can't change the html, and currently I can change the background color of any .td using .td:focus, but not .tr.
So as a workaround - can I make it so that when selecting one .td:focus I also apply the same style to all .td elements at the same level (child elements of the same parent .tr element)? How can I achieve this?
Related
I want to have a DIV whose background color is light grey, but I want the background color for HRs to be black. I'd like to have one class for the DIV that can control both of these so I don't have to apply a separate class for each HR?
What you describe is not possible. However, you might be looking for this:
div hr {
background-color: black;
}
div hr will match all hr which are descendants of div. This means you do not have to apply a class for each hr element, which is what you requested in the question.
For direct descendants only (children), use div > hr.
A class can't control both of them, but it's possible to not have to apply a separate class for each HR.
I have the following problem:
I get a generated HTML with dynamic content. The IDs and the html tag-hierarchy is always the same. I can set a stylesheet.
I tried to set the color of the text to red. If I set it on this position where it's done in the screenshot it does not work. If I set it inline in the table below (table cols=2 border=0...) it works.
Is there a depth limit for CSS ? How can I set the color for the whole text containing the div (id=15B_gr or id=oReportCell) ?
++UPDATE++
I tried to set a stylesheet, but it does not work:
You should be able to target all the children of a div by using an asterisk. In this case:
#15B_gr * {
color:red;
}
or you could set it on just the elements:
#15B_gr span {
color:red;
}
** Edit for further information **
As pointed out by #nico o, some complications can arise due to having a number as the first character in the ID. Previous versions of the HTML spec did not allow IDs to begin with a number.
http://w3c.github.io/html-reference/datatypes.html#common.data.id
Maybe you have a rule (in another stylesheet?) which has a selector which has the elements class that you want to style but additionally the class name of an element of a parent or grandparent element. In this case that specific style would outweight your style.
In this case you could add an "!important" to your rule (color: red !important; ) ...
or you could add the selectors of the other stylesheets style to yours too so that that style doesn't outweight your's anymore.
You should "inspect" the element! (Rightclick on it, "inspect element") to find the active and overwritten rules for that specific element! You find those info in the lower right corner of the "inspector"-Window wich then opens. Along with the currently active styles you there find the stylesheet in which the styles are defined.
I am moving clarification to the top of this post: When the mouse is not hovering over a certain div, I want elements other than this div to have a red background-color. Can this be achieved with a not() selector as seen in this post? The predicament appears to be that since the certain div is within a body element, the mouse will always be hovering over the body element even when it's over the certain div, thus the body will always have a red background-color.
I am trying to use the not() selector to affect elements when hovering over elements that are not within my selection.
For example:
[data-panel] { background-color:white; }
:not([data-panel=visible]):hover { background-color:red; }
<body>
<div data-panel='visible'>
<div data-panel='visible'>Content</div>
</div>
</body>
My desired outcome is that if the mouse is hovering anywhere besides those divs, the background-color will change to red (i.e. hovering in the body).
However, since those divs are within the body, that selector will always be active. The body will always be red. Is there anyway to style those divs so that this doesn't happen? Maybe something with z-index? Any clues?
What you are trying to do is not possible with CSS alone.
To achieve that effect – let the body turn red on :hover, but not when hovering the panels – you have to cancel the pointer event bubbling on the panels. This is only possible using JS.
BTW, HTML5 has a method to define own attributes: the data-* attributes; e.g. data-panel="visible".
Don't quote your attribute selector.
As already mentioned by James; panel is not a valid HTML5 attribute. You should be taking advantage of HTML5's data-* attributes.
:not([data-panel=visible]):hover {
background-color:red;
}
<div data-panel='visible'>
<div data-panel='visible'>Content</div>
</div>
This of course, affects all elements that don't have the matching attribute, including <body>, which is while your entire page's background will turn red when hovered.
Edit
The predicament appears to be that since the certain div is within a body element, the mouse will always be hovering over the body element even when it's over the certain div, thus the body will always have a red background-color
There is no CSS parent selector, so an event on an element within the body, can't have any say over any styles applied to the body.
I have a table, with a pretty nice style. Td and th elements, on hover, change their background color. However, if there is a disabled element in that row, it still displays lighter colors than things with disabled elements in them should look. Does anyone know a way to change the hover background if there is a disabled element inside? I can use jQuery.
I'd probably approach the problem by adding a class to the hovered item to modify its behavior when you disable child elements, as css won't let you set styles on a parent object based on properties of their children. Check out this post:
Complex CSS selector for parent of active child
look at this jsFIDDLE sample
i want to change the cell background color for hover state with CSS.. it can be attained through JavaScript but i want to do it with CSS... plus i want the whole cell to act as a link how to do it
There are several things you need to take into consideration:
Don't mix CSS and presentational HTML otherwise it will get very confusing. Colors (for text, background, borders), sizes, alignment, anything that has to do with the look of the site belong into the CSS.
Try to avoid tables for layout purposes. They may seem easier as a beginner, but it's an outdated technique.
In the CSS you need to move the :hover rule before :visited rule. Since both rules have the same specificity the first rule (currently :visited) with take preference and visited links will never have the hover rule applied to.
You don't need to repeat styles in CSS for every rule. Due to inheritance and cascading many styles are automatically applied to child elements.
You need to set the background colors on the links instead of the table cells, then you can change the background color on hover just as you already are with the text color.
Giving the links display: block will have the links stretch over the whole width of it's containing block, since that is the default behaviour of block elements.
Here is an example how the same layout with "clean" CSS and HTML should look like:
http://www.jsfiddle.net/QShRF/5/
Give the menu's table tag an id and then:
#menu-table td:hover { background: whatever; }
Really, though, you shouldn't be using tables for anything other than data tables, they are hard to maintain and break semantics.
.menu_links:link { display: block }
Makes the entire cell act as a link (you'll need to add a little margin/padding though). Then you can just add .menu_links:hover { background: #123123 } to colorize the background.
Also, I can advise you to set all the table's styles in a stylesheet. <table bordercolor="red" bgcolor="#ffffff"> is very outdated and makes maintenance on the site a hell.