I have an ionic/angular app which autogenerates a custom tag element with a different _ngcontent attribute each time e.g.:
<tag _ngcontent-hgr-c2>...</tag> (1st refresh)
<tag _ngcontent-agj-c7>...</tag> (2nd refresh)
<tag _ngcontent-cfx-c5>...</tag> (3rd refresh)
Is there a way to use regex to target the custom tag attribute?
This didn't work:
tag[^=_ngcontent-] {
color: red !important;
}
Nor did just targetting the tag app e.g.:
tag {
color: red !important;
}
According to this answer, there is kind of regex in CSS, but it can be only applied to attribute's value, not to attribute itself. The W3C documentation says the same, so because Angular creates custom attributes, I'm afraid that it can be hard to achieve by regex.
If you want to style your tag like in the second example you can do it by defining its styles in global styles.scss. This is not the best solution, but should work.
This angular-blog article recently helped me understand the idea behind the style ecapsulation.
Unfortunately, there is no wildcarding support in CSS for attribute names.
If you have access to the application code which generates the custom tags, you should add classes to these elements (if the app supports it).
See also this question.
Related
I know that the textarea doesn't support the functionality of pattern, however if I set the pattern variable in html, its still present in the browser.
So I have to execute the pattern verification in js anyways, but is it OK for me to store the pattern in the pattern attribute? As opposed to data-pattern or something, for consistency with the input elements?
You should use data-* attributes for extra attributes and since textarea tag does not support the pattern attribute then adding it like adding value to div.
Hope this helps.
Custom attribute is suppose to have the data- prefix, so I recommend to use that or you could ran into issues when validating your code.
And what happens if such an attribute suddenly become a standard attribute?
More to read:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#data-*
https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes
The template page http://www.blacktie.co/demo/kelvin contains a tag I haven't seen before: <t>Email</t>
The corresponding CSS styles this: #footwrap t {font-weight: 700;}
I'm curious as to the significance of the <t>. It's not listed at http://htmldog.com/reference/htmltags or other lists I can find.
Is this a custom HTML tag? From what I've read about custom elements (eg http://www.html5rocks.com/en/tutorials/webcomponents/customelements) you need to call document.registerElement() or document.createElement() but this doesn't seem to be the case here.
Is this code semantically correct, or should it be written as:
<span class="t">Email</span>
#footwrap .t {font-weight: 700;}
Yes, the <t> tag is a custom element. While custom tags can be useful, if you want them supported in all browsers, you have to register the element with JS:
var tTag = document.registerElement('t');
More about custom tags here
So to answer your question, the coding is not valid, unless they have registered the element with the browser with JavaScript.
Sometimes, its just easier to use a class :D
This may be completely wrong, but t is not a real HTML tag. Therefor I assume it is a XHTML item. So yes if it IS XHTML then that would be correct, and the class would not be (unless that was the name of it of course).
I have seen this code from the tutorial that I'm studying. I searched for the purpose of the p attribute inside the li tag but found no answer. What is the purpose of that p attribute inside the li tag?
$msgs .= "<li p=\"$no_of_paginations\" class=\"inactive\">Last</li>";
The purpose cannot be inferred from the code snippet. As such, the attribute, being not defined in any HTML specification or draft or browser-specific extension, has no effect beyond being stored as data into the p element node in the document tree.
Such an attribute, though invalid by the specs, can be used like any other attribute in styling (e.g. attribute selector .p) in CSS or in scripting. In this case, it is probable, but by no means certain, that the attribute is meant to be used in scripting to carry a number as its value, with that number inserted with some server-side code, so that this value can be accessed in client-side scripting, as relating to a specific element.
The recommended way is to use data-* attributes instead, such as data-p, to avoid any risk of clashing with attribute names that might be introduced in some future HTML version.
The default HTML(whichever version) namespace doesn't have a purpose for "p" inside a li tag. If there's another namespace declared then that's where it's from. Other than that, it's not valid by w3 standards.
It should be a custom attribute to use in JavaScript codes to get something.
That is just a custom tag used in some javascript functions
I want to add class for my option element. Is that valid to add class attribute in HTML option element?
Yes it is valid.
From the W3Schools website:
The <option> tag also supports the Global Attributes in HTML.
From which the class attribute is a part of. Please note that often, the option tag has formatting issues regarding the browser you are using, so styling it can be a little tricky.
EDIT: Since I wrote this answer, it has come to my attention that W3Schools probably isn't the most reliable source of good information. The previous answer isn't at all wrong, but it came from a source that has proven to be somewhat inconsistent/incomplete. As such, I think I should also append a more official link to this subject here.
The class attribute is valid for option according to the relevant part of the HTML 4.01 Recommendation. The HTML5 drafts, including HTML5 CR, are even more permissive: they allow class literally on any element.
My guess is that what you really wanted to ask was whether you can style some option elements differently from others, using class attributes and CSS. Then the answer is that this depends on browser – not due to problems with recognizing class attributes but due to implementations of that are partly immune to CSS as regards to styling items in a dropdown list.
Yes!
In HTML it is valid to add a class attribute to an option element [1].
However...
For CSS implications though, the usability is limited. Especially when it comes to the option tag because it is subject to the operating system's form control handlers [2]. This is the reason why code sample below will not actually work across all browsers.
HTML
<select>
<option>Centaur</option>
<option class="colored">Unicorn</option>
</select>
CSS
.colored {
background-image: url('my-colorful-background.png'); // e.g.: Apple doesn't recognize this rule
}
For JavaScript implications (w/jQuery), the usability is fully supported when it comes to the DOM objects but still bounded with the CSS implications as stated above. Thus, DOM-manipulation code like so... will work.
HTML
<select>
<option>Centaur</option>
<option class="colored">Unicorn</option>
</select>
JavaScript with jQuery
var label = jQuery('.colored').html();
console.log( label ); // outputs Unicorn
References
W3C - HTML 4.01 Specification, Forms, The SELECT, OPTGROUP, and OPTION elements
MDN - Styling HTML forms, Why is it so hard to style form widgets with CSS?
Yes class belongs to global attributes. Any element can have it.
Source: http://www.w3.org/wiki/HTML/Attributes/_Global
A simple question: why should we add the id into our HTML tags if they work perfectly well without them? I know that one of their uses is being able to navigate though the page via hashtags (#), but is there any other use for them?
Uses of id attributes in HTML
As a target for a fragment identifier on a URL.
As a target on form controls for the for attribute on <label> and <output> elements.
As a target on <form> elements for the form attribute on form associated elements.
As a target for element references via the microdata itemref attribute.
As a target for element references via some ARIA attributes including aria-describedby, aria-labelledby and 4 others.
As a target on <th> elements for the headers attribute on <td> and <th> elements.
As a target on <menu> elements for the contextmenu attribute.
As a target on <datalist> elements for the list attribute on <input> elements.
As part of a hash-name reference to <map> elements for the usemap attribute on the <img> and <object> elements.
As an identifier of an element in a CSS selector
As an identifier of an element for JavaScript processing
They're most often used to uniquely identify elements for styling (CSS) and scripting (JavaScript et al) purposes.
But if you're asking about HTML and only HTML, then one example where declarative IDs are useful is associating a <label> with its <input>, <button> or <textarea> control via its for attribute:
<label for="ex">Example field:</label>
<input type="text" name="ex" id="ex">
Without assigning this attribute, activating the label does nothing, but when you pair both elements together using for and id, activating the label causes its control to gain focus.
The other way to associate a form label with its control is to contain it within the label:
<label>
Example field:
<input type="text" name="ex">
</label>
But this doesn't always suit the structure of a form or a page, so an ID reference is offered as an alternative.
Other circumstances where an id attribute serves a function are covered extensively in Alohci's answer.
You can use IDs to acces your divs from javascript, CSS and jquery. If you don't use IDs it will be very difficult for you to interact with your HTML page from JS.
AFAIK, they are used to uniquely refer to a tag.And makes it easier for you to refer to the tag.
IDs are used for accessing your elements in CSS and JavaScript. Strictly speaking IDs should uniquely identify an element. You can also use class attributes to identify groups of elements.
The id attribute provides a unique identifier for an element within the document. It may be used by an a element to create a hyperlink to this particular element.
This identifier may also be used in CSS code as a hook that can be used for styling purposes, or by JavaScript code (via the Document Object Model, or DOM) to make changes or add behavior to the element by referencing its unique id.
see http://reference.sitepoint.com/html/core-attributes/id
for more info on class see here: http://reference.sitepoint.com/html/core-attributes/class
it is there to help you identify your element in java-script code.the getElementByID function in java-script give the handle of an element with specific ID for you.like this.
var someElement = document.getelementById("someID");
// do whatever with someElement;
I myself also prefer class for styling through CSS but sometimes you need an element to be unique. For accessibility reasons you use id to input elements to "connect" its label to it by using for attribute. And for Javascript it's much simpler to select an element if it has got id attribute.
The main reason I use ids for my HTML elements is the fact that their selection is faster, in Javascript with getElementById and in CSS as well, using the #id class.
Of course, I'm not saying this is always a good idea, especially in CSS, where having classes based on ids can cause a lot of redundancy, it's just one of the reasons
First, only add ID when you will need to use them. In most cases id is used to do other things like:
A reference for scripts,Selecting elements to apply scripts to,
A style sheet selector, selecting elements for styling
Named anchors for linking to, which is what u called page navigation
So simply because in most cases you will want to do something to or with your content in any tag, its good to put an identifier, that is the id attribute.