-2

I've read the question about combining the class and ID in the CSS selector but it's not working for me and I don't know where I'm going wrong.

I have the following set of divs:

<div id="maincontent" class="2col clearfix">
    <div id="leftcolumn">content</div>
</div>

and the following in my css:

#maincontent.2col {
    width: 840px;
    margin: 0px auto; 
    text-align: center;
}

#maincontent.2col #leftcolumn   {
    float: left;
    width: 490px;
    margin: 0 10px 0 0;
    /*border: 1px solid #000;*/
    text-align: left;
}

However, when I use firebug, nothing is happening to the #leftcolumn div.

If I remove the .2col from both it works as I would expect it to, but I'd like to have the 2col class in there as I'm going to be having a 3 column layout and I don't want to have more than one stylesheet. Any thoughts?

Edit: Apologies, that's not a misspelling in my HTML, that's a misspelling when trying to write it out here.

Community
  • 1
  • 1
Piers Karsenbarg
  • 3,105
  • 5
  • 31
  • 67
  • I'm going to propose that this gets reopened. I would say that some people (including some front-end people that I asked this same question to) aren't aware that you can't have a CSS class starting with a number. – Piers Karsenbarg Jun 10 '13 at 17:25

3 Answers3

6

Your classes cannot begin with a number.

CSS 2.1:

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

CSS 3:

In CSS3, identifiers (including element names, classes, and IDs in selectors (see [SELECT] [or is this still true])) can contain only the characters [A-Za-z0-9] and ISO 10646 characters 161 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit or a hyphen followed by a digit. They can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F". (See [UNICODE310] and [ISO10646].)

See http://www.w3.org/TR/CSS21/syndata.html#characters, http://www.w3.org/TR/css3-syntax/#characters, and also Which characters are valid in CSS class names/selectors?

Community
  • 1
  • 1
j08691
  • 204,283
  • 31
  • 260
  • 272
3

You have misspelled the class attribute

<div id="maincontent" class="2col clearfix">
   <div id="leftcolumn">content</div>
</div>

#maincontent.2col {
width: 840px;
margin: 0px auto; 
text-align: center;
}

#maincontent.2col #leftcolumn   {
float: left;
width: 490px;
margin: 0 10px 0 0;
/*border: 1px solid #000;*/
text-align: left;
}

And you can't start a class name with a number in CSS - your selector won't work until you change that.

From the 2.1 Spec:

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

Adrift
  • 58,167
  • 12
  • 92
  • 90
-1

The class attribute is misspelled

priteshbaviskar
  • 2,139
  • 2
  • 20
  • 27