translating css3 selector to javascript

Question

I need to adapt some css code to javascript.

I have next code, and I need to adapt it to javascript objects, through .style of javascript object.

With attributes, I'm doing well, but with selectors I have to develop with javascript actions (for calling it in anyway) :)

.cr-container input:checked ~ .cr-bgimg div span{
    -webkit-animation: slideOut 0.6s ease-in-out;
    -moz-animation: slideOut 0.6s ease-in-out;
    -o-animation: slideOut 0.6s ease-in-out;
    -ms-animation: slideOut 0.6s ease-in-out;
    animation: slideOut 0.6s ease-in-out;
    }

What don't you understand? What are you having trouble with? Have you looked at `querySelectorAll()`? — SLaks, Jun 11 '13 at 15:07
I dont understand why people up to the cloud and are such as offensive...My question is clear: traduce/translate that code to javascript...I obtained, by style.setProperty("-webkit-animation", "left 150px"); and style.setProperty("-moz-animation", "left 150px"); for mozilla firefox...thanks — Daniel Garcia Sanchez, Jun 13 '13 at 08:58
It's not clear whether you're asking how to set properties, find matching elements, or update new elements. Also, StackOverflow questions are expected to show a modicum of effort; both of those questions are basic, easily-Googleable tasks. — SLaks, Jun 13 '13 at 12:54

Maresh · Answer 1 · 2013-06-11T15:18:24.963

2

Edit

var el = document.querySelectorAll(".cr-container input:checked");

Doc: https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll

For jQuery:

If think what you want is:

$(".cr-container input:checked")

As you can see it's not that different.

or

 $(".cr-container > input:checked")

Doc:

http://api.jquery.com/checked-selector/

edited Jun 11 '13 at 15:18

answered Jun 11 '13 at 15:11

Maresh

4,644
25
30

What main the ~ after input:checked? – Daniel Garcia Sanchez Jun 11 '13 at 15:12
Oh I'm sorry, i gave you a jquery answer, did you want a pure javascript one? – Maresh Jun 11 '13 at 15:16
Ye... Just noticed. I edited. – Maresh Jun 11 '13 at 15:18

Cana · Answer 2 · 2013-06-11T15:20:04.330

1

The ~ operator is to select all sibling element in the DOM
:checked is the pseudo-class to select radio-buttons et check-boxes which are checked
The . is to select the HTML element with the class

This should work :

$('.cr-container input:checked').siblings('.cr-bgimg div span')

edited Jun 11 '13 at 15:20

answered Jun 11 '13 at 15:14

Cana

2,204
1
13
12

1

I thought so too but he's not looking for jQuery. Just javascript – Maresh Jun 11 '13 at 15:22
1

but I need not for jquery, please dear – Daniel Garcia Sanchez Jun 11 '13 at 15:23
Have a look to this : http://stackoverflow.com/questions/842336/is-there-a-way-to-select-sibling-nodes – Cana Jun 11 '13 at 15:34

translating css3 selector to javascript

2 Answers2