1 reply [Last post]
Thu, 2019-03-07 21:51
Rone
Rone's picture
Offline
newbie
Last seen: 1 week 2 days ago
Timezone: GMT+1
Joined: 2019-03-07
Posts: 1
Points: 2

Hello,

I am using :checked function for a checkbox that I created.
The fact is that I would like to change the background of a span who has ID and CLASS defined.

So I have declared the checkbox like this in my page (I am using Wordpress)

<input type="checkbox" id="Jour1" class="Jour1" name="NUTRITION[]" value="Jour1"><label for="Jour1" id="Jour1">DONE</label>

And in the CSS 

.Jour1:checked ~ .span#Jour1 {
  background: #7ac143 !important;

So final html code analysed with firefox is like this :

<span class="collapseomatic arrowright colomat-close colomat-visited" id="Jour1" tabindex="0" title=" Jour 1 "> Jour 1 </span>
<div id="target-Jour1" class="collapseomatic_content " style="">
<input type="checkbox" id="Jour1" class="Jour1" name="NUTRITION[]" value="Jour1"><label for="Jour1" id="Jour1">DONE</label>
<br>
jjjjjjjjjjjjjjjjj
<br>

The fact is that if I use 

.Jour1:checked ~ .span#Jour1 {
  background: #7ac143 !important;

I can't get the background in the right color...nothing changes when I check the box

But I have verfied that I was accessing the right part of the code with 

.span#Jour1 {
  background: #7ac143 !important;

And here it works, the background goes to the right color.

could someone help me on this topic please ?

thank you

Top
  • Login or register to post comments
Tags:
Sat, 2019-03-09 22:47
#1
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 52 min 42 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9732
Points: 3811

One way to skin this cat

Try this:

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content=
	    "width=device-width, height=device-height, initial-scale=1"
            name="viewport">
 
    <title>
      Test document
    </title>
 
    <style type="text/css">
    /*<![CDATA[*/
 
    body {
	background-color: white;
	color: black;
	font: 100%/1.5 sans-serif;
	margin: 0;
	padding: 1em;
    }
 
    p {
	font-size: 1em;
    }
 
    #wrapper {
	margin: 0 auto;
	max-width: 65em;
    }
 
    h1 {
	font-family: serif;
	margin-bottom: 0;
	text-align: center;
    }
 
    /* end boilerplate */
 
    input + span {
	background-color: pink;
	visibility: hidden;
    }
 
    input:checked + span {
	visibility: visible;
    }
 
    /*]]>*/
    </style>
  </head>
  <body>
    <div id="wrapper">
      <h1>
	Problem with :checked (FIXED)
      </h1>
 
      <form action="#"
	      method="get">
	<fieldset>
	  <legend>
	    Pick one or more
	  </legend>
 
	  <label for="Jour1">
	    <input type="checkbox"
		    id="Jour1"
		    class="Jour1"
		    name="NUTRITION[]"
		    value="Jour1"> Jour1
 
	    <span>Done</span>
	  </label>
	</fieldset>
      </form>
    </div>
  </body>
</html>

g

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top