Kamran Shahid
Kamran Shahid

Reputation: 4124

What does the # prefixing a CSS property mean?

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;
}

Upvotes: 2

Views: 184

Answers (4)

Hafiz Khalid Nawaz
Hafiz Khalid Nawaz

Reputation: 35

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.

Upvotes: 0

Niels Keurentjes
Niels Keurentjes

Reputation: 41958

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.

Upvotes: 3

MrCode
MrCode

Reputation: 64526

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.

Upvotes: 1

owenmelbz
owenmelbz

Reputation: 6584

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.

Upvotes: 0

Related Questions