HTML Class Attribute with Spaces, It Is a W3C Valid Class

HTML class attribute with spaces, it is a W3C valid class?

these are two different classes a & b separated by space. see w3c DOCS

class = cdata-list [CS]

this attribute assigns a class name or set of class names to an
element. Any number of elements may be assigned the same class name or
names. Multiple class names must be separated by white space
characters.

---

If you have two class

.a { font-weight: bold; }
.b { font-weight: normal; }

and assign in class="a b" or class="b a", then later class will overwrite the prior class having same property, so font weight will be normal.

If you change the CSS definition order,

.b { font-weight: normal; }
.a { font-weight: bold; }

now the later class is bold, so "overwrite the prior class having same property" results font weight bold.

What is a space used for in an HTML-element class-declaration?

The HTML element is using both of the classes which have been enlisted separated by a space.

CSS html declarations with spaces

It means that element has all of the following classes: comment, smallertext and center-align. In HTML, spaces separate multiple class names in a single attribute.

In CSS, you can target this element using one or more of .comment, .smallertext or .center-align, either separately or together. Having three separate rules and a single element that has all three classes, all three rules will apply:

.comment {}
.smallertext {}
.center-align {}

You can also combine them together, if necessary, to apply styles specific to elements having all three classes:

.comment.smallertext.center-align {}

HTML class name containing spces?

If both of these classes are separate then your class attribute can contain these two classes separated by space. But if you are trying to create a class name with SPACE then it is not as per standards and will not work.
Even if you try to enter then browser will treat drag-down and drag-here as separate classes and not a single one.

How to reference a long class name with spaces in CSS?

Using dots (.) you can combine multiple class as a group

.node.node-article.node-teaser.contextual-links-region.node-even.published.with-comments.node-teaser.clearfix {
 ...
}

HTML5 Compliant - Trailing Space in Class Attribute

As we can see in the link below, there is no restriction on what the developer can use in the class attribute.

http://www.w3.org/html/wg/drafts/html/master/dom.html#classes

In fact, after saying what the classes are and that they're used spliting in the spaces, the author(s) says:

There are no additional restrictions on the tokens authors can use in
the class attribute, but authors are encouraged to use values that
describe the nature of the content, rather than values that describe
the desired presentation of the content.

Our colleagues here have tested and it successfully passes W3C validation, so I can't guess why your friend thought it was invalid.

How to interpret HTML multiple class names in the CSS renderization? What W3C says about it?

Your findings are correct, and they are official W3C specification.

Two classes on the element itself have the same 'origin'. Also, the selectors have the same 'weight'.
Since these and other rules don't determine which style has priority, the order of the style sheet determines the overrule.

See Cascading Style Sheets, level 1, paragraph 3.2 for the rule that specifies this. 3.2.1 through 3.2.4 don't differentiate between any of the two styles. It is 3.2.5 that prevails.

I will cite the rules here, although you may want to read the document to place them in context.

Conflicting rules are intrinsic to the CSS mechanism. To find the value for an element/property combination, the following algorithm must be followed:

1. Find all declarations that apply to the element/property in question. Declarations apply if the selector matches the element in
   question. If no declarations apply, the inherited value is used. If
   there is no inherited value (this is the case for the 'HTML' element
   and for properties that do not inherit), the initial value is used.
2. Sort the declarations by explicit weight: declarations marked '!important' carry more weight than unmarked (normal) declarations.
3. Sort by origin: the author's style sheets override the reader's style sheet which override the UA's default values. An imported style
   sheet has the same origin as the style sheet from which it is
   imported.
4. Sort by specificity of selector: more specific selectors will override more general ones. To find the specificity, count the number
   of ID attributes in the selector (a), the number of CLASS attributes
   in the selector (b), and the number of tag names in the selector (c).
   Concatenating the three numbers (in a number system with a large base)
   gives the specificity.
5. Sort by order specified: if two rules have the same weight, the latter specified wins. Rules in imported style sheets are considered
   to be before any rules in the style sheet itself.

Summarizing

We can translate the common sense rule itens in the W3C CSS1 rule 3.2 itens,

• «use class="a" if it is defined, or use class="b" if it is defined, or use BOTH if both defined» is equivalemnt to 3.2.1, «Declarations apply if the selector matches the element in question».

• «the last CSS definition overrides the others» is equivalemnt to 3.2.5 , «the latter specified wins».

Not changed with new standars: CSS2, CSS2.1 and CSS3 use the same rules.

edit css style of an element with a space in its class name

The problem is that the class name has a space in it.

This is not possible in CSS. What you are doing is giving the element two classes.

You can address them such:

.post.quote { .... }

but in your case, it's probably better to use a valid separator like

post_quote

W3C Validation Failed, llegal character in path segment: space is not allowed, Even though there are no spaces

The space is right there, between Review and 1:

 <img src="media/Review█1.jpg" alt="Review" class="Reviewphoto">
                       ^ here is the space

Do you see it now?

You need to encode it as %20 so the URL becomes media/Review%201.jpg:

 <img src="media/Review%201.jpg" alt="Review" class="Reviewphoto">

---

Related Topics