Ways to modify the color of a label based on its unique identifier through CSS

Is there a way to dynamically change the color of a label using CSS based on its content? For example, changing the color of the label depending on the day of the week: Mon = yellow, Tue = Pink ... Sun = red.

This is a toggler for the label property. It would be great if it could achieve this functionality.

input[type=checkbox]:checked + label {
    background:#0099cc;
    border-radius:3px;
    color: #ffffff;
    font-weight:bold;
    padding:0px 3px 0px 3px;
}

So, ideally the code should modify the label like this:

input[type=checkbox]:checked + label[id=1] {
    background:#0099cc;
    border-radius:3px;
    color: #ffffff;
    font-weight:bold;
    padding:0px 3px 0px 3px;
}

I'm not very experienced with CSS, any suggestions?

htmlcss

Answer №1

It is crucial to keep in mind a couple of key points:

  1. The CSS selector + is known as the adjacent selector, which targets only the element that immediately follows the preceding element. This means the label must come right after the checkbox for it to be effective.
  2. In CSS, an id cannot begin with a numerical digit.

There are multiple ways to achieve this functionality, such as using id, data attributes, or classes.

Example using an id:

input[type=checkbox]:checked + label#monday {
}

Example using a data attribute:

input[type=checkbox]:checked + label[data-day="monday"] {
}

Example using a class:

input[type=checkbox]:checked + label.monday {
}

Answer №2

It seems like you've already figured out the solution to your query... In case the labels come equipped with an ID attribute....

input[type=checkbox]:checked + label#Wednesday

<label id="Wednesday">Wednesday<label>

Answer №3

The most efficient method is to assign a unique identifier to each day (which will come in handy later on) and implement the following code:

#id1:checked + label {
  color: red;
}
#id2:checked + label {
  color: blue;
}
#id3:checked + label {
  color: orange;
}
#id4:checked + label {
  color: purple;
}
#id5:checked + label {
  color: green;
}

Feel free to check out a live DEMO

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

Endless rotation with stunning magnification feature

My goal is to create a responsive carousel with auto-play infinite loop functionality, where the center item always occupies 70% of the viewport width. Currently, I have achieved a similar result using the Slick library: https://codepen.io/anon/pen/pBvQB ...

javascriptjqueryhtmlcss

Incorporate a CSS attribute into your code using the cssText method in JavaScript

By using JavaScript, I successfully added an attribute to the HTML tag with the following code: document.documentElement.style.cssText = 'cursor: url("https://image0.png"), auto !important;'; This resulted in the following CSS being ap ...

javascripthtmlcss

CSS3 divs scattered everywhere

I am really struggling with this CSS3 code: * { margin: 0px; padding: 0px; border: none; } body { font-family: Arial, Helvetica, sans-serif; font-size: 14px; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DBDBDB), to(#FFFFFF), co ...

asp.nethtmlxhtmlcss

Troubleshooting layout problems caused by positioning items at window height with CSS and jQuery

At this moment, my approach involves utilizing jQuery to position specific elements in relation to the window's size. While this method is effective when the window is at its full size, it encounters issues when dealing with a debugger that's ope ...

javascriptjqueryhtmlcss

Strategies for making a child div fade out when the parent div is hovered over

I have a div with the class name ordershape and inside it, there is another div called fad-res. My goal is to display the corresponding fad-res when I hover over a specific ordershape, while hiding the other divs. <div class="ordershape"> & ...

javascripthtmlcss

Obtaining user Object data from an HTML form in Spring Boot Controller

Having trouble retrieving data from an HTML form in my controller method while trying to create a straightforward Web application for user registration. I've attempted various solutions without success. Main class: /* Main class code here */ Con ...

javahtmlspring-bootmaven

Having difficulty in closing Sticky Notes with JavaScript

Sticky Notes My fiddle code showcases a functionality where clicking on a comment will make a sticky note appear. However, there seems to be an issue with the Close Button click event not being fired when clicked on the right-hand side of the note. I have ...

javascriptjqueryhtmlcssckeditor

What is the best way to store HTML in a variable as a string?

Imagine if I have a variable: let display_text = "Cats are pawsome!" I aim to show it as such: <div> <b>Cats</b> are pawsome! </div> To be clear, dynamically enclose the word "cats" whenever it shows up. ...

javascripthtmlreactjsfrontend

What is the position of an image within a div when its CSS position is set to absolute

My div has a position:absolute setting because I need it to be able to show/hide on my page. However, now I want to add a Close Button in the top-right corner, but I am unable to do so because my div is already positioned absolutely. http://jsfiddle.net/ ...

htmlcsscss-position

Display the appropriate content using jQuery when a button is clicked

I have a series of buttons, and when each button is clicked, it will display the corresponding div while hiding all other sibling items. Being new to jQuery, I attempted a solution where sibling divs did not hide properly. Is there a way to accomplish t ...

javascriptjqueryhtml

Issue with Three JS canvas not adjusting to fit mobile device window width

I'm currently exploring the world of 3D animations using Three JS and I've set out to create a project involving multiple spinning cubes. However, I've encountered an issue where the canvas doesn't resize correctly when zooming in or ou ...

javascripthtmlcanvasthree.js

Utilize jQuery to toggle the visibility of one specific div among others with the same class

I'm currently working on a comment and like system similar to Facebook. However, I am struggling to select the specific div element! Here is a snippet of my current HTML: <div class='activoptions'><a href='#'>Like< ...

jqueryhtmlcss

New Release: Bootstrap4 beta introduces improved table features and d-inline-block styling

I need to arrange multiple tables side by side and allow horizontal scrolling overflow if they don't fit on the page. Here is a sample in jsfiddle: https://jsfiddle.net/c949Lspy/10/ Using Bootstrap: <div style="white-space: nowrap;"> <ta ...

htmlcssbootstrap-4

Customizing HTML Output for Django Choice Field

Currently immersed in a Django project, I find myself facing a daunting challenge. My task is to transform an HTML page (form) into a functional Django Form App. The hurdle lies with the ChoiceField, specifically the two options Manhã and Tarde. On the le ...

htmlcssdjango

Employing Selenium for extracting the id_str element

Currently, I am utilizing the Selenium library in python to scrape content from a twitter search results page: https://twitter.com/search?q=twinkie&src=typd&lang=en The Selenium library provides several functions to help identify the desired conte ...

pythonhtmlseleniumweb-scraping

Customize the background color of selected date in MUI DatePicker 6.19.7 with sx styling

Looking to update the color of a specific element highlighted by an arrow using sx{} DatePicker <LocalizationProvider dateAdapter={AdapterDayjs}> <DatePicker className={styles.picker} ...

cssreactjsmaterial-uidatepickercalendar

Is there a way to hide an HTML element from view while still allowing it to be found by the browser?

Scenario: A collection of cards with hidden names, but still necessary to search by name Picture album cards without any album names visible, only the images, yet still searchable using Ctrl+F Is there a particular feature or CSS code that would enabl ...

htmlcssbrowser

Issues with playing Html 5 video arise when making an ajax call

My goal is to implement an AJAX call followed by displaying an HTML5 video. The provided code snippet seems to be ineffective. $.ajax({ type: "POST", url: "Videos.aspx/GetBlocs", contentType: "application/json; charse ...

jqueryajaxhtmlhtml5-video

Submit your document without relying on the web control feature

Currently, I am developing a fingerprint web application where I will be retrieving the user's fingerprint using ActiveX controls. My goal is to display the fingerprint image on the webpage without requiring users to manually select and upload it usi ...

phphtmlasp.netactivex

Submitting an HTML form results in no data being sent

I am currently facing an issue with a form on my website. The form code is as follows: <form action="" method="post" id="login_form"> <input type="text" name="log_login_form"/> <br/> <input type="password" name="log_password_for ...

phphtmlforms