CODEWITHSUNDEEP
css
boop
boop

Reputation: 7787

RegEx for css class name

I want to have a class cX where x is a number between 0 and 100. I could add c0 to c100 to my css. But well, I'd like to avoid that.

I know there are ways to match element attributes like h2[rel="external"]. But is it also possible to match class names? Would it also possible to use the matched value within the rule?

Example

.c[x] { height: x%; }

Upvotes: 1

Views: 3068

Answers (1)

Aziz
Aziz

Reputation: 7793

EDIT - CSS attr

After a bit of research, I found that there is a CSS function called attr which is exactly what you are looking for, however, its support is currently limited to the CSS content property and not others, however, it is interesting to keep an eye on it, I reckon it will be the solution of the future

From Moz MDN:

The attr() CSS function is used to retrieve the value of an attribute of the selected element and use it in the style sheet. It can be used on pseudo-elements too and, in this case, the value of the attribute on the pseudo-element's originated element is returned.

Your code would probably look like this:

.c { height: attr(data-height %, 0); }

HTML

<div class="c" data-height="1"></div>
...

This will get the height from the element's data attribute and sets it with the % percentage unit and falls back to 0 if data-height is not found.

Current supported methods:

From the W3 Docs:

6.3.2. Substring matching attribute selectors

Three additional attribute selectors are provided for matching substrings in the value of an attribute:

[att^=val]

Represents an element with the att attribute whose value begins with the prefix "val". If "val" is the empty string then the selector does not represent anything.

[att$=val]

Represents an element with the att attribute whose value ends with the suffix "val". If "val" is the empty string then the selector does not represent anything.

[att*=val]

Represents an element with the att attribute whose value contains at least one instance of the substring "val". If "val" is the empty string then the selector does not represent anything. Attribute values must be CSS identifiers or strings. [CSS21] The case-sensitivity of attribute names in selectors depends on the document language.

As discussed in the comments, there is no pure CSS solution at the moment, you could try one of the following approaches:

SASS

@for $i from 1 through 100 {
    $height: percentage($i/100);
   .c#{$i} {height: $height;}
}

Output:

.c1 {height: 1%;}

.c2 {height: 2%;}

.c3 {height: 3%;}

...

LESS

.c-gen(@index) when (@index > 0){
  .c@{index}{
    height: @index * 1%;
  }
  .c-gen(@index - 1);
}
.c-gen(100);

LESS code by Harry

Server Side

You could make your server side script output inline CSS for each item

PHP Example:

<?php 
for ($i = 1; $i <= 100; $i++) {
    echo "<span height='".$i."%'>".$i."</span>";
} 
?>

Output

<span height="1%">1</span>
...

jQuery

var i = 0;
$('.c').each(function() {
  i++;
  $(this).attr('height', i + '%');
  //console.log(i); //debug
});

Upvotes: 4

Related Questions