I have some code that looks like
[class|="e"]
{
margin: 0 0 0 0;
}
What does this the |= mean? What should I be googling for?
I tried searching stackoverflow (which can find punctuation) and Google but its hard to search without a name.
That is known as an attribute selector. Specifically, the |= attribute selector looks for elements with the given attribute, whose value exactly matches the given value or starts with the given value immediately followed by a - (a prefix, if you will).
Your selector matches elements with a class attribute with a value that:
is exactly e, or
starts with e-.
It's equivalent to the combined result of the following two attribute selectors:
[class="e"], [class^="e-"]
Note that |= is typically used with language attributes such as hreflang and lang, although in the case of the latter, :lang() is often preferred — this answer explains the difference between the two.
You can use |= with any other attribute, but be careful when using it with the class attribute, because it ignores multiple space-separated class names — it always looks at the entire attribute value or the very beginning of the value, rather than each individual class name.
As an example, the following elements will match your selector because e and e-c occur at the very beginning of the attribute value:
<div class="e"></div>
<div class="e-c"></div>
<div class="e-c f"></div>
However, neither of these elements will match your selector, because the value starts with f:
<div class="f e"></div>
<div class="f e-c"></div>
If you need to match a class prefix on elements that can potentially have multiple classes, I recommend using a different set of attribute selectors instead:
[class^="e-"], [class*=" e-"]
This will match all of the .e-c elements listed above. See this other answer for an explanation.
[class|="e"]
{
margin: 0 0 0 0;
}
Selects all elements whose class attribute contains values that are exactly "e", or begin with "e-".
And some examples:
<div class="e"></div> MATCH
<div class="ea"></div> DOESN'T MATCH
<div class="e-a"></div> MATCH
<div class="ae-"></div> DOESN'T MATCH
Related
Can I have an element that has an id that starts with or is completely numbers?
E.g. something like this:
<div id="12"></div>
Can I have a div with id as number?
Yes you can, but selecting/styling it with a CSS selector will be a pain.
id values that consist solely of digits are perfectly valid in HTML; anything but a space is okay. And although earlier HTML specs were more restrictive (ref, ref), requiring a small set of chars and starting with a letter, browsers never cared, which is a big part of why the HTML5 specification opens things up.
If you're going to use those ids with CSS selectors (e.g, style them with CSS, or locate them with querySelector, querySelectorAll, or a library like jQuery that uses CSS selectors), be aware that it can be a pain and you're probably better off staring the id with a letter, because you can't use an id starting with a digit in a CSS id selector literally; you have to escape it. (For instance, #12 is an invalid CSS selector; you have to write it #\31\32.) For that reason, it's simpler to start it with a letter if you're going to use it with CSS selectors.
Those links above in a list for clarity:
HTML5 - The ID Attribute
HTML4 - The ID Attribute and ID and NAME tokens
CSS 2.1 rules for IDs
Below is an example using a div with the id "12" and doing things with it three ways:
With CSS
With JavaScript via document.getElementById
With JavaScript via document.querySelector (on browsers that support it)
It works on every browser I've ever thrown at it (see list below the code). Live Example:
"use strict";
document.getElementById("12").style.border = "2px solid black";
if (document.querySelector) {
document.querySelector("#\\31\\32").style.fontStyle = "italic";
display("The font style is set using JavaScript with <code>document.querySelector</code>:");
display("document.querySelector(\"#\\\\31\\\\32\").style.fontStyle = \"italic\";", "pre");
} else {
display("(This browser doesn't support <code>document.querySelector</code>, so we couldn't try that.)");
}
function display(msg, tag) {
var elm = document.createElement(tag || 'p');
elm.innerHTML = String(msg);
document.body.appendChild(elm);
}
#\31\32 {
background: #0bf;
}
pre {
border: 1px solid #aaa;
background: #eee;
}
<div id="12">This div is: <code><div id="12">...</div></code>
</div>
<p>In the above:</p>
<p>The background is set using CSS:</p>
<pre>#\31\32 {
background: #0bf;
}</pre>
<p>(31 is the character code for 1 in hex; 32 is the character code for 2 in hex. You introduce those hex character sequences with the backslash, see the CSS spec.)</p>
<p>The border is set from JavaScript using <code>document.getElementById</code>:</p>
<pre>document.getElementById("12").style.border = "2px solid black";</pre>
I've never seen the above fail in a browser. Here's a subset of the browsers I've seen it work in:
Chrome 26, 34, 39
IE6, IE8, IE9, IE10, IE11
Firefox 3.6, 20, 29
IE10 (Mobile)
Safari iOS 3.1.2, iOS 7
Android 2.3.6, 4.2
Opera 10.62, 12.15, 20
Konquerer 4.7.4
But again: If you're going to use CSS selectors with the element, it's probably best to start it with a letter; selectors like #\31\32 are pretty tricky to read.
From the HTML 5 specs...
The id attribute specifies its element's unique identifier (ID). [DOM]
The value must be unique amongst all the IDs in the element's home
subtree and must contain at least one character. The value must not
contain any space characters.
There are no other restrictions on what form an ID can take; in
particular, IDs can consist of just digits, start with a digit, start
with an underscore, consist of just punctuation, etc.
An element's unique identifier can be used for a variety of purposes,
most notably as a way to link to specific parts of a document using
fragment identifiers, as a way to target an element when scripting,
and as a way to style a specific element from CSS.
Identifiers are opaque strings. Particular meanings should not be
derived from the value of the id attribute.
So... yes :)
From the HTML 4.01 specs...
ID must begin with a
letter ([A-Za-z]) and may be followed
by any number of letters, digits
([0-9]), hyphens ("-"), underscores
("_"), colons (":"), and periods
(".").
So... no :(
You can also select that type of id(though it is definitely not the best practice to create such an id that starts with a number) by doing the following:
document.querySelector('div[id="12"]'); //or
document.querySelectorAll('div[id="12"]'); //if you have multiple elements with equal ID.
From a maintainability standpoint this is a bad idea. ID's should be at least somewhat descriptive of what they represent. Prefix it with something meaningful to be compliant with what others have already answered with. For example:
<div id ="phoneNumber_12" > </div>
As pointed out in other responses, the answer is technically:
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
However, as a practical matter, you will be somewhat more limited if you want your documents to work with a variety of browsers, CSS editors, and JavaScript frameworks.
As noted in other responses, jQuery has problems with ids that contain periods and colons.
A more subtle problem is that some browsers have been known to mistakenly treat id attribute values as case-sensitive. That means that if you type id="firstName" in your HTML (lower-case 'f') and .FirstName { color: red } in your CSS (upper-case 'F'), a buggy browsers will not set the element's color to red. Because both definitions use valid characters for the id, you will receive no error from a validation tool.
You can avoid these problems by strictly sticking to a naming convention. For example, if you limit yourself entirely to lower-case characters and always separate words with either hyphens or underscores (but not both, pick one and never use the other), then you have an easy-to-remember pattern. You will never wonder "was it firstName or FirstName?" because you will always know that you should type first_name.
Same Question is Already ask
What are valid values for the id attribute in HTML?
While TJ Crowder's answer is conceptually good, it doesn't work for descendant CSS selectors.
Escaping only the first character followed by space does work however (as at Chrome 49)
Assume the following HTML snippet:
<td id="123456">
<div class="blah">
<div class="yadah">play that funky music</div>
</div>
</td>
The following statement:
document.querySelector("#\\31 23456 .blah .yadah").style.fontStyle = "italic";
correctly displays play that funky music
No, In experience, it has to start with a letter. You can use numbers if you want after the first character being a letter.
No. It has to start with a letter. See http://www.electrictoolbox.com/valid-characters-html-id-attribute/. You can use numbers after the first character, however, e.g. a1 or theansweris42.
I noticed that css properties aren't applied if id or class starts from number. For example, none of following will work:
.1ww{
/* some properties here */
}
and
.1{
/* some properties here */
}
and
#1{
/* some properties here */
}
and
#1ww{
/* some properties here */
}
Why doesn't CSS support ids or class names, starting from numbers? (Javascript, for example, works with numeric ids and classes)
In fact, the specification states that classes starting with a number will be interpreted as a dimension [1]:
CSS2 parses a number immediately followed by an identifier as a DIMENSION token (i.e., an unknown unit), CSS1 parsed it as a number and an identifier. That means that in CSS1, the declaration 'font: 10pt/1.2serif' was correct, as was 'font: 10pt/12pt serif'; in CSS2, a space is required before "serif". (Some UAs accepted the first example, but not the second.)
and since we don't know which dimensions will be introduced in the future, dimensions that do not exist in CSS are parsed as unknown dimensions:
In CSS1, a class name could start with a digit (".55ft"), unless it was a dimension (".55in"). In CSS2, such classes are parsed as unknown dimensions (to allow for future additions of new units). To make ".55ft" a valid class, CSS2 requires the first digit to be escaped (".\35 5ft")
You can use class starting with numbers by escaping the first digit, which is valid according to the W3C CSS validator. check out the plunkr.
[1] Appendix G. Grammar of CSS 2.1
IDs and classes must be valid identifiers.
Identifiers are listed like so in the specification:
ident -?{nmstart}{nmchar}*
So an optional - sign, followed by nmstart, followed by any number of nmchars.
The one we're interested in is nmstart, but I'll also list nmchar:
nmstart [_a-z]|{nonascii}|{escape}
nmchar [_a-z0-9-]|{nonascii}|{escape}
And just for completeness:
nonascii [\240-\377]
escape {unicode}|\\[^\r\n\f0-9a-f]
unicode \\{h}{1,6}(\r\n|[ \t\r\n\f])?
Okay, so with all that out of the way, notice how nmstart does not include 0-9 or -. This means that IDs and classes cannot start with a number according to the CSS specification. In fact, they can't even start with -1. Or two hyphens.
This is why they are not recognised in your code.
Although it is not a good convention to start Id and class names with a number you can access these elements from within your css by making use of the following syntax
[class="1ww"]
{
/* some properties here */
}
or
[id="1"]
{
/* some properties here */
}
It is a rule of CSS. Here is the link
In CSS, identifiers (including element names, classes, and IDs in selectors) can
contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher,
plus the hyphen (-) and the underscore (_); they cannot start with a digit,
two hyphens, or a hyphen followed by a digit.
According to the HTML5.1 Nightly from 5 October 2014, they agree that there is no reason the ID shouldn't be able to start with a number:
Note: There are no other restrictions on what form an ID can take; in
particular, IDs can consist of just digits, start with a digit, start
with an underscore, consist of just punctuation, etc.
If you must use a number at the start of an ID, you could (as mentioned in the other answers) use the attribute selector, or you could escape the number.
#\31 ww
{
background: red;
}
Working Fiddle
You can achieve it with CSS but differently
HTML
<div id="1">Some Id with Number</div>
CSS
[id='1']
{
font-size: 60px;
color: red;
}
But
#1 /*Not gonna work*/
{
font-size: 60px;
color: red;
}
Similarly for Class;
Working Fiddle
CSS
[class="1"]
{
font-size: 100px;
color: red;
}
Is there a reason why CSS doesn't support ids and classes, starting from numbers?
One of the main reason for it is; it has no semantic meanings. e.g.
<div id="1" class="2"></div> /*has no semantic meanings*/
It can be fixed as;
<div id="header" class="top-spacing"></div>
Reference
To plagiarise an answer to a similar question I read a long time ago on here: It's convention carried over from other older languages.
In the past, languages such as FORTRAN and BASIC didn't require the use of spaces so something like this:
10 A1 = 10
Would be identical to this:
10A1=10
The problem is, things like this would be very difficult to understand:
111A=10
As it could be interpreted as either:
11 1A = 10
or:
111 A = 10
etc.
As a result, starting variables with a number was made illegal. This is a convention that has persisted and is still present in most languages today, CSS included.
EDIT: found the question
I do not think that there is a CSS specific reason. This is an old standard for programming languages. Language tokenizers can be faster/simplier, if the first character can determine that the whole token is a number or an identifier (a token preceded by a numeric character must be a numeric literal).
var x = 10e4; // is this a variable?
cannot find the difference between these two selectors. Both seem to do the same thing i.e select tags based on a specific attribute value containing a given string.
For [attribute~=value] : http://www.w3schools.com/cssref/sel_attribute_value_contains.asp
For [attribute*=value] : http://www.w3schools.com/cssref/sel_attr_contain.asp
The first one ([attribute~=value]) is a whitespace-separated search...
<!-- Would match -->
<div class="value another"></div>
...and the second ([attribute*=value]) is a substring search...
<!-- Would match -->
<div class="a_value"></div>
W3Schools doesn't appear to make this distinction very clear. Use a better resource.
[attribute~="value"] selects elements that contain a given word delimited by spaces while [attribute*="value"] selects elements that contain the given substring.
For example, [data-test~="value"] would not match on the below div while [data-test*="value"] would.
<div data-test="my values go here"></div>
I encountered a css selector in a file like this:
#contactDetails ul li a, a[href^=tel] {....}
The circumflex character “^” as such has no defined meaning in CSS. The two-character operator “^=” can be used in attribute selectors. Generally, [attr^=val] refers to those elements that have the attribute attr with a value that starts with val.
Thus, a[href^=tel] refers to such a elements that have the attribute href with a value that starts with tel. It is probably meant to distinguish telephone number links from other links; it’s not quite adequate for that, since the selector also matches e.g. ... but it is probably meant to match only links with tel: as the protocol part. So a[href^="tel:"] would be safer.
a[href^="tel"]
(^) means it selects elements that have the specified attribute with a value beginning/starting exactly with a given string.
Here it selects all the 'anchor' elements the value of href attribute starting exactly with a string 'tel'
The carat "^" used like that will match a tags where the href starts with "tel" ( http://csscreator.com/content/attribute-selector-starts )
It means a tags whose href attribute begins with "tel"
Example:
This is a link
will match.
I have a paragraph as
<p id="para one" class="paragraph one">Content</p>
How does one represent the id and class with spaces in the css
When I use
#para#one{
}
.paragraph.one{
}
It does not work with the css above.
Just came across this one myself (styling an existing page with no way to change the id).
This is what I used to style it by id:
p[id='para one']{
}
And, as said previously, .paragraph.one selects two classes - this means it will also select elements with class=" one paragraph" and class="not a paragraph this one".
Your class CSS is correct. You don't have a class with a space in it, you have two classes, "paragraph" and "one". Your CSS properly selects elements that have both of those classes:
.paragraph.one { color: red; }
This is a useful technique for splitting out facets of the element into separate classes that can be combined individually. Note also that <p class="one paragraph"> will match the same selector.
class="paragraph one"
actually represents two different classes
id="para one"
won't work, but you'll probably end up having an actual id of para
You can't have spaces in id values or class names. When you have spaces in the value of the class attribute it specifies multiple classes that apply to that element:
<p class="paragraph one"> <!--Has both "paragraph" and "one" class-->
As for id values, the rules (HTML4) state the following:
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be
followed by any number of letters, digits ([0-9]), hyphens ("-"),
underscores ("_"), colons (":"), and periods (".").
As you can see, spaces are not valid. The HTML5 spec is more leniant, but spaces are still not allowed (emphasis added):
The id attribute specifies its element's unique identifier (ID). The
value must be unique amongst all the IDs in the element's home subtree
and must contain at least one character. The value must not contain
any space characters.
Modern browsers actually support id with spaces. So on Chrome 54 this works:
p#para\ one {
}
And modern browsers do not support the [id="..."] syntax, so
p[id='para one'] {
}
does not work in Chrome 54.
You simply can't have spaces. If you use a space it means you're using two different classes. One is para and the other one is one.