ChatGPT解决这个技术问题 Extra ChatGPT

How to assign multiple classes to an HTML container? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers. This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers. Closed 2 years ago. Improve this question

Is it possible to assign multiple classes to a single HTML container?

Something like:

<article class="column, wrapper"> 
What problem do you have now? Any way that was the solution to this problem. Any other problem may depend on several factors.
Though this is doable, I usually use nested containers with CSS inheritance. It is much prettier, and usually more useful.
If you are still having an issue after removal of the comma I suggest looking at the guidance on why rules don't work. I've found the most common speed-bump for me is the situation described there as "Use of a shorthand poperty" (i.e., implictly reverting to a default value)
I vote to re-open. There is no typo involved. The question is specifically intentionally asking about syntax with the comma.
Why not simply remove the comma?

A
Aurelio De Rosa

Just remove the comma like this:

<article class="column wrapper"> 

Wierd its space instead of commas. But yeah thanks for the answer
P
ProgramGamer

From the standard

7.5.2 Element identifiers: the id and class attributes Attribute definitions id = name [CS] This attribute assigns a name to an element. This name must be unique in a document. 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.

Yes, just put a space between them.

<article class="column wrapper">

Of course, there are many things you can do with CSS inheritance. Here is an article for further reading.


How should a browser be expected to react if an element is assigned to multiple classes that set different values for the same attributes. Is there some order of precedence for that?
@JonathanHenson: no, it's not. In case of tied specificity, the rule that occurs later in the CSS wins.
@UlrichSchwarz the later listed CSS class (what I was hoping for when I tested this), or later in all of the CSS files? Because the former most certainly does not work in the browsers I tested in, while I have tested the latter hypothesis.
@JonathanHenson: According to CSS 2.1 specs, "if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself." So it is CSS declaration order. The names in the class attribute have no specified order, since .foo is syntactic sugar for [class ~= foo] ref, "foo is a word in the class attribute".
@UlrichSchwarz Thank you for the clarification.
W
Webeng

To assign multiple classes to an html element, include both class names within the quotations of the class attribute and have them separated by a space:

<article class="column wrapper"> 

In the above example, column and wrapper are two separate css classes, and both of their properties will be applied to the article element.


what has this answer different from the previous?
a
amit kumar

you need to put a dot between the class like

class="column.wrapper">


Please add some explanation to your answer such that others can learn from it. Why should one use a dot there, instead of a space?