What does the # prefixing a CSS property mean?

Question

I have some CSS in which in some properties inside CSS definition starts with # character.

For example, in the following CSS there are two properties prefixed with a # (other than a color value) #line-height and #padding

.free-quote-box h1 {    
    text-align:center;
    vertical-align:top;
    line-height:24px;
    #line-height:12px;/* First # tag prefix property/
    #padding:8px 0 6px 0;/* Second # tag prefix property/
    padding:8px 0 0;
}

If your question is about CSS properties please don't tag it [css-selectors]. Especially in a context that makes your question doubly confusing. Also, that's prefixing, not suffixing. — BoltClock, Jun 12 '13 at 08:17
The CSS in question does not have valid comments. They should be closed with a `*/` — andyb, Jun 12 '13 at 08:19
Ok BoltClock.Actually doesn't ask css related question and mostly ask things related to .net or sql related.So that's why added css related tags coming in intellesense. — Kamran Shahid, Jun 13 '13 at 05:38

score 3 · Answer 1 · answered Jun 12 '13 at 08:07

3

It's a trick to hide certain rules from specific versions of Internet Explorer, good sample found here:

.myTestClass{
   width: 5px;  /* value used by all other browsers */
   #width: 7px; /* value used by IE */
   _width: 9px; /* value used by IE6 and older */
}

You should however avoid issues like this, as it breaks the CSS and might introduce other issues in other browsers. If really needed use conditional comments to feed older IE's specific stylesheets.

answered Jun 12 '13 at 08:07

Niels Keurentjes

41,402
9
98
136

What happened with it in current order of my CSS.Actually i am more sort of a developer then designer and investigting some externally created CSS.Getting some error when clearing out the CSS via some visual studio IDE for such type of CSS prefixing # in property name inside the CSS class definition – Kamran Shahid Jun 12 '13 at 08:12

score 1 · Answer 2 · edited May 23 '17 at 10:25

1

It is a hack for Internet Explorer and so makes it invalid CSS. The hash symbol is only valid for ID selectors, and to denote hex colour codes.

CSS hacks should be avoided, instead use Conditional Comments.

edited May 23 '17 at 10:25

Community

1
1

answered Jun 12 '13 at 08:06

MrCode

63,975
10
90
112

score 0 · Answer 3 · answered Jun 12 '13 at 08:04

Very possible that they just wanted to comment that line out without having to do a full /* ..... */ by just creating an invalid propery, lots of people do this some with things like

-padding: 10px;
-x-padding: 10px;

either that or there's a browser that will read #;s that they want to target specifically.

score 0 · Answer 4 · answered Jun 12 '13 at 08:21

0

Just to add

.myTestClass{
   width: 5px;  /* value used by all other browsers */
   #width: 7px; /* value used by IE 7 Working fine on IE8-9 */
   _width: 9px; /* value used by IE6 and older */
}

Rules to embedd on CSS.

answered Jun 12 '13 at 08:21

Hafiz Khalid Nawaz

35
4

What does the # prefixing a CSS property mean?

4 Answers4