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.
Related
I am trying to create a set of boxes. I want to try and see if I can set the size of the box based on its position within the group.
Currently this is possible if I know the number of boxes beforehand and use the :nth-child() selector and the appropriate position.
Since CSS already has the capability to find the position of the element in the group, is it possible to use this positioning as an input for the size.
So for example something like
#boxes:nth-child() {
height:calc(n * 10);
width:calc(n * 10);
}
This purpose can easily be achieved using a server side code or even Javascript but just curious to understand if we can use CSS to achieve this, using calc or any other feature.
In CSS Selectors Level 3, there are no methods for targeting an element then, using variables corresponding to that element's position within a group, tailoring styles for that element.
In CSS, the calc() function does not allow variables. Only mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) are allowed as component values.
With Sass, however, a CSS preprocessor, using variables in a calc() function is possible.
References:
CSS Selectors Level 3
8.1. Mathematical Expressions: calc()
Sass Variable in CSS calc() function
Sass Variables
You can't do this in pure css, but you can with scss.
For example:
#for $i from 1 through 5 {
.box:nth-child(#{$i}) {
height: 50px * $i;
}
}
You can play with code here.
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.
I've inherited the following CSS code to initially hide the latter elements of a series of paragraphs and a series of list items.
.profileSection p:nth-of-type(n+2) {
display: none;
}
.profileSection li:nth-of-type(n+6) {
display: none;
}
Obviously, this code does not work in IE8. What is an alternate way to hide these elements?
Here is a discussion on it:
http://www.thebrightlines.com/2010/01/04/alternative-for-nth-of-type-and-nth-child/
The writer mentions that you can reference specific children element by using
tagname + tagname + etc
Or get generic children by using
* + * + etc
I personally would just add a special class to those items.
+, the adjacent sibling selector, would allow you to select all siblings which are immediately adjacent. In your case: .profileSection p+p. (If you must do this, consider wrapping it in something to prevent other browsers from seeing it, like conditional comments.)
But + won't help if your markup contains something other than <p> elements right next to each other. For example:
<p>Alpha</p>
<h4>Header</h4>
<p>Beta</p>
If you don't already have some kind of shiv or moderizr functionality on the site (which would help with many other similar issues), it would be easiest to add a special class to the elements, and select using that class.
You can also try downloading and including selectivizr, which makes css3 selectors work in IE6-8
I need to apply a style on a recurring element which has a fixed prefix in its ID. e.g. for the generated ID old-price-520, old-price is the prefix, and the numeric suffix will vary.
How do I apply styles to these elements, or how do i refer to them using CSS?
Here's an illustration of what i'd like to do:
#old-price-* {
// some styles
}
div[id|="old-price"]
would select all div Elements with id = old-price-*
Handycap is it's performance which is pretty poor, compared to the power of the # id-selector. Also it has a lower specificity than the normal #.
edit:
fiddle
You can try to use CSS3 attribute selectors like this:
div[id^=old-price]
{
// some styling
}
However you will need to add some javascript for browsers that do not support it
you can do so with the 'begin-with' attribute selector in CSS3, like so:
[Attr^="value"]
and the concrete example would look like this:
*[id^="old-price-"]
there are probably more methods of achieving the same outcome, a quick search came up with this attribute selectors depiction for a quick reference.
You can use jQuery to do this with an 'Attribute starts with selector'
http://api.jquery.com/attribute-starts-with-selector/
I am finding it useful to define 'marker' css styles such as 'hidden' or 'selected' so I can easily mark something as hidden or selected - especially when using a tag based technology like ASP.NET MVC or PHP.
.hidden
{
display:none;
}
.newsItemList li.selected
{
background-color: yellow;
}
I don't especially feel like reinventing the wheel here and wanted to know what other things like this are useful or common - or if there are any pitfalls to watch out for.
Should I look at any specific css frameworks for other things like this? Plus is there a name for this type of css class that I can search by.
I agree with the other posters who say only to define what you need, rather than bloating your code with a bunch of unnecessary classes.
That being said, I find myself using the following on a constant basis:
.accessibility - visually hide elements, but keep them intact for screenreaders and print stylesheets
.clear - tied to Easy Clearing
.first-child and .last-child - easily assign styles to the first/last item in a container. This has been a lifesaver many times, and I prefer it over the poorly-supported :pseudo selectors
.replace - tied to Phark IR for transparent image replacement
Finally, I dynamically assign .js to the <html> element with
<script type="text/javascript">if(h=document.documentElement)h.className+=" js"</script>
This will allow me to define .js (rest of selector) styles to target only browsers with JavaScript enabled.
Let me give you an answer from a very novice web developer who has recently considered using CSS classes as "markers". Please don't take this as a definitive answer, as I may be completely wrong, but look at it as another point of view.
I was going to use some marker classes, too. I created one called .center to center the elements in a DIV tag. However, I was struck with the idea that I'm looking at CSS all wrong. I reasoned that CSS is supposed to define how an element is to be displayed without having to change the HTML page. By using marker classes, like .center for example, I would have to change BOTH the CSS and HTML if I wanted that DIV tag to be right-justified next month. So instead, I created a .latestHeader class (the DIV is to hold the "latest information" such as a news item), and in that class I set the text to align center. Now, when I want to change the justification of the text, I simply change the CSS for that DIV and I don't have to touch the HTML.
In regards to your question about CSS frameworks...
Personally I've always found the W3C has the most complex but also most accurate answer to any CSS question.
After many years of programming and playing around with CSS/HTML/PHP I agree with the above comment.
There is no harm in defining a marker for something to be centered or right-aligned using something along the lines of a '.center' or '.righths', but keep in mind as above that if you want to change a whole slab of text your work will be increased because you have to edit both CSS and HTML.
Defining the format for a whole section will mostly likely work out more logical, because if you want to change the section months down the trail, you just have to edit the format of one CSS declaration as opposed to editing each individual article.
CSS was however designed as the ultimate styling language which could allow an administrator to make a website look exactly what they want it to. Keep in mind though that excess CSS will increase the load on a server, will increase the time before your client sees your page and in line with the 'feng shui of web design' it is possible to go overboard with too much styling.
You should really grow this list on a need basis instead of soliciting a list of generic classes across the board--you'll only end up with bloat. If you want to avoid reinventing the wheel the look into some CSS frameworks (blueprint or 960). In some respect, generic classes like .center { text-align:center } do have some level of redundancy but often times they're needed. For example the following pattern which is all too common but should be avoided:
element.onclick(function(e){ this.style.backgroundColor = 'yellow' }
That's bad because you really ought to be using:
element.onclick(function(e){ this.className = 'highlight' }
The latter allows you to modify your styles by only touching the CSS files. But if a CSS class name has only one style element then you should probably avoid it because it doesn't make any sense to have it (.hidden in your example) and call it directly instead:
element.onclick(function(e){ this.display = 'hidden}
I often find myself keeping two classes in all of my stylesheets: "center" (which simply applies text-align: center;, and a float-clearing class that applies clear:both;.
I've considered adding a "reset" statement to all my styles, but haven't had a need for it yet. The reset statement would be something similar to this:
*
{
margin: 0;
padding: 0;
}
I reuse these often enough to include them in just about everything. They're small enough so I don't feel they bloat the code at all.