How would i make an element inside of a div rotate repeatedly? - css

Question

I have a div and can neither use ID nor class.
I can only use names like so:
<div name="picture">
<img src="http://i.imgur.com/p0Fu5UZ.jpg" />
</div>
<div name="info">
<p>- Insert information here</p>
</div>
CSS:
div{
-webkit-animation: name 4s infinite linear
}
#-webkit-keyframes name {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
What's the appropriate way to select any particular div, because [name=picture] doesn't work with the crammed code nor the non-crammed code. What can i do to fix this?

Answer 1

It should work for you:
CSS:
div[name="picture"] {
-webkit-animation: name 4s infinite linear
}
#-webkit-keyframes name {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
HTML:
<div name="picture">
<img src="http://i.imgur.com/p0Fu5UZ.jpg" />
</div>
<div name="info">
<p>- Insert information here</p>
</div>
Demo: http://jsfiddle.net/srnug/121/
If you need the elements inside the div to rotate, then you can modify the selector as div[name="picture"] img or div[name="picture"] p