Search code examples
csscode-snippetsemmet

Why is my custom css snippet not working?

I created a custom css snippet for nth-of-type keyword in css. But it doesn't seem to work. All other snippets work perfectly.

<snippet>
    <content><![CDATA[
nth-of-type(${1})
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>noty</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>source.css</scope>
</snippet>

But when I enter the tab trigger and press tab it just puts a colon ahead. Also I have installed Emmet and I think it might be conflicting with something here. Also I've saved the snippet in the correct directory.

Snippet fails

Solution

  • As Philipp Sander says 'noty' is not an element. it's a content of the <tabTrigger>. CSS won't work for content.

    You can use tag/an element name or you can use class/id property in an element, and use that class/id value to select that element.

    Id property : <tabTrigger id="noty_element">noty</tabTrigger>

    styles for Id: 

    #noty_element {
     //your styles
}

    class property : <tabTrigger class="noty_element">noty</tabTrigger>

    styles for Id: 

    .noty_element {
     //your styles
}