CODEWITHSUNDEEP
csshtmlstylesheetstyling
Dio Cane
Dio Cane

Reputation: 83

CSS: Styling IDs not having any effect

<div id="mydiv">
<img width="190" height="190" src="http://distilleryimage0.s3.amazonaws.com/9fe1cfd2cd4311e28e5722000a9f195f_6.jpg" id="1">
<img width="190" height="190" src="http://distilleryimage0.s3.amazonaws.com/9fe1cfd2cd4311e28e5722000a9f195f_6.jpg" id="2">
<img width="190" height="190" src="http://distilleryimage0.s3.amazonaws.com/9fe1cfd2cd4311e28e5722000a9f195f_6.jpg" id="3">
<img width="190" height="190" src="http://distilleryimage0.s3.amazonaws.com/9fe1cfd2cd4311e28e5722000a9f195f_6.jpg" id="4">
<img width="190" height="190" src="http://distilleryimage0.s3.amazonaws.com/9fe1cfd2cd4311e28e5722000a9f195f_6.jpg" id="5">
<img width="190" height="190" src="http://distilleryimage0.s3.amazonaws.com/9fe1cfd2cd4311e28e5722000a9f195f_6.jpg" id="6">
</div>

<style>
div#mydiv img#1 {width:30px}
div#mydiv img#2 {width:60px}
</style>

Why styling doesn't work?

Js fiddle: http://jsfiddle.net/FqrDR/1/

Upvotes: 0

Views: 78

Answers (2)

Chandrakant
Chandrakant

Reputation: 1981

You can start ID selectors with a number(To Elaborate more look at Xec's answer), but within CSS its not good practice, it needs to be escaped or begin with a letter. I recommend you change it with a name like id="img2" in the HTML. and also use #img2 in css

Upvotes: 2

xec
xec

Reputation: 18024

ID's starting with a number is perfectly valid in HTML5, but unfortunately you can't select it using hash notation in css without escaping the first character, or alternatively using the attribute selector;

/* unicode 0031 == "1" */
div#mydiv img#\0031 {width:30px} 

/* works, but has less specificity than hash notation */
div#mydiv img[id="2"] {width:60px}

http://jsfiddle.net/FqrDR/3/

To make your selectors simpler, i recommend you name the ID starting with an alpha character (a-z).

Sources

  1. Blog writeup: http://mathiasbynens.be/notes/html5-id-class
  2. Spec: http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-id-attribute
  3. W3C faq: http://www.w3.org/International/questions/qa-escapes#cssescapes

Upvotes: 1

Related Questions