Rich-text Reply

Changing CSS through XPath

kkhvi 02-17-15

Changing CSS through XPath

Hi there

 

I'm trying to create a splittest on a webshop, but they are using a gridbased website template, which is causing some trouble.

 

I'm trying to change the color of the shopping cart (tried this through UI and in variation code window), but when I change it, the changes are made on several elements on the page, where it's not supposed to be changed.

 

So now my question is:

 

Can I change the styling on a particular object using XPath or CSS Path in the variation code?

 

If yes... How?

 

I've tried this, but with no luck.

 

$('/*[@id="ng-app"]/header/div/div/div[2]/div/div[2]/div/div/a').css({"background-color":"#007f4e","border-style":"none"});

I know this probably is a bad syntax, but I'm kinda new to this kind of approach.

 

I retrieved the XPath from the developer tools in Chrome, so I'm guessing that is correct.

 

So I hope you guys can help me.

 

 

Level 2

td_evans 02-17-15
 

Re: Changing CSS through XPath

I haven't seen this syntax before, but it sounds like you're not being specific enough with your selectors. Can you increase the specificity by looking at some parent elements which only apply to the shopping cart?
Thomas Evans
Technical Product Manager - Conversion @ Secret Escapes

Level 2
michaelwei 02-25-15
 

Re: Changing CSS through XPath

Hi kkhvi,

Using the CSS path is definitely preferable to XPath, as XPath was designed for XML documents. What happened when you tried using the CSS Path from Chrome's developer tools?

Also, when you try to select elements by typing that path into Chrome's Javascript console, are more than one element selected? This will help you debug and see if multiple elements are being addressed by that selector, as td_evans mentioned.
Optimizely
JDahlinANF 02-27-15
 

Re: Changing CSS through XPath

In my experience, the value of the XPATH varies by browser.

If you share a link to the page and let us know specifically which element you want to change, someone can hook you up with a good jQuery selector for it.