1

I've downloaded this slider:

http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/

What I want to do is to make the dot (bullet) for each slider a specific color (first is red, second is blue, etc), and not to be white for all slides.

The class that controls this issue is .da-dots span.da-dots-current:after (in style.css if you downloaded the files above).

The problem is how to change the background property of .da-dots span.da-dots-current:after in the index.html (or index.php) file?

The issue is that the slides are actually a number of DIV's that are listed in the source code and animated using the jQuery slider above.

My index.php contains: http://codepad.org/6Xoelift

Improve this question
1
  • I would assign a class to the div that has the style you wish. Give a different class to the div based on a condition. Commented Aug 30, 2013 at 14:46

1 Answer 1

Reset to default
1

Assuming you support only browsers handling CSS3 selectors, you can use the nth-child selector :nth-child(1), :nth-child(2), :nth-child(3), … to style each dot differently.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

You mean to do this : .da-dots span.da-dots-current:after:nth-child(1) { background: white; } .da-dots span.da-dots-current:after:nth-child(2) { background: red; } This didn't work :(
I think you can't use :nth-child with :after because this is a pseudo-element
The class .da-dots-current might be wrong because it should logically concerns only the current slide. It's difficult to help you without live code to play with.
Also your syntax is wrong, selector comes before pseudo-element like this: span.da-dots-current:nth-child(2):after

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.