1

I've got a left-hand border on items in a list, and for all of them I set the border-left-color to transparent. The active item, denoted by a css class "active day" gets an actual color to its border. The code looks something like this (note I've omitted irrelevant styles):

<!-- example.html -->

<div id="day-sidebar">
    <div class="active-day">
        <h2>19</h2>
        <p>Fri</p>
    </div>                
    <div>
        <h2>20</h2>
        <p>Sat</p>
    </div>                
    <div>
        <h2>21</h2>
        <p>Sun</p>
    </div>                
</div>

/* example.css */

#day-sidebar div {
    border-left-width: 15px;
    border-left-style: solid;
    border-left-color: transparent;
}

.active-day {
    border-left-color: red;
}

My understanding is:

  • Classes take higher precedence than tags
  • Within a CSS file, rules later in the file take precedence to rules earlier in the file

Yet my first div in this example does not take on the new border color for active-day. Why is this?

Note: It works when I add !important to the CSS, but I understand that should only be used as a final measure.

Vukieboo
  • 590
  • 8
  • 23

2 Answers2

1

I've figured out the problem! Even though I'm selecting divs in my first CSS rule, the fact that I'm using an HTML id to denote the parent element makes that whole rule take the precedence of IDs, which are above classes. A way to make this work would be to give each div a class of "day" like so:

<!-- example.html -->

<div id="day-sidebar">
    <div class="day active-day">
        <h2>19</h2>
        <p>Fri</p>
    </div>                
    <div class="day">
        <h2>20</h2>
        <p>Sat</p>
    </div>                
    <div class="day">
        <h2>21</h2>
        <p>Sun</p>
    </div>                
</div>

/* example.css */

.day {
    border-left-width: 15px;
    border-left-style: solid;
    border-left-color: transparent;
}

.active-day {
    border-left-color: red;
}
Vukieboo
  • 590
  • 8
  • 23
  • 3
    And you can also read this https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity to understand the hierarchy. – A. Meshu Nov 12 '20 at 00:41
  • Oh great you figured it out. My answer is now redundant :P – ralphwayTOW Nov 12 '20 at 00:42
  • lol @ralphwayTOW sorry about that! Thanks for the answer nevertheless. I guess more selectors = more specificity? I've still learned something new. – Vukieboo Nov 12 '20 at 00:47
  • 2
    No worries man. But yea, you are totally right: the more selectors, the higher the priority. :) This is something also touched on in the mozilla post , that @A.Meshu posted - worth a read! – ralphwayTOW Nov 12 '20 at 00:53
0

Since you have specified:

#day-sidebar div {
    border-left-width: 15px;
    border-left-style: solid;
    border-left-color: transparent;
}

The styles in this will be priorities higher than using just .active-day. There simply are more selectors, and therefore higher priority. Also the id gives higher priority than a class.

You could solve this with doing the following:

.active-day {
    border-left-color: red !important;
}

However I would (and you should) do the following:

#day-sidebar .active-day {
    border-left-color: red;
}

Using !important isn't recommended - only use ´!important´ when necessary.

Let me know if it helps :)

ralphwayTOW
  • 98
  • 8