0

I'm sure this has been asked, but apparently I can't phrase it quite right for a search.

I'm stuck using a sprite for something, and I'd like to automatically calculate the background position based on the position on the element in the HTML.

Here's some code that hopefully makes more sense (this doesn't actually work, it's just to demonstrate what I want to do):

HTML:

<ul>
    <li><!--first item--></li>
    <li><!--second item--></li>
    <li><!--third item--></li>
</ul>

CSS:

ul li {
    background-position-x: (number of previous LIs * 45px) + 45px;
}

What makes me think this may be possible is a bit of code from this article:

:nth-child(N) - Selects elements based on a simple provided algebraic expression (e.g. 2n or 4n-1). Has the ability to do things like select even/odd elements, "every third", "the first five", and things like that.

JacobTheDev
  • 17,318
  • 25
  • 95
  • 158
  • Think it has been answered before. http://gg.gg/6o4x – dnelson Jun 07 '13 at 21:40
  • I think this was already answered here: http://stackoverflow.com/questions/10378292/is-it-possible-to-do-mathematics-inside-css Basically, you need to use LESS or SASS or something similar. – Jsownz Jun 07 '13 at 21:39
  • The algebra in :nth-child is part of that selector's syntax, not an indication of a general feature in the language. – IMSoP Jun 07 '13 at 21:45

2 Answers2

4

You cannot use this in CSS, except for some specific cases, (like the N-th element, you already mentioned). But you can use other languages that are 'compiled' to CSS. I'm using SCSS, short for Sassy CSS, which is SASS (Syntactically Awsome Style Sheets), but then in a CSS-like syntax instead of the SASS-syntax, which is different (doesn't use curly braces for one).

On http://sass-lang.com/, both are explained.

I'm using Leafo's great SCSS to CSS compiler. You can type the SCSS, and the compiler will generate CSS on demand.

The great thing about SCSS, is that it is compatible with CSS. So you can start by renaming your CSS files to .scss. After that, you can enhance them with variables and algebra.

However, I've often searched for ways to define '100% - 10px' myself, but I believe this is not possible in CSS. Therefore, it is also not possible in SCSS. Since everything is compiled to CSS, you can only do things that are possible in CSS in the first place. SCSS only helps you to make it more easy.

GolezTrol
  • 114,394
  • 18
  • 182
  • 210
  • 1
    Very interesting. I have a coworker who's been raving about SASS, I may look in to it this weekend. Thanks. I'll mark this as the answer in 4 minutes (when it'll let me). – JacobTheDev Jun 07 '13 at 21:48
  • With CSS3 you can do something like this "100% - 10px" as CSS3 has the calc-function. So you can do e.g. "height: calc(100vh - 50px)" – Jesper Jan 14 '19 at 14:04
0

Some really simple stuff you can do (check this post) CSS value as mathematical expression

I would strongly suggest SCSS though (hate SASS syntax :D ). Even better try compass ;)

also, in your case... as always... depends on your appetite! (SCSS also supports loops... ;)

li:first-child {properties...}
li:nth-child(2) {properties...}
li:nth-child(3) {properties...}
li:last-child {properties...}
Community
  • 1
  • 1
ptheofan
  • 2,150
  • 3
  • 23
  • 36