Is there any way to shorten a HTML element tag like this:
<input id=ctl00_ctl32_g_9bd32d9e_a30e_48f8_af0e_4c4b7e8ba1f5_createSuggestion>
In CSS so that I don't have to reference the entire thing and just use the createSuggestion part of it like this:
input createSuggestion{
margin-left:10%;
}
For instance, when producing a SQL query, sometimes a 'like %createSuggestion' would be used.
Any ideas?
You could achieve that by attribute selector as follows:
input[id$="createSuggestion"] {
margin-left: 10%;
}
6.3.2. Substring matching attribute selectors
[att$=val] Represents an element with the att attribute whose value
ends with the suffix "val". If "val" is the empty string then the
selector does not represent anything.
Add ClientIdMode="Static" in your server-side control to prevent that entirely.
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).
This is my html code:
<label for="tx_alterneteducationcatalog_subscriberadd[newSubscriber][gender]"
class="error" id="tx_alterneteducationcatalog_subscriberadd[newSubscriber]
[gender]-error">This field is required.</label>
this is my css code:
#tx_alterneteducationcatalog_subscriberadd[newSubscriber][gender]-error{
display: none !important
}
For some reason the float right not working. Even in the firebug it is not showing that I put a float:right !important. Why?
The selector
#tx_alterneteducationcatalog_subscriberadd[newSubscriber][gender]-error
is not valid. The square brackets denote attribute selectors, so what you have is
#tx_alterneteducationcatalog_subscriberadd
[newSubscriber]
[gender]
... followed by, quite literally, a syntax error in -error because an identifier is not expected there.
If you escape all the square brackets, the entire ID selector will be parsed correctly:
#tx_alterneteducationcatalog_subscriberadd\[newSubscriber\]\[gender\]-error
... but I prefer just using an attribute selector to match the ID instead:
[id="tx_alterneteducationcatalog_subscriberadd[newSubscriber][gender]-error"]
You could also select by the for attribute and the .error class rather than id, but it's not clear to me why a validation error would be marked up in a label element in the first place. The text, for one, says absolutely nothing about what field it is "labeling" exactly; all it says is that it's required.
I just noticed there's a line break in your id attribute. If this is how your actual markup appears exactly, then your markup is invalid. That being said you should still be able to account for it in your CSS with the escape sequence \a (see section 4.3.7 of the spec):
#tx_alterneteducationcatalog_subscriberadd\[newSubscriber\]\a\[gender\]-error
[id="tx_alterneteducationcatalog_subscriberadd[newSubscriber]\a[gender]-error"]
Because [] is used to denote attributes in CSS selectors, you cannot use them as classnames or ids unless you use the attribute selector to match the string as such:
*[id="a[b]-c(d)"]{ color: yellow; }
<div id="a[b]-c(d)">Selected</div>
This is not recommended and it's better to use classes for this and restrain them to the relevant conventions.
I finally managed to make this work by using this code:
label[for="tx_alterneteducationcatalog_subscriberadd[newSubscriber][gender]"]{
float: right !important
}
and there was a FTP issue. After uploading it puts me some weird characters. After removing it. It works
Square brackets are not valid characters for css identifiers: http://www.w3.org/TR/CSS21/syndata.html#characters
Using the following CSS, why am I not able to target the 3 following anchor tags?
a[href~="checkout"] { /* Do something. */ }
<a href="http://shop.mydomain.com/checkout/onepage/">
<a href="https://shop.mydomain.com/checkout/onepage/">
<a href="https://shop.mydomain.com/checkout/onepage/?___SID=S">
What am I doing wrong in my CSS selector? I'm trying to select a partial match using ~= for all URLs containing the word "checkout."
Try this
a[href*="checkout"] { /* Do something. */ }
You have to use *, which means contain - see reference.
Also, don't forget to close anchor tags
</a>
Working JSFiddle
a[href~="checkout"]
matches elements where in a whitespace-separated list of words one of these is exactly "checkout".
See W3C Docs for Selectors Level 3:
[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.
Source: http://www.w3.org/TR/css3-selectors/#attribute-selectors
If you want to match all elements where attr contains string, use
[attr*=string]
A CSS "contains" selector is
td[class*="foo"]
I can select multiple classes with
td[class*="foo bar"]
This however will fail for <td class="foo baz bar" />
How can I do a CSS "contains" wildcard select?
BTW: I cannot use td.foo.bar
The selector you're looking for is as follows, see this question for more details.
td[class*="foo"][class*="bar"]
However, if you need to use selectors like that then it's often a sign that your class name logic is bad.
Honestly I don't know what you mean by "failing" td[class*="foo bar"] selector as it seems working to me in your particular case.
However, since the class names are separated by white spaces, you could use multiple [attr~=value] attribute selectors to select the elements having the classes as follows:
td[class~="foo"][class~="baz"] {
background-color: gold;
}
WORKING DEMO.
From the MDN:
[attr~=value] Represents an element with an attribute name of attr
whose value is a whitespace-separated list of words, one of which is
exactly "value".
Visit : CSS-Tricks (CSS Attribute Selectors)
From the above for finding a match of a given string to the string in the class specified according to your question , the only option I find working and correct is * and ~.
1. Demo for *
2. Demo for ~
Multiple attribute matches
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.