Можно ли стилизовать пользовательские элементы с помощью тире в имени элемента?


Боюсь, что это вообще невозможно, но я не смог найти ни одного вопроса для этого, ни ссылки на то, возможно ли это, поэтому я задаю его здесь...

Если вы знакомы с AngularJS или Polymer, вы знаете, что у вас могут быть пользовательские элементы с тире в имени элемента, например special-element. Моя проблема заключается в том, как я могу стилизовать все эти элементы, не используя для них класс?

Дело в том, что у меня есть что-то вроде этого в моем коде:
<special-element></special-element>
<special-element></special-element>
<special-element></special-element>

Они являются inline-block элементами и я хочу, чтобы они были разделены с определенной маржей (но без маржи после или перед последним/первым элементом). Для этого я думал о чем-то вроде:

special-element + special-element {
    margin-left: 10px;
}

Но это не работает... Есть идеи о том, Могу ли я достичь этого без использования класса для special-element?

1 2

1 ответ:

Вам просто нужно избежать тире.

special\-element {
  padding: 10px;
  background: red;
  display: block;
}
<special-element></special-element>