[Makaveli.]

Basically, I have a signup form in the backend of a WordPress site and it includes a dropdown menu of 'GREEN,AMBER,RED' which then displays these sign ups on the front end in a table, kind of like a database I'm guessing.

Screenshot: https://imgur.com/a/Z4zxk

I need all the status' to have their colour as either a background of the text or the font colour of the text itself on the frontend, like a colour code to make them stand out if you understand.

Like this: https://imgur.com/p6EEqGl

I'm assuming that I'd give all the red/amber/green dropdowns a class and just change them in CSS but I literally have no clue how I would do it on the large scale for all the entries, any help on where to get started is appreciated.

Thanks.

[Ðr1ps]

Basically, I have a signup form in the backend of a WordPress site and it includes a dropdown menu of 'GREEN,AMBER,RED' which then displays these sign ups on the front end in a table, kind of like a database I'm guessing.

Screenshot: https://imgur.com/a/Z4zxk

I need all the status' to have their colour as either a background of the text or the font colour of the text itself on the frontend, like a colour code to make them stand out if you understand.

Like this: https://imgur.com/p6EEqGl

I'm assuming that I'd give all the red/amber/green dropdowns a class and just change them in CSS but I literally have no clue how I would do it on the large scale for all the entries, any help on where to get started is appreciated.

Thanks.

Giving them a class is your best pick. If you go to the code that status is being set, you can tweak it to automatically add your class.
If there is an if statement, just add your classes.
If it's grabbing the statuses off a database, add an if statement and then add your classes.
Then you just apply the CSS you want to the classes.

[kznamst]

The best option is using class or id (doesn't matter).

[Ðr1ps]

The best option is using class or id (doesn't matter).

It does matter, you can't use id for multiple elements.

[SteezyHB]

It does matter, you can't use id for multiple elements.

technically you can, it's wrong, but why exactly?
w3 doesn't specify why

So I'm kinda curious, what is the exact reason they should be unique?
Will it break any big things?

[Ðr1ps]

technically you can, it's wrong, but why exactly?
w3 doesn't specify why

So I'm kinda curious, what is the exact reason they should be unique?
Will it break any big things?

Most browsers wouldn't be able to read it, you would have issues with CSS, JS and generally anything that uses selectors.

[D3xus]

You can apply a CSS class to add a font color or text background. I sent you a PM to get more info to help you.

It does matter, you can't use id for multiple elements.

technically you can, it's wrong, but why exactly?
w3 doesn't specify why

So I'm kinda curious, what is the exact reason they should be unique?
Will it break any big things?

You technically can, but it's bad practice to do so. IDs are for unique elements that will only appear once on a page (navigation, footer), classes are for repetitive elements on a page (content containers, navigation elements, generic list elements). Example.

IDs also have a higher "priority" than classes do when CSS is being rendered; when two conflicting CSS rules have been declared, the ID's rule overrides the class' rule. More reading on specificity

Most browsers wouldn't be able to read it, you would have issues with CSS, JS and generally anything that uses selectors.

Not true at all. JavaScript will read elements that share IDs with other elements, it'll just be stored in an array versus a singular reference (when using getElementById, if there are two or more elements that share an ID with the provided argument, the function will return an array versus a singular HTML DOM reference). CSS also doesn't have a problem with two elements with the same ID...Again, it's just bad practice and makes for messy/unorganized code.

EDIT: Aerox corrected me; document.getElementById() will only return the firstmost element with a provided ID versus an array. I confused that with getElementByClassNames, which will return an array of elements for the provided class. My mistake. JavaScript will be a little weird (you'd need to write your own function or use jQuery instead. CSS should be fine.

[Rushax]

This is because of techniques such as document.getElementById in JS that gets a unique element. If the webpage has multiple ID's with the same name then it'll run it's proceedural syntax running from top to bottom and select the first ID inside the webpage.

EDIT~ Didn't realize D3xus already answered this, my bad.

[D3xus]

This is because of techniques such as document.getElementById in JS that gets a unique element. If the webpage has multiple ID's with the same name then it'll run it's proceedural syntax running from top to bottom and select the first ID inside the webpage.

EDIT~ Didn't realize D3xus already answered this, my bad.

You actually corrected me on the second bit, I had confused getElementById with getElementByClassNames. Thanks for the catch.

[Ðr1ps]

You can apply a CSS class to add a font color or text background. I sent you a PM to get more info to help you.



You technically can, but it's bad practice to do so. IDs are for unique elements that will only appear once on a page (navigation, footer), classes are for repetitive elements on a page (content containers, navigation elements, generic list elements). Example.

IDs also have a higher "priority" than classes do when CSS is being rendered; when two conflicting CSS rules have been declared, the ID's rule overrides the class' rule. More reading on specificity

Not true at all. JavaScript will read elements that share IDs with other elements, it'll just be stored in an array versus a singular reference (when using getElementById, if there are two or more elements that share an ID with the provided argument, the function will return an array versus a singular HTML DOM reference). CSS also doesn't have a problem with two elements with the same ID...Again, it's just bad practice and makes for messy/unorganized code.

EDIT: Aerox corrected me; document.getElementById() will only return the firstmost element with a provided ID versus an array. I confused that with getElementByClassNames, which will return an array of elements for the provided class. My mistake. JavaScript will be a little weird (you'd need to write your own function or use jQuery instead. CSS should be fine.

Here is something I snatched off stack overflow:

Browsers always try to "fail silently". What this means is that even though your HTML is invalid, the browser will try to guess what your intent was, and handle it accordingly.

There are browsers though that don't do that. So this isn't just for the looks, it would also not work for some.

[SteezyHB]

Huge quote

Thanks for the detailed information, the link about specificity is also some nice information to learn.

[comp]

It's probably better to just parse the date on the template and give the element a class depending on the date like you mentioned on your previous post, no need to create the color entry for each element.