1

Suppose you have 10 HTML elements with ids 1 to 9; element 1 has id="1", etc. This is what I want to do. "(IdNumber)" is not in syntax and used for only illustration:

// for all elements
 #(IdNumber) {width: (IdNumber)%;}

So the end result should make the width of each element equal to its id; first element's width is 1%, etc. I want to use an unspecified CSS selector's result, like here it is the id string, inside the brackets as a value.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Jecht Tyre
  • 297
  • 2
  • 9
  • I assume the elements and Ids are generated somehow (js or server code)? Can that generation include an inline style reusing the variable for the Id and width? – wunth Oct 20 '17 at 03:45
  • https://stackoverflow.com/questions/9523197/css-values-using-html5-data-attribute – wunth Oct 20 '17 at 03:49

3 Answers3

1

It should look like this:

@for $w from 1 through 9 {
  ##{$w} {
    width: unquote('#{$w}%');
  } 
}

But I would strongly encourage to also prefix your ids with some character because while pure numeric ids are allowed in html5, this was not so for html4 and it generally can lead to problems because purely numeric id can't be distinguished from number.

Flying
  • 4,422
  • 2
  • 17
  • 25
0

(Using LESS) you can achieve this by the following: EG HTML:

<div id="MyDiv">
  <div id="MyDiv1"></div>
   <div id="MyDiv2"></div>
</div>

LESS:

#MyDiv{
  width:500px;
  height:200px;
  border:red 1px solid;
  #MyDiv1{
    width: 10%;
    height:20px;
    border:red 1px solid;
  }
}
.setWidth{
  width: 20%;
}
#MyDiv2{
  .setWidth;  
  height:30px;
  border:red 1px solid;
}
TylerH
  • 20,799
  • 66
  • 75
  • 101
Kyle Berkland
  • 1
  • 1
0

You can use attribute selector on css but you should write style for each id separately, for eaxmple :

Html :

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>

Css :

<style>
    div {
        background-color: blueviolet;
        margin: 10px;
        border: 1px solid gray;
        height: 30px
    }
     [id="1"] {
         width: 1%;

     }
    [id="2"] {
        width: 2%;
    }
    [id="3"] {
        width: 3%;
    }
    [id="4"] {
        width: 4%;
    }
</style>

I hope it's usefull .

Sajad Bagherzadeh
  • 26
  • 5