Creating a customizable CSS selector in an Angular.js application

Question

Creating a customizable CSS selector in an Angular.js application

I'm currently developing a project in Angular.js involving a plane view where various objects are located. Every time a user drags an item from the left menu bar to the center of the screen, a new object is created.

The unique CSS class for each item follows this structure:

#drag-item-0

#drag-item-1

#drag-item-2

and so on.

Therefore, creating a new object results in a new CSS selector being generated. I am unsure how to assign different CSS styles to each object due to this. Any guidance or assistance would be greatly appreciated. Thank you!

html css angularjs

Answer 1

Answer №1

Assuming the elements are children of a parent element, such as

<div Id="elid"><\div>

, you have the option to utilize the nth-child(pos) selector where pos represents the position of the child element.

For example, using #elid:nth-child(2) will target the second child element within the div.

Answer 2

Assuming the elements are children of a parent element, such as

<div Id="elid"><\div>

, you have the option to utilize the nth-child(pos) selector where pos represents the position of the child element.

For example, using #elid:nth-child(2) will target the second child element within the div.

Answer 3

Answer №2

To add distinction to new rows, you can target odd and even rows with the following CSS:

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

Another option is to use a SASS/LESS repeater to target a specific 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);*/

This code will generate css selectors for #drag-item-0 through to #drag-item-10

Answer 4

To add distinction to new rows, you can target odd and even rows with the following CSS:

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

Another option is to use a SASS/LESS repeater to target a specific 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);*/

This code will generate css selectors for #drag-item-0 through to #drag-item-10

Creating a customizable CSS selector in an Angular.js application

Answer №1

Answer №2

Similar questions

What is the best method for creating a vertical line separator with a hover effect in CSS?

Is there a way to obtain metadata for a specific link?

Unable to display socket data in Angular js Table using ng-repeat

Is it better to use two div elements with the same v-if condition or wrap them in

Show and conceal columns in HTML with the help of JavaScript

Included adaptable background-images in the upload

Resizing Image-maps and images on the fly with maphilight.min.js

The data insertion query in MYSQL seems to be malfunctioning

Retrieving particular excerpts from a block of text that includes the keyword "javascript."

Maintain consistent distance between checkboxes and their corresponding labels

Storing multiple entries in a single MySQL cell along with JSON data

Show different JSON data based on the existence of another key in Javascript

Switching between different sections of a webpage

Having issues with the addClass() method in JavaScript not functioning properly on hover

Updating the font path for Bootstrap-icons on a static website

The Thinkster.io MEAN Stack guide: A blank "post" appears on the homepage. What is causing this and how can I remove it?

Monitoring and recording every server-side interaction within the AngularJS user interface

The delete button is only effective on the initial row and does not apply to any subsequent rows

What is the reason for needing to refresh when submitting form data in a Node application with an HTTP POST

Guide to creating a PHP script for interfacing with a MySQL database