0

In HTML I have this:

<a id="hdr20"></a>
<div class="hdr-bar">
  <a href="#" class="hdr-btn">Top</a>
  <a href="#hdr19" class="hdr-btn">ToS</a>
  <a href="#hdr2" class="hdr-btn">ToC</a>
  <a href="#hdr21" class="hdr-btn">Skip</a>
</div>

I would like to use DRY (Don't Repeat Yourself) method and use something like this:

<a id="hdr20"></a>
<div class="hdr-bar">
  <class="hdr-btn">
    <a href="#">Top</a>
    <a href="#hdr19">ToS</a>
    <a href="#hdr2">ToC</a>
    <a href="#hdr21">Skip</a>
  </class>
</div>

I've tried <span class="hdr-btn but that doesn't work.

I've tried changing the: <div class="hdr-bar" to: <div class="hdr-bar hdr-btn" but that doesn't work.

Existing CSS

The CSS works great:


.hdr-bar {
  display: block;
  position: relative;
  width: 100%;
  height: .5rem;            // Allow bit extra for button box height
  text-align: right;        // Don't use "float: right;" that breaks rendering order
  &:before {
    content: "";
    display: block;
  }
}

.hdr-btn {
  display: inline-block;
  position: relative;
  color: $header-bg-color;  // Cayman green
  padding: 5px 15px;        // vertical, horizontal padding around button text
  font-size:0.75em;         // 75% of normal font for button text
  margin-left: 10px;        // Now that right aligned, switch margin side
  // From: https://stackoverflow.com/questions/65297617
  background: linear-gradient(transparent,rgba(0, 0, 0, 0.4)) top/100% 800%;
  background-color: $honeydew; // Honeydew

  &:hover {
    background-position:bottom;
    color:#F0FFF0;
  }
}

Perhaps it's possible to assign the hdr-btn class to all elements within the hdr-bar class using JavaScript?

WinEunuuchs2Unix
  • 1,482
  • 1
  • 11
  • 27
  • 2
    why dont you just use `.hdr-bar a` CSS selector? – sajjad rezaei Feb 21 '22 at 22:51
  • What does inspecting "top" with developer tools show? What styles are being overridden? Have you confirmed the HTML is renderd as expected as the CSS works with the originally supplied HTML. Can you supply a [mcve] illustrating the problem. Your update should Ideally be a new question, as the answer was appropriate to the information originally supplied. – Jon P Feb 22 '22 at 00:45
  • @JonP Duh I have too much on my mind tonight. I forgot I started changing `/assets/css/style.scss` locally instead of directly on GitHub Pages. As such the changes made to HTML I forgot to upload the CSS counterpart. Everything works perfectly and I've re-accepted the answer below. Not sure what to do with last edit; Update to advise others, or revert... – WinEunuuchs2Unix Feb 22 '22 at 01:11
  • I'd just revert back – Jon P Feb 22 '22 at 01:30
  • @JonP Thank you very much for all your help. Sorry for the brain freezes last night. I've reverted the edit and will come back in a day or two and delete all the comments to you. – WinEunuuchs2Unix Feb 23 '22 at 01:32

1 Answers1

3

Probably the closest thing to what you want is the .hdr-bar > a CSS selector, which would select every <a> element under .hdr-bar.

<a id="hdr20"></a>
<div class="hdr-bar">
  <a href="#">Top</a>
  <a href="#hdr19">ToS</a>
  <a href="#hdr2">ToC</a>
  <a href="#hdr21">Skip</a>
</div>

.hdr-bar {
  display: block;
  position: relative;
  width: 100%;
  height: .5rem;            // Allow bit extra for button box height
  text-align: right;        // Don't use "float: right;" that breaks rendering order
  &:before {
    content: "";
    display: block;
  }
}

/* here! */
.hdr-bar > a {
  display: inline-block;
  position: relative;
  color: $header-bg-color;  // Cayman green
  padding: 5px 15px;        // vertical, horizontal padding around button text
  font-size:0.75em;         // 75% of normal font for button text
  margin-left: 10px;        // Now that right aligned, switch margin side
  // From: https://stackoverflow.com/questions/65297617
  background: linear-gradient(transparent,rgba(0, 0, 0, 0.4)) top/100% 800%;
  background-color: $honeydew; // Honeydew

  &:hover {
    background-position:bottom;
    color:#F0FFF0;
  }
}
Caleb Denio
  • 1,054
  • 8
  • 14