Is there a way to individually target multiple CSS classes at once?

Question

For instance, I have the following code in a .less file, and would like to simplify it. Each nav is an individual navigation point. When the user hovers over that nav point, I only want that particular nav point's background color to change. Not every single one of them.

.nav-1:hover {
  background:#fc9426;
}
.nav-2:hover {
  background:#fc9426;
}
.nav-3:hover {
  background:#fc9426;
}
.nav-4:hover {
  background:#fc9426;
}
.nav-5:hover {
  background:#fc9426;
}
.nav-6:hover {
  background:#fc9426;
}
.nav-7:hover {
  background:#fc9426;
}
.nav-8:hover {
  background:#fc9426;
}
.nav-9:hover {
  background:#fc9426;
}

`.nav-1:hover, .nav-2:hover, .nav-3:hover, .nav-4:hover, .nav-5:hover, .nav-6:hover, .nav-7:hover, .nav-8:hover, .nav-9:hover, { background:#fc9426; }`? — j08691, Apr 19 '18 at 18:30

hungerstar · Accepted Answer · 2018-04-19T18:50:09.460

Use a comma.

.nav-1:hover,
.nav-2:hover,
.nav-3:hover {
  color: #fc9426;
}

Although I don't have any markup to go off of, it looks like you could create a helper/modifier class instead of defining the same thing over and over again.

It might look something like this:

[class^="nav-"] {
  margin: 1rem 0;
  padding: 0 1rem;
  min-height: 3rem;
  color: #333;
  font: 1rem/3rem Arial, sans-serif;
  border-bottom: 1px solid black;
}

/**
 * Utility/Modifier style properties that
 * any nav could add to their base of styles.
 */
.nav-branded {
  color: white;
  background-color: #fc643c;
}
.nav-branded:hover {
  background-color: hotpink;
}

/**
 * These classes have styles specific to 
 * each class (acts like an ID but 
 * without the specificity).
 */
.nav-1 {
  /* Waiting for some styles. */
}
.nav-2 {
  border-bottom-width: 4px;
}
.nav-3 {
  border-bottom-style: dashed;
}

<nav class="nav-1 nav-branded">Nav One</nav>
<nav class="nav-2">Nav Two</nav>
<nav class="nav-3 nav-branded">Nav Three</nav>

CSS classes are meant to be re-used so you don't have to define a bunch of different ones to get the same styling.

score 0 · Answer 2 · answered Apr 19 '18 at 18:33

The point of classes is for a given property to apply to a variety of elements. So you should give each <nav> the same class.

<nav class='color-change'>
  .
  .
  .
</nav>

Then in your CSS / LESS:

.color-change:hover {
  background:#fc9426;
}

Appleshell · Answer 3 · 2020-04-14T08:59:39.410

If you can't change your markup to avoid the redundancy of selectors, you can use an attribute selector to catch all of those classes with a single specifier:

*[class*="nav-"]:hover, *[class*=" nav-"]:hover {
    background:#fc9426;
}

The question was originally tagged with less, so if using less, you can also use recursion to generate those classes individually. This task is featured in the manual:

.generate-navs(9);

.generate-navs(@n, @i: 1) when (@i =< @n) {
  .nav-@{i}:hover {
    background:#fc9426;
  }
  .generate-navs(@n, (@i + 1));
}

score 0 · Answer 4 · answered Apr 19 '18 at 18:50

I think you imagine that you have a code like this

 <div class="nav-1"> </div>
 <div class="nav-2"> </div>
 <div class="nav-3"> </div>
 <div class="nav-4"> </div>

If so, you could simplify the code with a better advanced selector

[class*='nav-']{
      background:#fc9426;
    }

In this way, you will select the elements that in the 'class' attribute have in any part of the code the word 'nav-', which is the piece of the name of the class in common

In the case that in the HTML they have a father

 <div class="nav">
   <div class="nav-1"> </div>
   <div class="nav-2"> </div>
   <div class="nav-3"> </div>
   <div class="nav-4"> </div>
 </nav>

you can use this CSSs

  .nav > div{}
  .nav [class*='nav-']{}
  .nav > div:nth-of-type(1){} /* the number of the son */
  .nav > div:nth-of-type(2n){} /* all the pairs */
  .nav > div:nth-of-type(2n+1){} /* all the odd */

Is there a way to individually target multiple CSS classes at once?

4 Answers4