can we set a class name for HTML tag containing some spaces like this
<div class="drag-down drag-here">
this is the body part ..
</div>
.
Asked
Active
Viewed 369 times
1
Vignesh Gopalakrishnan
- 815
- 1
- 7
- 11
-
In short: yes, you can – Morpheus Feb 25 '14 at 10:39
-
There are two classes, actually – sinisake Feb 25 '14 at 10:40
-
For the css selector, use .drag-down.drag-here ; if you're also using id then #someid.drag-down.drag-here – AzDesign Feb 25 '14 at 10:44
-
@Morpheus .. can we.? but as per the next comment does it mean that we have two class names. ? – Vignesh Gopalakrishnan Feb 25 '14 at 10:44
-
@Vignesh Gopalakrishnan you can target in css like this `.drag-down.drag-here`. Note no space – Morpheus Feb 25 '14 at 10:47
-
a class name cannot have spaces. class="drag-down drag-here" = 2 classes, "drag-down" AND "drag-here" – AzDesign Feb 25 '14 at 10:47
-
Possibly a duplicate of https://stackoverflow.com/questions/13808846/html-class-attribute-with-spaces-it-is-a-w3c-valid-class – Nic Wortel Feb 25 '14 at 10:47
-
@Nic .. Haven't seen it . My mistake .. – Vignesh Gopalakrishnan Feb 25 '14 at 10:53
-
@AzDesign yeah got it now.. – Vignesh Gopalakrishnan Feb 25 '14 at 10:54
9 Answers
2
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.
K D
- 5,889
- 1
- 23
- 35
1
Your way is to specify multiple classes.
This way separates the class names with a space, i.e. <htmlTag class="class1 class2"> or <div class="drag-down drag-here"> allows you to combine several CSS classes for one HTML element.
Naming rules:
- Must begin with a letter
A-Zora-z
2.Can be followed by: letters (A-Za-z), digits (0-9), hyphens ("-"), and underscores ("_")
3.In HTML, all values are case-insensitive
The above rule doesn't mention a space so no space allowed to name a class attribute.
Ishank
- 2,860
- 32
- 43
0
Classes can be whateve you want, but a space means a different class name. In your case, two classes: drag-down & drag-here
Elfentech
- 747
- 5
- 10
-
then if we give it a two class name .. how can a Css file access the elements within the class names. ? – Vignesh Gopalakrishnan Feb 25 '14 at 10:49
0
No. Class names can not have spaces in between. The space mentioned in your code describes that 2 different CSS classes are added to the element.
Pugazh
- 9,453
- 5
- 33
- 54
0
Well, the HTML from your question is valid. However, it is interpreted as two seperate class names:
drag-downdrag-here
because a space seperates multiple class names. Unlike the id attribute, the class attribute can contain multiple values.
So, when using for instance CSS, styling rules targeted at div.drag-down and div.drag-here will both be applied to this element.
Also see the W3C documentation.
Nic Wortel
- 11,155
- 6
- 60
- 79
-
if treated as two separate classes then can we use either of the class names in CSS .. will it work .? – Vignesh Gopalakrishnan Feb 25 '14 at 10:47
-
Yes, it will. But you can also create CSS rules for both classes. The element will inherit the CSS of both classes (unless there is a conflict, for instance when the first class has a red background and the second class has a blue background) – Nic Wortel Feb 25 '14 at 10:50
0
<div class="drag-down drag-here">
Means the div has two classes drag-down and drag-here. You can have any number of classes separated by spaces.
Chethan N
- 1,110
- 1
- 9
- 23
0
You can specify multiple classes, seperated by a space, but a given class name cannot contain spaces.
Please refer to HTML class Attribute
jpo
- 73
- 1
- 7
-1
spaces cannot be used! better use an underscore like this:
<div class="drag-down_drag-here">
this is the body part ..
</div>
