2

I'm currently trying to change the background color of a label based on a value. At the same time, I would like to change the color of the label if the user clicks it or hovers over it. Currently, I have the click and hover done (using separate CSS classes), but I'm unsure of how to make the value portion work as well.

I have a simple boolean value (called 'displayValueTrueClass') set to true in a TypeScript file. If that value is true, then I want to change the CSS class to a 'valueTrue' class.

Here is my HTML:

<section class="ac-container">
<div>
    <input id="id-1" name="id-1" type="checkbox" />
    <label [ngClass]="{'valueTrue': displayValueTrueClass}" for="id-1">Panel Name Goes Here</label>
</div>

and here is my CSS:

.ac-container {
    width: 100%;
    margin: 10px auto 30px auto;
}

.valueTrue {
    background-color: #060bf7;
    color: #ffffff;
}

.ac-container label {
    padding: 4px 20px;
    position: relative;
    display: block;
    height: 25px; 
    cursor: pointer;
    color: #ffffff;
    font-size: 12px;
    background: #404040;
}

.ac-container label:hover {
    background-color: #000000;
}

.ac-container input:checked + label,
.ac-container input:checked + label:hover{
    background-color: #4ed017;
    color: #ffffff;
}

.ac-container label-broken {
    background-color: #ff0000;
    color: #ffffff;
}

My typescript has the boolean set to true:

displayValueTrueClass: boolean = true;

I can confirm that the ngClass line does display using the appropriate CSS class, but only if I remove all of the other .ac-container:label classes, so it seems like those are maybe taking precedence over the valueTrue class? I'm fairly new to constructing HTML with CSS. I'm pretty sure I'm using 'ngClass' correctly so I'm unsure why the appropriate class isn't applied when that value is true.

Roka545
  • 3,404
  • 20
  • 62
  • 106
  • 1
    Why are you using Angular if you're taking an introduction to CSS/HTML course? Crawl before you walk ;) – APAD1 Jun 28 '17 at 20:43
  • The app I'm building uses Angular, CSS, and HTML. I've been doing fairly basic CSS and HTML but I'm trying to expand and learn some new things (in this case ngClass). I'm not "taking" an intro course, I was just going through a tutorial. Sorry if my wording was confusing. – Roka545 Jun 28 '17 at 20:47
  • Your ngClass looks fine. can you post your typescript? – LLai Jun 28 '17 at 20:52
  • @LLai I've added the typescript. I just have a boolean set to true. It does display using the valueTrue class, but ONLY if I remove the ac-containter:label classes, so it seems like those are taking precedence over the valueTrue class. – Roka545 Jun 28 '17 at 20:56
  • 1
    ah ok, good catch. try moving the .valueTrue class underneath .ac-container label. the .ac-container label class is getting priority because it is defined after .valueTrue https://stackoverflow.com/questions/9459062/in-which-order-do-css-stylesheets-override references css priority – LLai Jun 28 '17 at 20:58
  • 2
    You could define the style class as `.ac-container label.valueTrue`. That one would override `.ac-container label` when `valueTrue` is applied. – ConnorsFan Jun 28 '17 at 21:03
  • @ConnorsFan Thanks - that worked! If you create a separate answer I'll select it as the answer. – Roka545 Jun 28 '17 at 21:08

1 Answers1

1

As you noted, the CSS selector .ac-container label has higher precedence than the .trueValue selector. You can give the .trueValue selector a higher precedence by making it more specific:

.ac-container label.trueValue

It will override the default label selector when the trueValue class is applied.

More details about CSS Specificity can be found in this article.

ConnorsFan
  • 70,558
  • 13
  • 122
  • 146