Blanks space in css need help

kamirura

05-10-2011, 08:44 AM

Im trying to change the background color of my news posts for the main page.
What I want is to have every second post a darker grey than the one before.

In my css file Ive added the following lines to accomplish this. Sectiontable1 and 2 beeing the different posts.

Code:
.sectiontableentry,
.sectiontableentry0 { padding: 5px; }

.sectiontableentry1 {
border-bottom: 1px solid #ccc;
padding: 5px;
background-color: #ffffff;
}

.sectiontableentry2 {
border-bottom: 1px solid #ccc;
padding: 5px;
background-color: #f6f6f6;
}

The code look like this(see below) when inspecting in the browser and I can cleary see that there is a blank space in between the class name and the number. But the problem is I have no clue how I can write that space in css. Cause if I just add a blank space in the css it thinks its another class or rather a standard tag like h1 and it doesnt work. Is there some way to write a space like that in css?

Code:
<span class=contentpane>
<div class=sectiontableentry 1></div>
<div class=sectiontableentry 2></div>
<div class=sectiontableentry 1></div> /* see there is a space between sectiontableentry and 1*/
</span>

Wojjie

05-10-2011, 09:00 AM

There is no way, though you can use underscores _

In HTML, you can specify multiple CSS classes to one element, and spaces are the separators.

As for naming your classes, you should probably do it like a variable: no spaces, each word comes right after each other with the first letter of a word capitalized unless its the very first word.
ie: sectionTableEntryTwo, sectionTableEntryEven, and if you have to: sectionTableEntry2

kamirura

05-13-2011, 08:10 AM

This was solved by the lovely KorRedDevil <3
__________________________________________

The trick is simple, based exactly on W3C Recommendation:

[...] Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code.

That means we can use UTF-8 notation (important: followed by a space - to tell the interpreter that the UTF-8 ends there)

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
.\31 {
color:#F00
}
.\32 {
color:#0F0
}
</style>
</head>
<body>
<div class="1">text</div>
<div class="2">text</div>
</body>
</html>

where \31 and \32 are the UTF-8 notation for 1 and 2. It works in all the browsers, so that, if anything fails, use that.

Note: make sure you are using an UTF-8 charset for your document
Code:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">