current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

I am working on an Angular.js app with a plane view that contains objects. Each time when the user drags an item from the left menu bar on to the middle of the screen, a new object is initiated.

The CSS selector of each item looks like this:

  #drag-item-0

   #drag-item-1

   #drag-item-2

etc.

So basically, each instation of an object leeds to an new CSS selector. I need to give each object different CSS styling, but I don´t know, how the corresponding CSS selector would look like. Any help or hints would be appreciated, thanks!

share|improve this question
    
can you use css classes or ng-style? – Daniel A. White 21 hours ago
up vote 0 down vote

If those are children elements of a, let's say <div Id="elid"><\div> you could use the nth-child(pos) where pos is the children element position.

Like #elid:nth-child(2) to get the second children element of the div.

share|improve this answer
up vote 0 down vote

You can target odd and even rows so that new rows are distinctive when added:

div:nth-child(even) {background: #CCC}
div:nth-child(odd) {background: #FFF}

You could also set up a repeater with SASS/LESS to target n number of objects, like this:

@iterations: 10;

.span-loop (@i) when (@i > 0) {
                #drag-item-@{i} {
                    background: rbga(@i * 10, 25,25,1);
                }

            .span-loop(@i - 1);
        }

        .span-loop (@iterations);*/

Which would create css selectors for #drag-item-0 through to #drag-item-10

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.