Im trying to target a number of specific disabled textboxes to alter the color of the text. the format of the ID is:
id="jc-cr-lmid-Total-1-RangeFr"
Where the number changes from 1-5 depending on the amount of textboxes on the screen.
Is there any way to insert a wildcard for the number while keeping the -RangeFr section of the selector?
I have tried:
id*=["jc-cr-lmid-Total-*-RangeFr"]:disabled{
//Change text color
}
But this hasn't worked
Yes, sort of; you can use attribute-starts-with and attribute-ends-with notation:
[id^="jc-cr-lmid-Total-"][id$="-RangeFr"]:disabled{
//Change text color
}
Note, though, that this allows any sequence of characters between the required start and end, as CSS has no concept of regular expression, so it'll match:
id="jc-cr-lmid-Total-1-RangeFr"
id="jc-cr-lmid-Total-1000-RangeFr"
id="jc-cr-lmid-Total-anyOtherSequenceOfCharacters-RangeFr"
In all honesty, you'd be better off simply using a class for this, which would be far more simple and reliable.
References:
CSS attribute selectors.
Related
Here is my original CSS to apply different colour backgrounds:
.one-colour {
background-color:#153a63;
}
.two-colour {
background-color:#f16c24;
}
.three-colour {
background-color:#337db9;
}
I know you can do multiple CSS classes such as .one.two.three {...}
But is my CSS condensed down as much as possible? and I don't mean just putting the code onto one line to make it "shorter".
But is my CSS condensed down as much as possible?
Yes(ish)
Each CSS rule is setting the same property style to a different value. As such, you have condensed the ruleset to the minimum number of rules to allow this level of distinction. If anything, you could simply change background-color to just background- if background properties aren't set in other rules which this could override.
*Although my predisposition is that this should be a comment, I guess in essence it is effectively an answer to your question.
Additional Methods Update:
As mentioned in the comments, there are some other (overkill?) methods for condensing:
Put everything in a single line, remove whitespace (minify)
Shorten your class names, e.g (.one-colour -> .c1), as noted below this is a subjective, context sensitive decision
The last style setting in a CSS rule does not require a trailing semi-colon in order for the rule to process, so you can also remove these
Convert your HEX colors to their 3 digit counterparts (approx), #036, #F63 and #36C
Depending on how you use these classes, there might be a way to remove one of those classes.
If you use those classes in a particular container - you could apply one of the colors to the container and then override it only on 2 of the inner divs.
Again, it depends on how you use the classes.
Yes, I would say so. If you wanted to start doing things to all the classes at once (like add a black border to them all) then you could combine that onto one line, as you suggested. Otherwise, it looks as compact as it's going to get at the moment. I can't suggest an improvement.
I've the following issue: there is <select> option in my website, and it have 3 different logic data in one <option> which needs to be separated like this:
I was thinking about word-spacing, but as you can see there is some spaces in last data, so it will not work. :after and :before will be not good either. And as I know there is no way to insert <div> or <span> inside <option>. I was wondering is there any other ways to implement this, because currently I have only bad solution with .
If you want to present option elements in a tabular manner, as it seems, then the clumsy way of using no-break spaces and a monospace font seems to be the only way.
Consider using a different approach, such as a set of radio buttons with associated labels and other texts. Then you can use a table element.
I did a few changes to a library called Chosen ... I think it's just what you need.
DEMO
This is the usage in JS:
$('.chosen-select').chosen({
width: '250px',
html: function(option){
return $(option).data('html');
}
});
I am using CSS2.1 counters to apply numbers to men on the board in the implementation of a board game whose board diagrams use HTML and CSS, by doing something like:
.ply {counter-increment:main;}
.move:before {content:counter(main);}
With HTML structured as
<ply>
<move...>
<ply>
<move...>
</ply>
</ply>
All this works fine, but I would like to conditionally style the counter value differently if it's two digits in length (squeeze the two digits together with a negative letter-spacing, for example). Any ideas about how to do this or workarounds?
It turns out that we can retrieve the value of the counter in question with getComputedStyle, using the second argument which specifies the pseudo-element for which the counter was specified as the content:
value = window.getComputedStyle(elt, ':before').content;
Then we can apply a style such as
if (value>=100) { elt.style.letterSpacing = "-2px"; }
Which is what we want, although it requires traversing all the potentially affected elements with JS whenever they might have changed.
You can't do this using only CSS as there is nothing in css selectors about the size of the content.
That could be an anwser but if you want a workaround, it's possible using javascript.
Here's an example (using jquery) in which I change the color of the text when it's more than 2 chars long :
$('.move').each(function(){
if ($(this).text().length>2) $(this).css({color:'red'});
});
Demonstration : http://jsfiddle.net/dystroy/nKVvG/
I know it's not really what you wanted, but I made some research and couldn't find any css only way to do this, basically because as stated by #dystroy
"You can't do this using only CSS as there is nothing in css selectors about the size of the content."
So there's no way for the css to know how long is the content in the :before part.
So I guess you should really use jQuery a bit. Try this jsfiddle.
Basically what you can do is iterate over the elements you're indexing with the css counter and then use the .index() attribute to see wheter their counter is double or triple digit.
Remember .index() starts from 0 when the counter starts from 1, so in the double digit condition check you should put
if($(this).index() > 8) ...
because counter = index + 1 -> if(counter > 9) = if(index > 8)
If the counter is double digit then you add a class to your movie element so you can freely style it in your css.
I think what you are looking for is discussed in this post: Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery. I don't think you can do this via plain css, but I may be mistaken.
I am using unobtrusive validation in an ASP.Net MVC3 app. I would like to style the label elements associated with required elements in a certain way.
My concern is not to tweak the visual indicators around the required field itself, but to modify the appearance of a different element based on the attributes of this element.
Now, I believe it would be possible to style the elements themselves just with CSS by using a CSS rule whose selector applied to all elements with the [data-val-required] attribute. It would look something like this:
input[data-val-required] { color: red; }
But is it possible to style the labels? To say (with a CSS selector) that a CSS rule applies to all label elements whose for attribute points to an input element that has the [data-val-required] attribute?
I'm currently applying styling with a little bit of jQuery currently, and it works nicely. But it would be even nicer if I could just set up a CSS rule and be done with it.
You can't get there from here. As #vlgalik says, the only CSS options are selectors that are 1) not supported on some browsers, and 2) have limited ability to find other elements, forcing you to construct your markup to comply.
So, your current solution -- use JQuery to find the labels and their corresponding inputs -- is your best bet.
However, I'd approach your jQuery solution in the opposite direction: first find all the inputs matching input[data-val-required], and for each of those, get its ID, then select the corresponding label: label[for="<id-from-input>"] -- that seems like it will be less work. But that's an optimization; if you don't have a lot of labels and inputs on the page, either direction will work fine.
This jsfiddle example is using CSS3 selectors, but there is a downside that the label must follow after input element in the HTML (can be placed before using addition CSS like in example).
Much simpler and effective would be to give the label element class attribute like:
<label class="required">
or to place the label input pair in div element:
<div class="required">
<label for="input1">Label 1</label>
<input id="input1" ... />
</div>
and apply desired CSS styling by simply using:
.required label {
...
}
The example you gave should be very close to what you would need to do. Try using this:
input[for=data-val-required]{}
This selector is based off of the attributes of a given tag. That should give you what you are looking for.
In CSS we can use both ID and class. is there any pros and cons if i use Class always instead ID in terms of Semantic, Web standards- W3C , SEO , Accessibility and future maintainability?
One big difference: in CSS, a class has a lower importance level than an ID.
Imagine that each specification in a CSS declaration added a certain number of points to that declaration's value. Let's say the points go something like this (totally made up, but whatever):
Tag name ('a', 'div', 'span'): 1 point
Class name ('.highlight', '.error', '.animal'): 10 points
ID ('#main-headline', '#nav', '#content'): 100 points
So, the following declarations:
a {
color: #00f;
}
.highlight a {
color: #0f0;
}
#nav .highlight a {
color: #f00;
}
are worth 1, 11, and 111 points (respectively). For a given tag, the declaration with the highest number of points that matches it "wins". So for example, with those declarations, all a tags will be blue, unless they're inside an element with the "highlight" class, in which case they'll be green, unless that element is inside the element with id="nav", in which case they'll be red.
Now, you can get yourself into tricky situations if you're only using classes. Let's say you want to make all the links in your content area blue, but all the links in your foo area red:
.content a {
color: #00f;
}
.foo a {
color: #f00;
}
By my previous (made up) scale, those both have 11 points. If you have a foo within your content, which one wins? In this situation, foo wins because it comes after. Now, maybe that's what you want, but that's just lucky. If you change your mind later, and want content to win, you have to change their order, and depending on the order of declarations in a CSS file is A Bad Idea. Now if, instead, you had the following declaration:
#content a {
color: #00f;
}
.foo a {
color: #f00;
}
Content would always win, because that declaration has a value of 101 (beating foo's 11). No matter what order they come in, the content declaration will always beat the foo one. This provides you with some very important consistency. The winners won't arbitrarily change based on changing orders in the file, and if you want to change the the winner, you have to change the declarations (maybe add a #content in front of the .foo declaration, so it will have 111 points).
So basically, the differences in values are important, and you get a lot of inconsistency and seemingly arbitrary winners if you just use classes.
I know i'm not the 'norm' here and i'll get thumbed down for this... but i use classes exclusively and only ever use ID's for scripting :)
This creates a clear line of seperation of designer and coder related tweaks and changes, which is very handy for us!.
Also we have some .NET web form coders (even though we are moving all sites to MVC) and as .NET controls take over ID's to script them dynamically using ID's for CSS is a pain... i'm not a fan of using #ct00_ct02_MyControlName in css files and even if i was changes to code can break the CSS! Classes works GREAT for this.
Some PHP libs others in the company are using also need to use dynamic ID assignment, this creates the problem here too. again Classes work GREAT here.
As more and more of these dynamic outputs and languages use up the ID's (for exactly what they are really intended for... identifiing an element to work with it) it can be more and more of a pain to work with IDs in CSS.
It's seems to me that everyone wants to use them simply cause they think they should, becuase they are 'there', i offer the idea that ID's are not there at all for CSS and their use in CSS is just there as an extra helper via the selector and their real use is scripting.
There has not been a single instance where i needed an ID for css use or even a single instance where it would have been eaiser.
But perhaps i'm just used to it and thats why? My HTML output is small, my CSS files small and direct. Nested elements work in all browsers as i expect, i dont have issues and can create complicated nicely rendered pages. Changes take mere minutes as i can apply multiple classes to an element or make a new one.
ID's for scripting, CLASS for css... works a treat.
Obivously there is no major issue (Even in a team of designers and coders) in using them both for css as we all get used to what we get used to :) but the way we work it outputs the expected results fast, and noone can step on anyones toes even in anonomous sharing enviroments.
My biggest one would be from the future maintenance point of view. Not only is it nice to know that a style is only used for one element on a page, but if you ever start integrated javascript into your page its nice to be able to access elements quickly using their IDs rather than try and access them by their class's.
If you're using a decent javascript library (like prototype or jQuery) then no, I can't think of any technical reasons why this would matter. However, it might help your own internal thinking and consistency to think separately about whether it is an attribute-like collective characteristic (=> class) or a specific item (=> ID).
Use id when an element is unique on a page and you always expect it to be. Use class when multiple elements will be assigned the value of the attribute. It's true that it may not make a big difference from a purely CSS perspective, but from the JavaScript or Selenium perspective, it's a big deal to be able to uniquely identify elements by their id attribute.
In simple we can define id and class as below
ID = A person's Identification (ID) is unique to one person.
Class = There are many people in a class.
Use IDs when there is only one occurence per page. Use classes when there are one or more occurences per page.There is no hard rule on when to use ID and when to use Class. My suggestion is to use class as much as possible for maximum flexibility, with the only exception being when you want to use Javascript's getElementByID function, in which case you need use ID.
IDs are good for elements that need to be accessed from JavaScript. But the IDs must be unique in the page according to w3 standards, that is:
you cannot have two <div id="Header"> in one document
you cannot have a <div id="Header"> and <p id="Header"> in one document
Class names are good for elements that do not need to be accessed from JavaScript (although it is possible to do so). One class name can be used for multiple elements, and one element can have more than one class names attached to it. Class names therefore allow you to create more "generic" css definitions, for example:
<div class="column">
<div class="column left-column">
<div class="column right-column"> -- all three can be in the same document
You can mix IDs and classes together.
To summarize: use IDs for specific cases; class names for generic cases; and cascad classes for elements that share some general properties but not all.
See following:
CSS Best Practice about ID and Class?
For SEO: It will make absolutely no difference to seo at all.
You should choose names that reflect the semantic content of that section. eg: id="leftMenu" class="footerNotes"
Don't use any underscores in your class and id names (common mistake).
The only difference between classes and ids, except for the fact that an id MUST be unique and a class does not, is that the browser can use an element's id for navigational purposes. For example, this page has a logo with id="hlogo". If you append to this page's url the hash #hlogo, like this https://stackoverflow.com/questions/1878810/is-there-any-pros-and-cons-if-i-use-always-css-class-instead-css-id-for-everythi#hlogo, the browser will automatically scroll to the logo.