Is it possible to comment out specific classes inside the HTML (<div class="" ...>)?
For example:
<div data-group="group1" data-container="true" class="container-lg d-flex /* slider */ p-0">
Where in this example the class "slider" should be (temporarily) excluded from the class list.
[UPDATE]
Based on the comments I understand the way of thinking, so I go for the solution Lee Taylor mentioned. When I want to disable a specific class assignment, I just add a prefix to that class. For example:
<div class="slider container"...
becomes:
<div class="disable-slider container"...
Life could be so easy if the mind is thinking too complex :-D
Thank you all for thinking with me!
[/UPDATE]
This would make life a lot easier, in my opinion, in these ways:
You don't have to switch to your style sheet and go searching for the matching class, commenting out and switch back again to the code.
It's clear for everyone that you just exclude the complete function, which - if named clearly - gives other developers a better overview.
For testing purposes you could use this as (style) modules, which are enabled/disabled in a snap! Again, no more hopping between screens/tabs/windows.
Easier debugging. Just comment out some classes and you've got the source of the problem in no time.
It stimulates developers to use recognizable and clearly named classes
Currently I copy the whole element/row, comment this out and add a comment and then paste the copied row below. Then I remove classes from this line of code.
Most of the time this doesn't get updated, so you can't see it as a reliable backup if you're debugging.
I know for sure that such would be possible with JS, but why? (Also changing the HTML structure with JS gives a lot of headaches when it comes to layout shifts and not everyone has the possibility to make use of server side scripting.) Such should exist HTML in my opinion.
Am I the only one who has this in mind?
Per the HTML Specification on the class attribute:
When specified on HTML elements, the class attribute must have a value that is a set of space-separated tokens representing the various classes that the element belongs to.
Here is the definition for space-separated tokens:
A set of space-separated tokens is a string containing zero or more words (known as tokens) separated by one or more ASCII whitespace, where words consist of any string of one or more characters, none of which are ASCII whitespace.
A string containing a set of space-separated tokens may have leading or trailing ASCII whitespace.
Therefore, no, you should technically not be allowed to comment out class list members in any way. If any implementation of the specification does allow this, then it is undefined behavior and should not be depended upon.
In the style guide for the maintenance of a bulky documentation of an existing system using HTML which I has to maintain for a client, I found, that text given in a code-tag should be enclosed with spaces like:
..., the element<code> STATE </code>matches datatype ...
In most cases the whole text is enclosed in <p> tags:
<p>..., the element<code> STATE </code>matches datatype ...</p>
Does anyone has an idea why I should write <code> STATE </code> with no place before and afterwards?
One explanation could be that rendering the HTML leads to "better" (i. e. same / bigger width, ...) constant spaces between normal text and the code (the space in code-tag seems to be "bigger"). Is that approach meaningful? Or are there arguments against this rule so I could convince the program director to kick-out this rule?
This sounds like a way of enforcing a style without, for whatever reason, using CSS.
There's no reason to do this other than to conform to somebody's preference (your boss or a client, presumably, in this case).
To back this up, the HTML specification itself uses examples of <code> elements wrapped within <p> elements which do not follow this format:
Example 104
The following example shows how the element can be used in a paragraph to mark up element names and computer code, including punctuation.
<p>The <code>code</code> element represents a fragment of computer code.</p>
— Example 104 within the HTML5.1 specification
I wish I could think of a better way to word my question, but basically here is what I want to do: in an HTML file, I would like to fill the body with a specific string multiple times. For example:
<div>
This is some content. XXX
</div>
<div>
This is some more content. XXX
</div>
<div>
This is even more content. XXX
</div>
Then, I would like some script to go through the page, and replace every instance of the string (in this case XXX but it could be anything) with an incrementing number, so, like:
<div>
This is some content. 001
</div>
<div>
This is some more content. 002
</div>
<div>
This is even more content. 003
</div>
This is a simple example of course, and you might be thinking well that's dumb, just type the numbers. But obviously this is simpler than what I'm intending to do, and right now what I'm building, the order of all the content has not been decided yet, so things could move up or down in their placement on the page, but I'd like all the numbers to be sequential in order of their appearance on the page.
So, final thoughts: I am super sure there's a way better way to do this than I'm even thinking of, methodology wise (i.e., make an XML table or something). I am definitely open to ANY suggestion on how to do this, but I am kind of an idiot so if your answer is "pff this would be super easy in Ruby just use Ruby", that's not gonna really get me where I need to be. Also if this has already been answered, it was hard to think of how to word the question to search for previous answers so I apologize in advance if I didn't find the pre-existing answer when I was searching.
You can easily do this with CSS counters, sample here:
CSS
ul {
counter-reset:list;
}
li:after {
counter-increment:list;
content: " (" counter(list) ")";
}
For some more advanced examples visit the MDN documentation page.
You could use PHP to achieve this. If you've had no experience with it, it does integrate with HTML easily. Basically you write your html as usual, but you name the file .php instead of .html. Then you insert php scripts as follows, for example: <p>I can count to <?php nextNumber(); ?></p>.
at the top of the page you should insert more script with a counter function:
<?php
$i = 1;
$places = 4;
function nextNumber() {
GLOBAL $i, $places;
print str_pad($i++,$places,'0',STR_PAD_LEFT);
}
?>
This may be better than CSS. It's not browser-dependant.
Change $places to the number of digits you'd like to have (for leading zeros)
I'm looking for an html entity code for a move symbol (with left right up down arrows). The same one that appears after cursor: move; is applied in css. Does anyone know if this is possible? I can't find it anywhere.
The closest I found was this ✥ (✥ or ✥).
✥ ✥
✥ ✥
➥➥
☇ ☇
↑↓ ↑↓
⇄ ⇄
As mentioned in the other answers, there is no exact match. Here are some that might be close enough for some.
↔ (↔ or ↔) and ↕ (↕ or ↕) are available, however there is no up/down/left/right arrow symbol in the arrow subgroup.
No, there is no such entity, and there is even no character like that. In interesting way to check whether the symbol you are looking for exists as a character is to visit http://shapecatcher.com/ and draw it. It’s not exact science, of course.
It is generally pointless to look for HTML entity codes. Those codes add nothing to the expressive power of the language: you can use character references &#... instead, or enter the characters directly if you are using UTF-8, as you normally should. The real question, after identifying a character, is whether it is supported in fonts and what to do about this. Whether there is an HTML entity for it is really irrelevant.
To the spec! Check out table 8.5, "named character references". A quick search of the word "arrow" doesn't turn up exactly what you're looking for but with over 2200 named entities, maybe you can find something that looks "close enough".
I made a pen for this purpose, feel free to use it : Create a Move cursor with html + css
<div id="wrapper">
<div class="cp-drag">
</div>
</div>
// see codepen for css please
I came to the same conclusion, no easy character, but my fix was to create a div with both the up/down arrow and side/side arrow in the same space. A bit finicky, but if you had to have it...
<div style="font-size:200%;display:inline-block;position:relative;top:-11px;left:-15px;">
<div style="display:inline-block;">↔</div>
<div style="display:inline-block;left:-32px;position:relative;">↕</div>
</div>
I understand that an id must be unique within an HTML/XHTML page.
For a given element, can I assign multiple ids to it?
<div id="nested_element_123 task_123"></div>
I realize I have an easy solution with simply using a class. I'm just curious about using ids in this manner.
No. From the XHTML 1.0 Spec
In XML, fragment identifiers are of
type ID, and there can only be a
single attribute of type ID per
element. Therefore, in XHTML 1.0 the
id attribute is defined to be of type
ID. In order to ensure that XHTML 1.0
documents are well-structured XML
documents, XHTML 1.0 documents MUST
use the id attribute when defining
fragment identifiers on the elements
listed above. See the HTML
Compatibility Guidelines for
information on ensuring such anchors
are backward compatible when serving
XHTML documents as media type
text/html.
Contrary to what everyone else said, the correct answer is YES
The Selectors spec is very clear about this:
If an element has multiple ID attributes, all of them must be treated as IDs for that element for the purposes of the ID selector.Such a situation could be reached using mixtures of xml:id, DOM3 Core, XML DTDs, and namespace-specific knowledge.
Edit
Just to clarify: Yes, an XHTML element can have multiple ids, e.g.
<p id="foo" xml:id="bar">
but assigning multiple ids to the same id attribute using a space-separated list is not possible.
No. While the definition from W3C for HTML 4 doesn't seem to explicitly cover your question, the definition of the name and id attribute says no spaces in the identifier:
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 (".").
My understanding has always been:
IDs are single use and are only applied to one element...
Each is attributed as a unique identifier to (only) one single element.
Classes can be used more than once...
They can therefore be applied to more than one element, and similarly yet different, there can be more than one class (i.e., multiple classes) per element.
No. Every DOM element, if it has an id, has a single, unique id. You could approximate it using something like:
<div id='enclosing_id_123'><span id='enclosed_id_123'></span></div>
and then use navigation to get what you really want.
If you are just looking to apply styles, class names are better.
You can only have one ID per element, but you can indeed have more than one class. But don't have multiple class attributes; put multiple class values into one attribute.
<div id="foo" class="bar baz bax">
is perfectly legal.
No, you cannot have multiple ids for a single tag, but I have seen a tag with a name attribute and an id attribute which are treated the same by some applications.
No, you should use nested DIVs if you want to head down that path. Besides, even if you could, imagine the confusion it would cause when you run document.getElementByID(). What ID is it going to grab if there are multiple ones?
On a slightly related topic, you can add multiple classes to a DIV. See Eric Myers discussion at,
http://meyerweb.com/eric/articles/webrev/199802a.html
I'd like to say technically yes, since really what gets rendered is technically always browser-dependent. Most browsers try to keep to the specifications as best they can and as far as I know there is nothing in the CSS specifications against it. I'm only going to vouch for the actual HTML, CSS, and JavaScript code that gets sent to the browser before any other interpreter steps in.
However, I also say no since every browser I typically test on doesn't actually let you.
If you need to see for yourself, save the following as a .html file and open it up in the major browsers. In all browsers I tested on, the JavaScript function will not match to an element. However, remove either "hunkojunk" from the id tag and all works fine.
Sample Code
<html>
<head>
</head>
<body>
<p id="hunkojunk1 hunkojunk2"></p>
<script type="text/javascript">
document.getElementById('hunkojunk2').innerHTML = "JUNK JUNK JUNK JUNK JUNK JUNK";
</script>
</body>
</html>
Nay.
From 3.2.3.1 The id attribute:
The value must not contain any space characters.
id="a b" <-- find the space character in that VaLuE.
That said, you can style multiple IDs. But if you're following the specification, the answer is no.
From 7.5.2 Element identifiers: the id and class attributes:
The id attribute assigns a unique identifier to an element (which may
be verified by an SGML parser).
and
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 (".").
So "id" must be unique and can't contain a space.
No.
Having said that, there's nothing to stop you doing it. But you'll get inconsistent behaviour with the various browsers. Don't do it. One ID per element.
If you want multiple assignations to an element use classes (separated by a space).
Any ID assigned to a div element is unique.
However, you can assign multiple IDs "under", and not "to" a div element.
In that case, you have to represent those IDs as <span></span> IDs.
Say, you want two links in the same HTML page to point to the same div element in the page.
The two different links
<p>Exponential Equations</p>
<p><Logarithmic Expressions</p>
Point to the same section of the page
<!-- Exponential / Logarithmic Equations Calculator -->
<div class="w3-container w3-card white w3-margin-bottom">
<span id="exponentialEquationsCalculator"></span>
<span id="logarithmicEquationsCalculator"></span>
</div>
The simple answer is no, as others have said before me. An element can't have more than one ID and an ID can't be used more than once in a page. Try it out and you'll see how well it doesn't work.
In response to tvanfosson's answer regarding the use of the same ID in two different elements. As far as I'm aware, an ID can only be used once in a page regardless of whether it's attached to a different tag.
By definition, an element needing an ID should be unique, but if you need two ID's then it's not really unique and needs a class instead.
That's interesting, but as far as I know the answer is a firm no. I don't see why you need a nested ID, since you'll usually cross it with another element that has the same nested ID. If you don't there's no point, if you do there's still very little point.
Classes are specially made for this, and
here is the code from which you can understand it:
<html>
<head>
<style type="text/css">
.personal{
height:100px;
width: 100px;
}
.fam{
border: 2px solid #ccc;
}
.x{
background-color:#ccc;
}
</style>
</head>
<body>
<div class="personal fam x"></div>
</body>
</html>
ID's should be unique, so you should only use a particular ID once on a page. Classes may be used repeatedly.
Check HTML id Attribute (W3Schools) for more details.
I don´t think you can have two Id´s but it should be possible. Using the same id twice is a different case... like two people using the same passport. However one person could have multiple passports... Came looking for this since I have a situation where a single employee can have several functions. Say "sysadm" and "team coordinator" having the id="sysadm teamcoordinator" would let me reference them from other pages so that employees.html#sysadm and employees.html#teamcoordinator would lead to the same place... One day somebody else might take over the team coordinator function while the sysadm remains the sysadm... then I only have to change the ids on the employees.html page ... but like I said - it doesn´t work :(