Computed css class selector, (4n+1) - how? :-)



In my component, I want a computed style, that is able to adjust the nth-child programmatically.


with javascript, how would i change the “4” ?

I where first thinking of a “computed class”, but I don’t know how to do it?


How many options do you have?

You could build, say, 10 switches and set class on ul as you need:

.one li:nth-child(1n+1) { ... }
.two li:nth-child(2n+1) { ... }


That is an option I was thinking of, but I think that the webpack thing that removes unused classes is going to remove them…


Looks like you can just write the HTML of a style element, as long as it’s outside of your Vue app:

Only tested in OSX/Chrome.


Was curious about this, here’s another option:

Though I quite like Dave’s, 0 manual management of classList and you could conditionally change the styling. Funny we both picked color: red :laughing:


Another option would be using the modulo operator:


Always red! Or hello!

I learnt my lesson using profanities (especially when tired or frustrated) after I checked something fairly unsavoury into an open source codebase one time :grimacing:


lol! :joy:


You can also write a <style> direct to the components template.

{{ gimmeSomeString() }}


I’m not familiar with methods inside < style >

I dont think I understand what you mean, can you show a more complete example?


By now, I’ve just solved it with the first suggestion as davestewart showed


Another option would be using the modulo operator:

hahahaha so epic solution :smiley: :laughing: :hugs:

const MyComp = {
    template: '<div>
            {{ myStyle() }}
        <span class=boo>
    methods: {
        myStyle() {
            return '.boo {
                color: ${ this.a ? "blue" : "red"};


Thanks. I’m using webpack, is it possible to mix this with an existing component?

When I try to put the < style > tag inside the < template > tag, webpack just explode :smiley:


Pretty sure the style tag approach is a red herring.

Use the modulo approach and you’re good to go.


Can’t tell why your webpack explodes.
Maybe delegating the complete tag to a computed property works better.


If you’re trying that in an SFC it’s likely because <style> must be its own declaration and using it within <template> would be a syntax error as far as vue-loader is concerned. Another option, so you don’t need to rely on including an empty <style> tag in your html, is to create the element on the fly: