Apply same HTML class to group of elements-CodePudding

In HTML I have this:

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

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

<a id="hdr20"></a>
<div >
  <>
    <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 hdr-bar" to: <div 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?

CodePudding user response：

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 >
  <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;
  }
}