En HTML tengo esto:
<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>Me gustaría usar el método DRY (Don't Repeat Yourself) y usar algo como esto:
<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> Probé <span class="hdr-btn pero eso no funciona.
Intenté cambiar: <div class="hdr-bar" a: <div class="hdr-bar hdr-btn" pero eso no funciona.
El CSS funciona muy bien:
.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; } } ¿Quizás sea posible asignar la clase hdr-btn a todos los elementos dentro de la clase hdr-bar usando JavaScript?
Probablemente lo más parecido a lo que desea es .hdr-bar > a selector de CSS, que seleccionaría cada elemento <a> debajo .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; } }