I have styled a left-hand border on items in a list, with the border-left-color set to transparent for all of them. The active item, marked by the css class "active day", has a specific color for its border. Below is a snippet of the code (certain styles have been omitted):
<!-- 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;
}
According to my understanding:
- Classes have higher specificity than tags
- In a CSS file, rules that appear later take precedence over rules that appear earlier
However, the first div in this example does not display the new border color for active-day. Is there a reason for this?
Note: Adding !important to the CSS makes it work, but I am aware that this is recommended as a last resort.