Customizing the css for a certain category

On my homepage, I display categories with unique labels and icons. Each category is assigned a specific color for its label/icon.

Typically, setting unique colors in HTML is straightforward: 

<!-- ngRepeat: category in categories | orderBy:'display_priority' --> 
<a ng-href="explore?category=53" ng-repeat="category in categories | orderBy:
'display_priority'" class="ui random-color item large label ng-binding ng-scope" 
ng-show="hasCategory" href="explore?category=53" style="color:red";>

However, due to regular UI updates that reset the HTML, I am exploring ways to achieve the same results using CSS.

Currently, I can change all category labels to the same color with: 

#front-page .ui.label {
color: #XYZ
}

Is it possible to uniquely change the color of each label through CSS alone?

htmlcsscategories

Answer №1

If you have a limited number of categories, one way to achieve this could be by using CSS3 nth-child pseudo classes:

http://www.example.com/css-nth-child-tutorial

Alternatively, you can dynamically change the color of category elements using JavaScript by looping through them and updating their style properties.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When clicking on the text areas, the Twitter-Bootstrap drop-down login automatically closes

Greetings! I am currently working on my first website design using JQuery. My project includes a dropdown login box created with Twitter-Bootstrap. Unfortunately, I'm facing some challenges with the JQuery script that controls the behavior of the logi ...

javascriptjqueryhtmltwitter-bootstrap

Achieve full width for container using flexbox styling

In an attempt to develop a category dropdown menu with multiple columns based on the length of the <ul>, I am facing some challenges. For reference, you can view the fiddle that I have created here. The goal is to arrange each submenu item below th ...

htmlcssflexbox

Optimizing Window Width with React.js and CSS

I'm currently in the process of building a responsive website with react. I am utilizing CSS stylesheets for styling and have used @media queries to ensure responsiveness. However, I've encountered an issue while testing in Chrome where the elem ...

javascriptcssreactjsgoogle-chrome

Employing Jquery for restricting checkbox selection based on parent HTML elements

UPDATE I am looking to limit checkbox selection in specific sections on the same page. To prevent conflicting inputs from different sections, I believe using the label selector <label data-addon-name="xxx"> as a separator is the best appro ...

javascriptjquerycsscss-selectors

Translate CSS into JavaScript while maintaining selector understanding

I am interested in developing a tool that can read a .css file and generate a function that will accept an array of class names as input and output the corresponding styles for an element with those classes, represented as a JavaScript object. This tool wo ...

javascriptcsscss-modulescss-parsingglamorous

Styling the Menu Item with CSS

A graphic designer provided me with these elements to incorporate into the HTML design. Everything was going smoothly until I encountered the faint, uneven borders on the LI tags, especially when dealing with a list containing only five items. If anyone ...

javascriptjqueryhtmlcss

Changing button alignment using CSS to create a new line

Currently, I am working on a React project using Material-UI where I am trying to create a numpad. The code snippet below showcases part of my implementation: // some parts are omitted for conciseness const keys = [7, 8, 9, 4, 5, 6, 1, 2, 3, 0]; ...

cssreactjsmaterial-ui

Larger icon graphics

Is it possible to increase the size of Glyphicons in Twitter Bootstrap 3.0 without using the btn-lg class? I found this code that makes glyphicons big: <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-th- ...

csstwitter-bootstraptwitter-bootstrap-3glyphicons

Exploring reviews with an innovative combination of Node.js and MongoDB

Recently diving into the world of Nodejs and mongoDB, I am excited to create two distinctive pages: one for users to update their account details such as profile picture, email, and name - all of which would be saved into the database; and another for re ...

htmlnode.jsmongodb

Step-by-step guide on repairing a countdown clock using JavaScript, HTML, and

I'm having issues with my JS on my website. I am new to this and currently in the process of setting up a website. I want to add a timer to show when the site will be active. It seems like there is an error somewhere in the JS code that I can't ...

javascriptjqueryhtmlcss

Is it possible to loop through a directory containing images and dynamically generate a CSS rule that positions each image based on its

I'm not very familiar with PHP so I could use your expertise in coming up with the most efficient and straightforward solution for this specific task. In my directory "path/images/headers," I have multiple header images all cut to the correct size, ea ...

phpcssimage

The uncertainty surrounding the usage of checkboxes in D3.js

I am faced with the challenge of adding checkboxes to multiple groups within an SVG, each containing a circle and text element. I have attempted to accomplish this by using D3 to append foreignObject tags and then add checkboxes to each group. The code I h ...

javascripthtmld3.js

PubNub's integration of WebRTC technology allows for seamless video streaming capabilities

I've been exploring the WebRTC sdk by PubNub and so far, everything has been smooth sailing. However, I'm facing a challenge when it comes to displaying video from a client on my screen. Following their documentation and tutorials, I have writte ...

javascripthtmlwebrtcpubnub

The z-index is not functioning properly in terms of layering correctly

Seeking advice on z-index... I'm experimenting with the code and trying to get my id="hidebar" to appear above the "content" and "content-inner" divs. Apologies if this is elementary, but I'm having some trouble =D CSS structure file: body { ...

cssz-indexlayer

substitute a variable

I am trying to update the value of a variable using an HTML form. Within my config.php file, I have declared a variable $num = 3; I would like the value 3 to be replaced with whatever I input in the form form.html. Below is the code for my HTML form : ...

phphtmlvariables

Creating line breaks in Bootstrap input group formatting

My issue involves rows with checkboxes and labels, some of which are longer than others. When the browser is resized or viewed on a mobile device, the columns containing longer labels collapse to a second row while shorter labels stay beside their checkbox ...

htmlcsstwitter-bootstrap

Using an array of objects to set a background image in a Bootstrap carousel using jQuery: a step-by-step guide

I have an array of items, each containing a background property with a URL to an image. Here is my array: https://i.sstatic.net/jfrV0.png Here is the HTML structure: <div id="myCarousel" class="carousel slide" data-ride="carousel"> <ol ...

javascriptjqueryhtmlcsstwitter-bootstrap

Switch up the Thumbnail Image based on the selected category

While testing a shopping site I created, I encountered an issue with changing the banners at the top of the page based on the category the user is viewing. This site is hosted on a server on my localhost, not using wordpress by the way. <div class=" ...

javascriptphphtmljquerycss

Automating Indesign with HTML5 and JavaScript through IDML files

I am currently working on automating IDML files. My goal is to display an IDML template in an HTML5 editor. Within the sample.idml file, I have a basic TextFrame containing the text "Hello World." After unzipping the file and navigating to the stories fol ...

javascripthtmlangularjsautomationidml

Discover the procedure to alter date formats in MongoDB

I recently created a MongoDB collection using Node.js with the following code: var mongoose = require('mongoose'); var TTTUsersSchema = new mongoose.Schema({ username: String, password:String, active: Boolean, created_at: { type: Dat ...

htmlnode.jsmongodb