Is the "id" attribute allowed in microformats? Example (hCard microformat):
<div class="tel" id="voice">
<span class="type">Voice</span>
<span class="value">(206) 555-1234</span>
</div>
<div class="tel" id="fax">
<span class="type">Fax</span>
<span class="value">(206) 555-5678</span>
</div>
It is allowed but ignored by the standard. All properties have to be declared by classes:
Elements with class names of the listed properties represent the values of those properties.
Related
Is it possible to write a CSS selector matching the element which does not contain any attributes or class names?
For example, I have html like the following (but with tons of divs and dynamic class names) and I want to match the second div (it does not contain class)
<div class="xeuugli x2lwn1j x1cy8">
<div>
<div class="xeuugli x2lwn1j x1cy8">
<div class="xeuugli x2lwn1j n94">
<div class="x8t9es0 x10d9sdx xo1l8bm xrohj xeuugli">$0,00</div>
</div>
</div>
<div class="xeuugli x2lwn1j x1cy8zghib x19lwn94">
<span class="x8t9es0 xw23nyj xeuugli">Helloworld.</span>
</div>
</div>
</div>
P.S. Getting the div like div:nth-child(2) is not a solution.
P.P.S. Could you please advise in general why the dynamic class names are used in the development?
Well, if you can't use classes, maybe try giving it an ID if possible, like
<div class="xeuugli x2lwn1j x1cy8">
<div id="myId">
<div class="xeuugli x2lwn1j x1cy8">
<div class="xeuugli x2lwn1j n94">
<div class="x8t9es0 x10d9sdx xo1l8bm xrohj xeuugli">$0,00</div>
</div>
</div>
<div class="xeuugli x2lwn1j x1cy8zghib x19lwn94">
<span class="x8t9es0 xw23nyj xeuugli">Helloworld.</span>
</div>
</div>
</div>
ad then you can select the ID via the css #id selector like so:
#myId {
/*stuff here*/
}
If you can't have IDs either, we could get really creative by finding a grouping element which you will swear to never use on another place, like <section> or <article>, and then you could use
const elem = document.getElementsByTagName("article")[0];
elem.style.border = '2px solid red';
which returns an array of all elements with that tag name, which in our case would be the only one you need. Then you could via Javascript give it the css you need.
I'm using the statement document.querySelector("[data-testid='people-menu'] div:nth-child(4)") in the console to give me the below HTML snippet:
<div>
<span class="jss1">
<div class="jss2">
<p class="jss3">Owner</p>
</div>
</span>
<div class="jss4">
<div class="5" title="User Title">
<p class="jss6">UT</p>
</div>
<div class="jss7">
<p class="jss82">User Title</p>
<span class="jss9">Project Manager</span>
</div>
</div>
</div>
I'd like to extend the statement in the console to extract the title "User Title" but can't figure out what combination of nth-child or nextSibling (or something else) to use. The closest I've gotten is:
document.querySelector("[data-testid='people-menu'] div:nth-child(4) span:nth-child(1)")
which gives me the span with class jss1.
I expected document.querySelector("[data-testid='people-menu'] div:nth-child(4) span:nth-child(1).nextSibling") to give me the div with class jss4, but it returns null.
I can't use class selectors because those are generated dynamically at build.
Why not just add [title] onto your querySelector?
document.querySelector("[data-testid='people-menu'] div:nth-child(4) [title]")
You can then get whatever you are looking for from that section? This is assuming title will be unique attribute in this section of html
Here my problem.
<span class="col-sm-3 col-md-3" ng-bind-template="{{controller.getToolTip()}}">
<span class="icon " ng-class="controller.getIcone()" aria-hidden="true"></span>
</span>
In my controller, getToolTip() returns a string and same for getIcone().
The second span is never displayed and not present in the DOM.
But if i replace by this :
<span class="col-sm-3 col-md-3" >
{{controller.getToolTip()}}
<span class="icon " ng-class="controller.getIcone()" aria-hidden="true"></span>
</span>
This time i can see my second span. Do you have an idea what is the problem
ng-bind-template directive replaces the element's content with the interpolation of the template in the ngBindTemplate attribute.
Read more here: https://docs.angularjs.org/api/ng/directive/ngBindTemplate
There is also a syntax error in the sample template. Quotes don't close and curly braces are needed in that case, like this:
<span class="col-sm-3 col-md-3" ng-bind-template="{{controller.getToolTip()}}">
Below I have a for-each loop using knockout.js.
<div data-bind="foreach:Stuff">
<div class="row">
<span data-bind="text: $data.name"></span>
</div>
</div>
I need to have the HTML Element with an id or name or something that reflects a unique value related to the $data.name value, as another method runs asynchronously, and needs to know which HTML element to update.
Ideally, it would look something like this, I guess:
<div data-bind="foreach:Stuff">
<div class="row">
<span id="data-bind='text: $data.name'" data-bind="text: $data.name"></span>
</div>
</div>
I have found a knockout syntax that applies values during runtime to specified attributes:
<div data-bind="foreach:Stuff">
<div class="row">
<span data-bind="attr: { id: $data.name}"></span>
</div>
</div>
Are you looking for this
<div data-bind="foreach:Stuff">
<div class="row">
<span data-bind="text: $data.name,attr:{id:$data.name}'"></span>
</div>
</div>
Here name is a observable i believe when ever there is change in name in stuff it will automatically updates its value & attr:{id}just to give a dynamic id to element using available bindings .
I'm using schema.org definition to represent a product.
I have a doubt about product size: should I specify the unit of measure in the field?
Here's my code (I need a separate span for "cm" to style it differently):
<div itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Product name</h1>
Size:
<span itemprop="width">60 <span>cm</span></span>
<span itemprop="height">50 <span>cm</span></span>
<span itemprop="depth">40 <span>cm</span></span>
</div>
Is this the correct way to define the size?
The width/depth/height properties expect Distance or QuantitativeValue as value.
If you want to use Distance:
As the Distance type does not seem to define a suitable property to provide the actual value, and its description says that values have
[…] the form '<Number> <Length unit of measure>'. E.g., '7 ft'.
I assume that the type should not be provided explicitly, e.g.:
<span itemprop="width">
60 <span>cm</span>
</span>
If the type should be provided, I guess using name is the only option:
<span itemprop="width" itemscope itemtype="http://schema.org/Distance">
<span itemprop="name">60 <span>cm</span></span>
</span>
If you want to use QuantitativeValue:
<span itemprop="width" itemscope itemtype="http://schema.org/QuantitativeValue">
<span itemprop="value">60</span>
<span>cm</span>
<meta itemprop="unitCode" content="CMT" />
</span>
Instead of specifying the UN/CEFACT code for "cm" (= CMT) in a meta element (which is allowed in the body, if you use it for Microdata), you could also use the data element:
<span itemprop="width" itemscope itemtype="http://schema.org/QuantitativeValue">
<span itemprop="value">60</span>
<data itemprop="unitCode" value="CMT">cm</data>
</span>