Problem with checkbox, :checked and table cells

Discussion in 'CSS' started by xms, Mar 31, 2016.

  1. #1
    My code is not working. It should work when the checkbox is checked or unchecked.

    How could I get this code to change the background color of all cells which class is "name1"?

    CSS code:

    .player1-checkbox ~ td.name1 {
    background-color: blue;
    }
    
    .player1-checkbox:checked ~ td.name1 {
    background-color: orange;
    }
    Code (CSS):

    HTML code:

    <input type="checkbox" id="player1" class="player1-checkbox" />
    
    <table class="chart">
      <tr><td class="name">Ny Name</td><tr>
      <tr><td class="name name1"><label for="player1">FIRST LAST</label></td></tr>
      <tr><td>&nbsp;</td></tr>
      <tr><td class="cup left name1"><label for="player1">FIRST LAST</label></td>
    </table>
    HTML:
     
    xms, Mar 31, 2016 IP
  2. xms

    xms Active Member

    Messages:
    169
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #2
    Here is the solution...

    CSS code:

    .player1-checkbox ~ table tr td.name1 {
    background-color: blue;
    }
    
    .player1-checkbox:checked ~ table tr td.name1 {
    background-color: orange;
    }
    Code (CSS):
     
    xms, Mar 31, 2016 IP
  3. KangBroke

    KangBroke Notable Member

    Messages:
    1,026
    Likes Received:
    59
    Best Answers:
    4
    Trophy Points:
    265
    #3
    You shouldn't bastardize classes in this way.
     
    KangBroke, Mar 31, 2016 IP
  4. xms

    xms Active Member

    Messages:
    169
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #4
    What do you mean?
     
    xms, Mar 31, 2016 IP
  5. KangBroke

    KangBroke Notable Member

    Messages:
    1,026
    Likes Received:
    59
    Best Answers:
    4
    Trophy Points:
    265
    #5
    td class="cup left name1"
    Code (markup):
    @deathshadow said it best ->
    "This type of nonsense reaches the pinnacle of stupidity with CSS frameworks or worse, the so called "Object Oriented CSS" (OOCSS). By their very nature they create presentational markup -- if you don't know what's wrong with code like this:

    <div class="leftCol thirdwidth colorRed sectionHeight bigText">
    Code (markup):
    Do the world a favor and go do something harmless like macramé."

    Source: http://www.cutcodedown.com/article/whats_wrong_with_YOUR_website_part4
     
    KangBroke, Mar 31, 2016 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Really the "classes for nothing" are just the tip of the iceberg of problems here... like what in blazes makes a label and a input be tabular data; much less if you only have one TD per TR what the huff are you even using a table FOR?!?
     
    deathshadow, Apr 2, 2016 IP
    KangBroke likes this.