CSS3: Integer attribute selector in CSS

Question

In css i want to select element which has attribute wd and i want to set the value of width from the value of attribute wd.

DTD:
<!ELEMENT square EMPTY>
<!ATTLIST square wd CDATA "0">

Valid XML:
<square wd="100" />

i want some thing like

square[wd="IntegerValue"]{
  width=IntegerValue
  }

Are the values of wd within a specific limit. Like 0-100, or, 10,20,30,...,300 or so? Or can it just be anything? — Nicolai Krüger
– Nicolai Krüger, Commented Sep 8, 2015 at 7:20
@NicolaiDitlevKroghKrüger : Value can be any integer in the range. — Jitendra
– Jitendra, Commented Sep 8, 2015 at 7:59
@maioman No we dont want to use javascript. Is this even possible through only css? — Jitendra
– Jitendra, Commented Sep 8, 2015 at 8:01
@Jitendra, in what range? It's possible to do it only in CSS, but you will might end up with a VERY long CSS file - depending on what the possible values are — Nicolai Krüger
– Nicolai Krüger, Commented Sep 8, 2015 at 9:39

Jitendra · Accepted Answer · 2016-03-03 04:36:23Z

2

On further investigation I found out that there is CSS3 recommendation which can

attr( <attr-name> <type-or-unit>? [ , <fallback> ]? )

we can do

square[wd="IntegerValue"]{ width:arrr(wd,Integer) }

But this is not supported by any browser till now. Hope they support it in future.

edited Mar 3, 2016 at 4:36

answered Sep 9, 2015 at 14:45

Jitendra

7823 gold badges9 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tom Maton · Accepted Answer · 2015-09-08 07:21:56Z

0

This can be achieved by the following ways:

 /* All spans with a "lang" attribute are bold */
 span[lang] {font-weight:bold;}

/* All spans in Portuguese are green */
span[lang="pt"] {color:green;}

/* All spans in US English are blue  */
span[lang~="en-us"] {color: blue;}

/* Any span in Chinese is red, matches simplified (zh-CN) or traditional (zh-TW) */
span[lang|="zh"] {color: red;}

/* All internal links have a gold background */
a[href^="#"] {background-color:gold}

/* All links to urls ending in ".cn" are red */
a[href$=".cn"] {color: red;}

/* All links to with "example" in the url have a grey background */
 a[href*="example"] {background-color: #CCCCCC;}

Taken from https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

so in your example it would be

square[wd="100"] {
    width: 100px;
}

answered Sep 8, 2015 at 7:21

Tom Maton

1,6043 gold badges26 silver badges42 bronze badges

1 Comment

Jitendra Over a year ago

I want to support any int value in specified range like in example width can be any value 10,20,21,23...100 . I can not write css for every wd value. is there a generic way where i can directly feed the value of wd to width.

Jitendra · Accepted Answer · 2015-09-11 05:16:53Z

0

try this:

var wd = document.querySelectorAll('[wd]')


for(var i = 0; i < wd.length; i++){
      wd[i].style.width = wd[i].attributes.wd.value +'px'
}

square{
  display:block;
  height:50px;
  background:red;
  margin-bottom:10px
}

 <square wd="100"></square>
 <square wd="200"></square>
 <square wd="300"></square>

if you have a specific range of possible width you could target it directly (CSS solution) with square[wd='100']{width:100px}

square{
  display:block;
  height:50px;
  background:red;
  margin-bottom:10px
}
square[wd='100']{width:100px}
square[wd='200']{width:200px}
square[wd='300']{width:300px}

 <square wd="100"></square>
 <square wd="200"></square>
 <square wd="300"></square>

edited Sep 11, 2015 at 5:16

Jitendra

7823 gold badges9 silver badges29 bronze badges

answered Sep 8, 2015 at 7:17

maioman

18.8k4 gold badges39 silver badges46 bronze badges

Collectives™ on Stack Overflow

CSS3: Integer attribute selector in CSS

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related