I'm sorry for the title, I could not think of a better one. I am trying to style a table depending on the result of a function call.
In my HTML file, I have the following:
<tr class="customers-new {{result}}"> //result can be 'checked' or ''
In my CSS then:
tr.customers-new {
td {
cursor: default;
}
.checked {
background: #light-color;
cursor: default;
}
}
The style is just not applied. I tried td.checked, too.
As you clarified you are trying to put CSS to td, you can put td inside .checked as below
tr.customers-new {
td {
cursor: default;
}
&.checked {
td {
background: "red";
cursor: default;
}
}
}
Compiled code
Related
In a nested group of SCSS, is it possible to move up a level and apply a modifier class to the parent to overwrite styling?
For example, I have the following SCSS where an image is added to the before/after classes. I need to change the images on a different .btn-- styling. So essentially compiled the CSS would look a bit like .btn--ghost .label:before, .btn--ghost .after {}.
There is more styling to this but I've just stripped it out for this example so it's not a wall of code.
.btn--arrow {
.label {
&:before,
&:after {
background: url(../img/icon-arrow--white.svg) no-repeat 0 0;
}
&.btn--ghost & {
&:before,
&:after {
background: url(../img/icon-arrow.svg) no-repeat 0 0;
}
}
}
}
I have successfully achieved this with the SCSS outside of the .label, so directly under .btn--arrow (below) but out of curiosity and better understanding I'd be interested to know if it's achievable in the first example I gave.
.btn--arrow {
.label {
&:before,
&:after {
background: url(../img/icon-arrow--white.svg) no-repeat 0 0;
}
}
&.btn--ghost {
.label {
&:before,
&:after {
background: url(../img/icon-arrow.svg) no-repeat 0 0;
}
}
}
}
I have tried moving the & around and using stuff like #at-root but without any success.
Thanks in advance!
You can qualify a selector by putting & to the right of the intended parent of the selector. Wrapping it in #{} allows you to place it directly beside that parent.
The #at-root rule causes everything proceeding to be emitted at the root instead of using regular nesting.
If you use both and the #{}, I think you can achieve what you are looking for.
.flashlight {
.light {
background: yellow;
#at-root .dead-battery#{&} {
background: transparent;
}
.daytime &{
background: transparent;
}
}
}
This would compile to:
.flashlight .light {
background: yellow;
}
.dead-battery.flashlight .light {
background: transparent;
}
.daytime .flashlight .light {
background: transparent;
}
I have the current alignment when i inspect the elements in my current page.
html body #root div div div div div div div div div.section-wrapper div.section-content table.selection tbody tr td span span.validate-check
when i click on the last one, the one i intend to apply scss to span.validate-check
This is the little message on the right side of inspect screen
*, *::before, *::after {
box-sizing: inherit;
}
I am still unable to access the element via the combination below:
.selection{
...
tbody{
tr{
td{
>span{
background-color: red; < === this works apply the color
.span.validate-check {
color: blue < this is what i want but not working
}
}
}
}
}
}
}
I would appreciate any suggestion.
the selector is wrong
.selection{
...
tbody{
tr{
td{
>span{
background-color: red; < === this works apply the color
.validate-check {
color: blue; < remove the .span just use the class name
}
}
}
}
}
}
}
also check the semicolon
Remove the . before span in .span.validate-check
.selection{
...
tbody{
tr{
td{
>span{
background-color: red;
span.validate-check {
color: blue
}
}
}
}
}
}
}
I have the following code that sets a class of dragging-something to the html element on a page on a trigger. The class does the following:
html.dragging-something {
cursor: -moz-grabbing !important;
cursor: -webkit-grabbing !important;
cursor: grabbing !important;
}
That all works, until I move my mouse over another element that changes the cursor. (Like an input field)
How do I make it so my dragging-something class does not get overridden by anything else that might change the cursor?
jsFiddle (Problem): https://jsfiddle.net/BoxMan0617/jndukr86/
jsFiddle (Solution): https://jsfiddle.net/BoxMan0617/jxesdzqf/ (Thanks to #humble.rumble)
[Solved]
You need to apply it to the elements contained within the HTML tag not just the HTML tag
html.dragging-something * {
cursor: -moz-grabbing !important;
cursor: -webkit-grabbing !important;
cursor: grabbing !important;
}
I personally try to avoid using !important as often as I can. Instead I give structuring and specificity of rules a shot: http://jsfiddle.net/vy599pa2/
<div class="move">
<div class="pointer">
</div>
</div>
<div class="pointer">
div {
width: 150px;
height: 150px;
padding: 30px;
background-color: grey;
border: 2px solid black;
}
div div {
padding: 0;
background-color: lightblue;
}
div + div {
margin-top: 10px;
}
.pointer,
.pointer * {
cursor: pointer;
}
.move,
.move * {
cursor: move;
}
I have some rules nested inside each other, and I'd like to add another unrelated element to one of the rules.
For example if I have
#element1{
display: block;
.sub-element1 {
background: yellow;
.sub-element2 {
color: red;
}
}
}
and then I'd like to add another element (#element2) to use same rules as .sub-element2, so compiled code would look like this:
#element1{
display:block
}
#element1 .sub-element1 {
background:yellow
}
#element1. sub-element1 .sub-element2, #element2 {
color: red;
}
Is it possible?
You could use a mixin. You can add rules to a mixin, then include the mixins where you want them:
#mixin redcolor {
color:red;
}
Then simply include this mixin in any selector:
.subelement2, #element2 {
#include redcolor;
}
More on mixins here:
http://sass-lang.com/guide
Use #extend.
#element2 {
#extend .sub-element2
}
The output created by this will however also copy the selector chain, so this would be the output:
#element1. sub-element1 .sub-element2, #element2 {
color: red;
}
Perhaps that is what you want, but I can imagine it's not.
In this case you'll need to write an #extend only selector. It works much like an #include, except it generates the compact output you outline in your question. You could do it many ways, this is one of them:
%red {
color: red;
}
#element1{
display: block;
.sub-element1 {
background: yellow;
.sub-element2 {
#extend %red;
}
}
}
#element2 {
#extend %red;
}
Here's a link to it in the official docs.
I want to have my table rows highlighted on mouse over, but I have yet to find a way to do it that isn't using Javascript. Is this not possible in CSS?
I've tried this:
tr:hover {
background: #000;
}
But that doesn't work. Using td:hover works, but I want to change the background colour of the whole table row.
Is there a pure CSS/HTML way to do it, or am I going to have to resort to Javascript?
<tr>s themselves are very hard to access with CSS, try tr:hover td {background:#000}
You could try:
tr:hover {
background-color: #000;
}
tr:hover td {
background-color: transparent; /* or #000 */
}
JS Fiddle demo.
I had the same problem:
tr:hover { background: #000 !important; }
allone did not work, but adding
tr:hover td { background: transparent; }
to the next line of my css did the job for me!!
My problem was that some of the TDs already had a background-color assigned and I did not know that I have to set that to TRANSPARENT to make the tr:hover work.
Actually, I used it with a classnames:
.trclass:hover { background: #000 !important; }
.trclass:hover td { background: transparent; }
Thanks for these answers, they made my day!! :)
This will work:
tr:hover {
background: #000 !important;
}
If you want to only apply bg-color on TD then:
tr:hover td {
background: #c7d4dd !important;
}
It will even overwrite your given color and apply this forcefully.
tr:hover td.someclass {
background: #EDB01C;
color:#FFF;
}
only someclass cell highlight
tr:hover td {background-color:#000;}
You can give the tr an id and do it.
tr#element{
background-color: green;
cursor: pointer;
height: 30px;
}
tr#element:hover{
background-color: blue;
cursor: pointer;
}
<table width="400px">
<tr id="element">
<td></td>
</tr>
</table>
its easy . Just add !important at the end of your css line :
tr:hover { background: #000 !important; }
Try it
<!- HTML -->
<tr onmouseover="mOvr(this,'#ffa');" onmouseout="mOut(this,'#FFF');">
<script>
function mOvr(src,clrOver) {
if (!src.contains(event.fromElement)) {
src.bgColor = clrOver;
}
}
function mOut(src,clrIn) {
if (!src.contains(event.toElement)) {
src.bgColor = clrIn;
}
}
</script>