Why are my CSS class settings overwritten?

Question

I'm creating a github page. I use the theme "midnight", but I like the top button from the Hacker theme, so I overwrote its style.

---
---
@import "{{ site.theme }}";
#header nav ul li a {
  all: unset;
}
#header nav ul li {
  line-height: unset;
}
#header {
  position: static;
}

/* adapt button from Hacker theme
 https://github.com/pages-themes/hacker/blob/master/_sass/jekyll-theme-hacker.scss
 */
.btn {
  display:inline-block;
  background:-webkit-linear-gradient(top, rgba(40,40,40,0.3), rgba(35,35,35,0.3) 50%, rgba(10,10,10,0.3) 50%, rgba(0,0,0,0.3));
  padding:8px 18px;
  border-radius:50px;
  border:2px solid rgba(0,0,0,0.7);
  border-bottom:2px solid rgba(0,0,0,0.7);
  border-top:2px solid #000;
  color:rgba(255,255,255,0.8);
  font-family:Helvetica, Arial, sans-serif;
  font-weight:bold;
  font-size:13px;
  text-decoration:none;
  text-shadow:0 -1px 0 rgba(0,0,0,0.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
  /* added manually 
  line-height: 2.5;*/
}

.btn .icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 1px 8px 0 0;
  float: left;
}

a.btn-github {
  /* overwritten for some reasons... */
  font-family:Helvetica, Arial, sans-serif;
  font-weight:bold;
  font-size:13px;
  text-decoration:none;
  text-shadow:0 -1px 0 rgba(0,0,0,0.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}

.btn-github .icon {
 opacity:0.6;
 background:url("../images/blacktocat.png") 0 0 no-repeat
}

And this is the header element (fork class was present in the midnight theme, but other classes like "btn" or "btn-github" might be re-placed):

<div id="header">
    <nav>
      <ul>
        <li class="fork btn">
            <a class="btn-github" href="https://github.com/ynikitenko/yarsync">
                <span class="icon"></span>
                View On GitHub
            </a>
        </li>
        
      </ul>
    </nav>
  </div><!-- end header -->

I tried my best to set the .btn-github text style, but it is always overwritten (as I can see and as "Inspect element" in Firefox shows to me - though I don't know what overwrites it). I want it to be bold. How should I apply these rules?

I thought I should ask the Code Review, but it seems this site is more appropriate. I'd also like to vertically position this button in the center of header, but maybe I shall ask a different question for that (if I don't find it out).

This is my page: https://ynikitenko.github.io/yarsync/

Your rule for `#header nav ul li a` is overriding it due a higher [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity). You may end up have to put `!important` on your styles to fix it if you want to keep that rule. — Ouroborus, Jul 02 '22 at 12:34
The theme you have chose comes with a stylesheet. A selector in this stylesheet is already targeting `#header nav ul li a` -- which has much higher specificity than your selector: `a.btn-github` — ksav, Jul 02 '22 at 12:39
So is there any site to ask about problems of my code? I thought it was Webmasters, don't get it why it was moved here! P.S. I even read the other question and the link there, but did not get it entirely :( Thanks for solving it for me! — Yaroslav Nikitenko, Jul 02 '22 at 13:03
Not sure about the knowledge domain of Webmasters, but this question might help understand why it was moved here https://meta.stackoverflow.com/questions/283045/why-do-we-need-webmasters-stackexchange-when-we-have-stack-overflow — ksav, Jul 02 '22 at 13:06

ksav · Accepted Answer · 2022-07-02T13:03:35.593

When you import the 3rd party theme with @import "{{ site.theme }}"; this adds a stylesheet full of rules e.g.

#header nav ul li a {
    font-size: 14px;
    box-shadow: inset 0px 1px 0px rgb(255 255 255 / 30%), 0px 3px 7px rgb(0 0 0 / 70%);
    ...
}

When you try to apply your own rule to the same element, it will not have enough specificity to override the theme's rule (even though it is written later).

a.btn-github {
    font-size: 13px;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
    ...
}

One solution is to increase the specificity of the selector in your rule:

#header nav ul li a.btn-github {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgb(0 0 0 / 75%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
}

Yes, it worked, thanks! I get it: the order (I wrote it later than that rule with header) did not matter, because the specificity still counts. — Yaroslav Nikitenko, Jul 02 '22 at 13:02
Ordering of rules still applies if the specificity between the two rules is equal. — ksav, Jul 02 '22 at 13:04

Why are my CSS class settings overwritten?

1 Answers1