Using regular expression in CSS pseudo element

237 Views Asked by At

Not sure this is possible with CSS only, can the content of a pseudo selector contain a regular expression?

In this scenario:

.normal-class::before {
  /*content: attr(class); => this works, but outputs both classes */
}


/*  
DOES NOT WORK
.normal-class::before {
  content: attr(class[^=special]); 
}*/

/*  
DOES NOT WORK
.normal-class::before {
  content: attr(class^=special);
}
*/

/*  
DOES NOT WORK
.normal-class::before {
  content: attr(class^=['special']);
}
*/

.normal-class::before {
  content: attr([class^="special"]); /* NOT WORKING EITHER */
}
<div class="special-class normal-class"></div>

DESIRED OUTPUT:<br>
special-class

Thanks.

1

There are 1 best solutions below

0
BoltClock On

CSS does not support partially inserting attribute values as content. You can concatenate one or more attr() expressions and/or strings interchangeably, but you can't have part of an attribute value.