Search code examples
csscustom-element

Is it possible to style custom elements with dashes in the element name?

I'm afraid this won't be possible at all but I couldn't find a question for this nor a reference on if it was possible so I'm asking it here...

If you are familiar with AngularJS or Polymer, you'll know that you can have custom elements with dashes in the element name like special-element. My problem is, how do I style all these elements without having to use a class for them?

The thing is, I have something like this on my code:

<special-element></special-element>
<special-element></special-element>
<special-element></special-element>

They are inline-block elements and I want them to be separated with a specific margin (but no margin after or before the last/first element). For that, I was thinking of something like:

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

But this does not work... Any ideas on can I achieve this without using a class for the special-element?

Solution

  • You simply need to escape the dash.

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