0

I have this styling:

section.tipos .content > div:before {
    background: none repeat scroll 0 0 #DDDDDD;
    content: " ";
    height: 10px;
    left: 32%;
    position: absolute;
    top: -10px;
    width: 10px;
}

Which works fine,

But when some events happen I would like to change the left property for a different %

I know this could be achieved (for sure) using classnames or styles. But my boss doesn't like much the class names unless they're 100% needed.

Question is: Can I alter the css for a pseudo selector from javascript? Something like this (but that works)

$('section.tipos .content > div:before').css({ 'left' : 50+index*17});
Ms. Nobody
  • 1,219
  • 3
  • 14
  • 34
Toni Michel Caubet
  • 19,333
  • 56
  • 202
  • 378
  • unfortunately you need a workaround for this, like appending a new ` – Spokey Jun 14 '13 at 12:35

2 Answers2

1

No you can't do that. The :before and :after pseudo-elements are not available in any way to your Javascript code.

The best work-around you can hope for is to use your Javascript to change the class of the main element, and have separate CSS code for the :before pseudo-element depending on which class it has.

Then you could have CSS code like this:

section.tipos .content > div.newClass:before {
    ....
}

However, I note that you're wanting to set the width to a calculated value; that might be tricky using the above technique. CSS calc() may help, depending what index is being used for, and depending what level of browser support you need.

Spudley
  • 166,037
  • 39
  • 233
  • 307
0

Try appending '%' to the css style value:

$('section.tipos .content > div:before').css({ 'left' : 50+index*17 + '%'});
gitaarik
  • 42,736
  • 12
  • 98
  • 105