Как сделать вложенность в css?

Question

[Андрей]

В скринкасте используют sass, я использую css.
Хотел спросить как сделать такую вложенность только для css?

.class {
	.action { opacity: 0; }

	.action:hover  { 
		opacity: 1;
		transition: opacity 0.5s ease; 
	}
}

Грубо говоря есть правила для .class, но кода встречается .action их нужно переопределить.

Т.е. у меня есть список постов на странице, пост - .class
а иконки .action должны подсвечиваться при наведении на пост. Сейчас получается, что высвечиваются только при наведении на них самих.

Answer 1

[Александр Вульф]

.class .action { }
.class .action:hover { }

Comments

[Андрей]

Да, я так пробовал, но не помогло. Все равно срабатывает только при наведении на элемент с классом .action. Может тогда не css дело.

Т.е. у меня есть список постов на странице, пост - .class
а иконки .action должны подсвечиваться при наведении на пост. Сейчас получается, что высвечиваются только при наведении на них самих.

[Александр Вульф]

Андрей: .class:hover .action { }

Answer 2

[Алексей Алексеев]

Используйте .class:hover .action { }. Это позволит описать поведение иконки при наведении непосредственно на .class. Конечно, если .action находится внутри .class

Answer 3

[iBird Rose]

вот и выросло то поколение, которое уже не знают как работать с css, но говорят что хорошо разбираются в sass... а в наше время такое только с jquery было... эх...

Answer 4

[Павел]

.правилоОдин .правилоДва { стили }
то бишь просто все в ряд

Answer 5

[Алекс Глебов]

www.sassmeister.com
преобразователь в css

а лучше используй sass, он удобнее. И на него легко перейти, если у css просто сменить разрешение на scss это будет валидным sass-ом