Less attribute "selector starts" with different suffixes

user_490929 0
Viewed 42

I have an attribute selector that targets two HTML elements:

div {
  width: 40px;
  aspect-ratio: 1;
  margin: 5px;
  background-color: lavender;
}

div[class^="tag-"] {
  outline: 2px solid tomato;
}
<div class="tag-start"></div>
<div class="tag-end"></div>

Can I create a Less selector that targets both using the attribute selector as a starting point?

less css-selectors attributes css
1 Answers

Your current selector may not be the best solution as per the CSS Level 4 Specification.

In the below snippet your selector will match only examples one and two because the attribute-substrings selector you're using will only match the beginning of an attribute value, not each space separated value in a classlist:

div {
  width: 40px;
  aspect-ratio: 1;
  margin: 5px;
  background-color: lavender;
}

div[class^="tag-"] {
  outline: 2px solid tomato;
}
<div class="tag-start">1</div>
<div class="tag-end">2</div>
<div class="will-not-work tag-test">3</div>

Since all less code transpiles to CSS, less won't be able to match anything CSS itself can't, short of including all possible permutations that could follow tag-...

I suggest you use a data attribute here rather than a class.

div {
  width: 40px;
  aspect-ratio: 1;
  margin: 5px;
  background-color: lavender;
}

div[data-tag] {
  outline: 2px solid tomato;
}

div[data-tag="start"] {
  outline: 4px solid hotpink;
}
<div data-tag="start">1</div>
<div data-tag="end">2</div>
<div data-tag="test" class="will-work">3</div>

user_141905430
Related