2

I have three class : product1, product2, product3. I can add css to all these class as follows:

.product1, .product2, .product3{
// add css here
}

But I am looking for more cleaner code to track 1 to 3 followed by 'product' and add css to these. My expectation can be Pseudocode Examples:

.product1to3{
// fun with css.
}

Is there any approach in css?

5 Answers 5

2

There is no such kind of css pseudo on what you wanted to achieve.

You can try to use SASS to achieve what you wanted.

and then use the @for Directive

SASS

@for $i from 1 through 3 {
  .product#{$i} { width: 20px; }
}

CSS

.product1 {
  width: 20px;
}

.product2 {
  width: 20px;
}

.product3 {
  width: 20px;
}

Also you can try to use LESS

Hope this helps

2

pure css implementation JSfiddle

So basically you need an "Attribute Begins With Selector" i.e select all classes which start with "product" and then you can use nth child attribute to select range

div[class^="product"]:nth-child(n+4):nth-child(-n+5) {
   background: red;
}

Really good article on complex css and nth:child

2
/* This selects all the elements which have the class name starting with 
    "product" 
*/
[class ^= "product"] {
  //CSS
}
2
  • 1
    nice approach. I think *= is better suited than ^= for this, since the former will search all the class attribute for a match, while the latter matches only the ones that starts with the given string, and therefore, requires the given class to be the very first listed on the element. In an era of a gazillion classes on each tag, that might not work reliably Commented Mar 1, 2018 at 6:11
  • Yes,using *= is a better approach. Commented Mar 1, 2018 at 7:13
2

If you have an unknown / high number of ".product(x)", and for whatever reason don't want to use an extra class to target them, you can get away with an attribute selector that matches all elements that have a class containing "product".

[class*="product"]

div{
  border:2px solid tan;
  height:40px;
}

[class*="product"]{
  background:steelblue;
}
<div class="product1"> product 1 </div>
<div class="product2"> product 2 </div>
<div class="not"> not a product</div>
<div class="product3"> product 3 </div>
<div class="product4"> product 4 </div>

It occupies just 1 line of compiled CSS, so it's minimal footprint, but be careful how you apply it.

1
  • @TemaniAfif see? sometimes even bad questions can kill Sunday afternoons boredom Commented Mar 4, 2018 at 21:05
1

Not an answer for the OP but for others that may find their way here remember that you can use multiple classes for each element.

html

<div class="product product1"></div>
<div class="product product2"></div>
<div class="product product3"></div>

css

/* shared styling */
.product {
    display: flex;
    background-color: gray;
    border: 1px solid red;
}
/* individual styling */
.product1 { 
    color: black;
}
.product2 {
    color: white;
}
.product3 {
    color: blue;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.