Question

I have some warped text I’m using, generated by http://csswarp.eleqtriq.com/. It creates all the CSS and HTML for the warping, I’m wrapping the spans with an <a> tag whose class is used for styling and a jquery function.

The problem is, if I wrap the spans in the <a>, which I need because these warped words are my links, all the styling (positioning most importantly) just vanishes…If I remove the wrapper from the spans, the style goes back to normal and it looks warped etc..

I’ve written the jsfiddle here for my problem, http://jsfiddle.net/WJDwP/2/.

Answer 1

Change

#warped>span[class^=w]:nth-of-type(n+0)

to

#warped span[class^=w]:nth-of-type(n+0)

The > combinator selects only elements that are direct descendants. Once you put the <a> element between them, they’re no longer direct descendants.

So instead we should use the good old descendant selector.

References

• Child selectors
• Descendant selectors