Как задать значение классу если там имеется символ '+'?

Question

[foxayb]

Добрый день. Подскажите, пожалуйста, решение такой проблемы:
Есть желание в футере сделать поворот иконок соц.сетей:

.footer-social-w .Instagram {
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg));
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}

Для инстаграм, твиттер и ютуба - сработало, а вот для гугла - нет. Причина в том, что его класс с символом "+"

<a href="https://plus.google.com/u/0/115070119646625439639" class="Google+" target="_blank"><img src="http://www.site.ru/wp-content/plugins/zilla-social/images/16px/Google+.png" alt="Google+"></a>

Подскажите, как в стилях прописать значения для этого класса чтобы работало?

Comments

[Игорь Перегудов]

а убрать + у класса поробовали? или заменить класс на "google-plus"

[foxayb]

Игорь Перегудов: Этот класс формирует плагин zilla-social.

Answer 1

[Алексей Ярков]

.footer-social-w [class^="Google"] {
	...
}

Comments

[foxayb]

.footer-social-w [class^="Google"] {
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg));
	-webkit-transition:all 500ms;   
	-moz-transition:all 500ms;
	-o-transition:all 500ms;
	transition:all 500ms; 
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
}
 
.footer-social-w [class^="Google"] img {
	-webkit-border-radius: 95px;
	-moz-border-radius: 95px;
	border-radius: 95px;
}
 
.footer-social-w [class^="Google"]:hover {
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg));
}

Таким образом? Закрутил в .css, но не работает.

[Алексей Ярков]

foxayb: а у меня работает: https://jsfiddle.net/yarkov_aleksei/zzssrkr3/

[foxayb]

Алексей Ярков: Тоже заработало. ctrl+f5 помог. Спасибо

Answer 2

[Lynn «Кофеман»]

.Google\+ {
  color: red;
}

Но лучше не использовать такие классы

Comments

[foxayb]

Спасибо.