I want to make a CSS selector for a class which starts with a whitespace, but I don't know how. For example: <table class=" example">…</table>.
Any leading or trailing spaces in the value of a class attribute are meaningless for targeting purposes. This: class=" example" is equivalent to this: class="example".
There is no need for a special selector that factors in the space.
From the HTML 5 spec:
2.4.7 Space-separated
tokens
A string containing a set of space-separated tokens may have leading
or trailing space characters.
Space characters are necessary, however, for separating multiple values in a class attribute.
3.2.5.7 The class
attribute
The attribute, if specified, must have a value that is a set of
space-separated tokens representing the various classes that the
element belongs to.
CSS classnames are single words; spaces just separate different classnames.
You want .example.
Whitespace at the start and end of a value for the class attribute is insignificant for the purposes of class selectors. class=" example" is valid HTML and equivalent to class="example", class="example " and even class=" example " for the purposes of the .example class selector.
Therefore the selector you're looking for is simply .example.
The only situation where it makes a difference in selectors is with attribute selectors: [class~="example"] will match all of the given examples, but [class="example"] will only match class="example". (This means, consequently, that if you have some esoteric reason to want to match the element only when its class attribute has a leading space, you can use either [class^=" example"] or [class=" example"], but you most likely just want a regular class selector.)
Related
Can I have multiple values in one HTML "data-" element? Similar to how a class can have multiple class names.
If possible, I would like to create a CSS/JS library that makes use of one "data-" element to house all of the library styles. For example:
<div data-library-name="xs-hidden col-md-10 col-xl-8 big-hero"></div>
That way, any of the programmers custom style rules can go into the elements class. My reasoning for this is to make readability easier, so together it would look like:
<div class="custom-style another-style" data-library-name="xs-hidden col-md-10 col-xl-8 big-hero"></div>
Can I have multiple values in one HTML "data-" element?
You can have a string. The spec doesn't define any particular format for the data in the attribute, which is designed to be processed by site specific JavaScript.
Similar to how a class can have multiple class names.
The class attribute takes a space separated list of classes.
Your JavaScript can your_data_attribute_value.split(" "); if you like.
Handling this with CSS would use the ~= attribute selector.
[att~=val]
Represents an element with the att attribute whose value is a whitespace-separated list of words, one of which is exactly "val". If "val" contains whitespace, it will never represent anything (since the words are separated by spaces). Also if "val" is the empty string, it will never represent anything.
AFAIK, I don't think data- attributes can convert that to an array. Instead, I think it'll interpret it as one value, but it is allowed.
If you want to do that, you'll probably have to split() it later in JavaScript into an array of usable values.
See this example on JSFiddle.net.
CSS has the shortcut .class selector but it actually is parsing the attribute named "class" as a list for space separated values. This is supported in the non-shortcut form by the following attribute selector:
[att~=val]
Represents an element with the att attribute whose value is a white space-separated list of words, one of which is exactly "val". If "val" contains white space, it will never represent anything (since the words are separated by spaces). If "val" is the empty string, it will never represent anything either.
Ref: http://www.w3.org/TR/CSS2/selector.html#class-html
As your question is tagged CSS you're perhaps looking for that. The rules how the parsing of attribute values is done is given in that document as well, so in case the javascript library you're trying to use on this (if any) won't cover that, it should be easy to add:
var list = $("div").data("library-name").split(/\s+/);
^^^^^^^^^^^^
This split with the white-space regular expression parses the string attribute value into an array with javascript and the Jquery library (for accessing the DOM and the data attribute).
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>
.
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.
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-Z or a-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.
Classes can be whateve you want, but a space means a different class name. In your case, two classes: drag-down & drag-here
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.
<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.
Yha sure,You can give space between the class name,
Also Refer this link SPACE BETWEEN CLASS
You can specify multiple classes, seperated by a space, but a given class name cannot contain spaces.
Please refer to HTML class Attribute
Well, the HTML from your question is valid. However, it is interpreted as two seperate class names:
drag-down
drag-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.
spaces cannot be used! better use an underscore like this:
<div class="drag-down_drag-here">
this is the body part ..
</div>
I mean, are there any words that we shouldn't use as the <tag class='reserved' />, class, id or any other thing?
I was planning to style the links with class "link", is this a good idea?
There are no reserved keywords for the class attribute, with the caveat that using special characters other than letters, numbers, or the underscore in the name, or beginning the name with a number, makes using it as a CSS selector more difficult.
Check out the HTML spec:
The attribute, if specified, must have a value that is a set of space-separated tokens representing the various classes that the element belongs to.
...
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.
... where a set of space-separated tokens is exactly what you'd think and has no other restrictions.
When the class is used as a CSS selector... ... the CSS grammar comes into play. A CSS name can contain:
alphanumeric characters [a-zA-Z0-9]
the underscore _
the hyphen -
select non-ASCII/extended ASCII characters (octal \240-\377 — includes common symbols, letters with diacritics, etc.)
or a character escaped by \. Escaped characters can be a Unicode code point (up to six bytes, terminated by whitespace, such as a regular space " ", if needed) or a non-alphanumeric character.
In addition, the name can't start with a (literal) number or hyphen, so those must be escaped. Because the escaped character must not be alphanumeric (specifically 0-9 or a-f, to differentiate from Unicode points, I assume), the Unicode value must be used if the selector name begins with a number.
Example (noting that \32 is the Unicode value for 2):
...
<style>
.\32 34 { color: red; }
.big-\$-G { color: green; } /* the color of money */
</style>
...
<div class="234">Some text here.</div>
<div class="big-$-G">This is in the "big-$-G" class.</div>
...
In my opinion, using "link" as a class name for links is fine, as long as it applies to all links you'll be defining. Otherwise, use something like "importantLinks", "mainLinks", etc.
I believe it is ok to use word link for class naming.
However, try to give it more explicit name so it not conflict with other code in the future.
Just go in source of such framework as bootstrap and see how they name their classes.
Use namespasing
In the case of JavaScript and JSX (JavaScript XML), there are some HTML attributes which only reserved for JavaScript, not for JSX. Such as class and for.
If
.animal {background: yellow}
will apply the styling rule to any elements with a class containing the word animal, even if it also contains other words eg...
<li class="toy animal">Toy Bear</li>
then what is the need for the below syntax for selecting by partial attribute?
*[class~="animal"] {background: yellow}
Thanks
The only difference is, you can use .value syntax only for classes, when [attribute~="value"] can be used to match any attribute values.
But when you use [class~="className"] to match class attribute values, it is equivalent to standard .className syntax.
According to the selectors spec, the period . is an alternative for the ~= notation for the class attribute.
Thus, for HTML, div.value and div[class~=value] have the same meaning
Just to clarify the ~= meaning:
E[foo~="bar"] an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar"
Note that this is different than *=
In other words, .animal and [class~=animal] (without the *) are the same.
Maybe I am missing something, but they seem similar. If you use for example...
a[alt~="thumb"]
or...
a[alt*="thumb"]
What can I narrow my selection down to differently? I am at the understanding that ~ gives you a partial match in the quotes while the * gives you a partial match. I am going to fiddle with the code a little, but since I could not find a question on the subject here, thought it would make a good topic either way.
From the JQuery help (which supports the standard selectors):
a[alt~="thumb"]
Description: Selects elements that have the specified attribute with a
value containing a given word, delimited by spaces. This selector
matches the test string against each word in the attribute value,
where a "word" is defined as a string delimited by whitespace. The
selector matches if the test string is exactly equal to any of the
words.
a[alt*="thumb"]
Description: Selects elements that have the specified attribute with a
value containing the a given substring. This is the most generous of
the jQuery attribute selectors that match against a value. It will
select an element if the selector's string appears anywhere within the
element's attribute value. Compare this selector with the Attribute
Contains Word selector (e.g. [attr~="word"]), which is more
appropriate in many cases.
Basically the selector ~= only matches if the value is found surrounded by white space. The selector *= matches if the value is found anywhere.
<div alt='heading navigation'>
<div alt='head'>
div[alt~='head'] would match only the second div, but div[alt*='head'] would match both.
[att~=value] is a contains word selector.
So a [alt="foo"] selector will match <a alt="foo bar"> but will not match <a alt="foobar">.
[alt*="foo"] will match both though, because this doesn't discriminate on words or whatever. As long as it's in the value, it hits.